npm 包 vue-hellojs 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，社交网站的登录/授权一直是一个常见的需求。而利用第三方库完成社交登录/授权的功能也是比较常见的实践方式。Vue.js 是一个流行的前端框架，而 hello.js 是一个方便类库，用于处理跨域请求和处理社交网络API。本文将介绍如何使用 vue-hellojs 这个 npm 包来实现社交登录功能。

什么是 vue-hellojs

在介绍 vue-hellojs 前，先来了解下 hello.js 是什么。hello.js 是一个轻量级的微型 Javascript SDK，旨在处理许多网站的OAuth1, OAuth2验证和一些数据API。它目前支持大约20多个社交网络和其他网站的API，如：Dropbox、Discord、Bitbucket、Pocket等等。

而 vue-hellojs 则是基于 hello.js 实现的便捷的 Vue.js 插件。它可以轻松地集成不同社交网络的登录授权功能。

安装

使用 vue-hellojs 需要先安装 hello.js。使用 npm 安装 hello.js 和 vue-hellojs：

npm install hellojs vue-hellojs --save

建议使用 {id}+'-'+{network}.js 的形式命名各个 hellojs 认证页面，以保证可以并行地进行验证（某些网站可能会强制资源共享时跳过hellojs）。

在 main.js 中引入 hellojs 和 vue-hellojs：

import Vue from 'vue';
import hello from 'hellojs';
import VueHello from 'vue-hellojs';

Vue.use(VueHello, hello);

配置

在 main.js 中配置 hellojs，以实现对各个认证网站的OAuth2登录：

hello.init({
    google: 'YOUR_GOOGLE_APP_ID',
    facebook: 'YOUR_FACEBOOK_APP_ID',
    windows: 'YOUR_MICROSOFT_APP_ID'
}, {
    redirect_uri: process.env.BASE_URL + '/authcallback',
    oauth_proxy: 'https://auth-server/provider{network}/redirect'
});

其中第一个参数对象表示支持的社交网络和各自的 appId，第二个参数则是公共的配置选项。

组件

Vue-Hellojs 提供了最核心的两个组件 auth-button 和 auth-popup。在 auth-button 中，我们需要单独指定网站的服务名 name，并在 auth-popup 中引用它，以真正地实现对接操作。页面的整个过程如下：

<template>
  <div>
    <auth-button :name="'google'"> Login with google </auth-button>
    <auth-button :name="'facebook'"> Login with Facebook </auth-button>
    <auth-popup :name="'google'"> Authorization with google... </auth-popup>
    <auth-popup :name="'facebook'"> Authorization with Facebook... </auth-popup>
  </div>
</template>

当用户点击对应的登录按钮时，在所有跳转和认证的过程完毕后，auth-popup 会弹出并向用户发送授权请求。

发送请求&获取信息

// 发送请求 & 获取信息
hello('google').login().then((response) => {
  console.log(response);
  console.log('User signed in with Google and granted authorization to the app.');
}, (error) => {
  console.error(error);
  console.log('User refused to sign in.');
})

当用户授权后，我们就可以使用 response 进行多种操作。例如，我们可以使用此响应对象来弹出对话框窗口，或跳转到 API 端点，并轻松获取秘钥或其他重要信息。

结论

vue-hellojs 是一个方便的 Vue.js 插件，可以轻松地实现社交登录/授权的功能。本文中，分享了 hellojs 的基本概念和核心配置，还讨论了 auth-button 和 auth-popup 两个Vue.js组件。如果您想学习更多关于 Vue.js 或 hello.js 的信息，请查阅官方文档。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60055eb081e8991b448dc43b