@blazes/third-party-auth

第三方授权

于package.json中新增依赖

"@blazes/third-party-auth": "1.0.6-alpha13"

Apple

初始化

调用appleAuthService.init()完成Apple授权初始化。

appleAuthService.init({
    clientId: "YOUR_APPLE_CLIENT_ID",
    scope: "name email",
    redirectURI: "https://www.example.com",
});

初始化参数AppleInitOption如下：

export interface AppleInitOption {
    clientId: string;
    scope: string;
    redirectURI: string;
    state?: string;
    nonce?: string;
    usePopup?: boolean;
}

clientId：Apple Web授权服务应用ID，从Apple开发者后台获取。

scope：用户信息的请求范围。若无特殊需求，可以使用name email

redirectURI：Apple授权完毕后的授权信息的回调地址，从开发者后台获取。必须保证当前页面host与回调地址相同。

开启授权

调用appleAuthService.startAuth()开启授权，返回值为包含授权结果的``Promise`

appleAuthService.startAuth().then((res: AuthRes) => {
    // handle result here
})

AuthRes数据结构如下：

export interface AuthRes {
    idToken?: string;
    code?: string;
}

其中，Apple授权成功后只需拿到code值。

示例

import { appleAuthService, AuthRes } from '@blazes/third-party-auth';

        appleAuthService.init({
            clientId: "YOUR_APPLE_CLIENT_ID",
            scope: "name email",
            redirectURI: "https://www.example.com",
        });


        const appleLogin = () => {
            appleAuthService.startAuth().then((res: AuthRes) => {
                   const authCode = res.code;
                   // handle apple auth code here
            })
        }})

Facebook

初始化

调用facebookAuthService.init()完成Facebook授权初始化。

facebookAuthService.init({
    appId: "YOUR_FACEBOOK_APP_ID"
})

初始化参数FacebookInitOption如下：

export interface FacebookInitOption {
    appId: string;
    autoLogAppEvents?: boolean;
    xfbml?: boolean;
    version?: string;
}

appId：Facebook应用ID，可从Facebook开发者后台获取。

开启授权

调用facebookAuthService.startAuth()开启授权，返回值为包含授权结果的Promise

facebookAuthService.startAuth().then((res: AuthRes) => {
    // handle result here
})

AuthRes数据结构如下：

export interface AuthRes {
    idToken?: string;
    code?: string;
}

Facebook授权成功后只需拿到idToken值。

示例

import { facebookAuthService } from '@blazes/third-party-auth';

facebookAuthService.init({
    appId: "YOUR_FACEBOOK_APP_ID"
})


const facebookLogin = () => {
    facebookAuthService.startAuth().then(res => {
        const idToken = res.idToken;
            // handle facebook token here
        })
}

Google

初始化

调用gooogleAuthService.init()完成Google授权初始化。

googleAuthService.init({
    clientId: "YOUR_GOOGLE_CLIENT_ID"
})

初始化参数GoogleInitOption如下：

export interface GoogleInitOption {
  clientId: string;
  scope?: string;
}

开启授权

googleAuthService.startAuth().then(res => {
    const code = res.code;
    // handle google code here
})

示例

googleAuthService.init({
    clientId: "YOUR_GOOGLE_CLIENT_ID"
})

const googleLogin = () => {
    googleAuthService.startAuth().then(res => {
        const code = res.code;
        // handle google code here
    })
}

Twitter

添加Polyfill Plugin

于vue.config.js中添加Polyfill Plugin

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");

module.exports = defineConfig({
  ...
  configureWebpack: {
    plugins: [new NodePolyfillPlugin()],
  },
  ...
});

网络请求代理

Twitter API因为跨域无法直接请求，需要为网络请求设置代理。

third-party-auth组件库内所有的Twitter API请求都发送至/twitterApis，需要在项目中将所有/twitterApis的请求转发至https://api.twitter.com

测试环境代理的配置如下：

 devServer: {
     ...
      "/twitterApis": {
        target: "https://api.twitter.com",
        changeOrigin: true,
        pathRewrite: {
          "^/twitterApis": "/",
        },
      },
     ...
    },

设置回调页面路由

在路由中新增回调页面

import { TwitterCallback } from "@blazes/third-party-auth";
const routes = 
    [
     {
        path: "/callback",
        name: "twitterCallback",
        component: TwitterCallback,
     },
     ...
    ]

初始化

调用twitterAuthService.init完成Twitter授权初始化。

twitterAuthService.init({
    consumerKey: "YOUR_CONSUMER_KEY",
    consumerSecret: "YOUR_CONSUMER_SECRET",
    callbackUrl: "CALLBACK_URL",
})

初始化参数FacebookInitOption如下：

export interface TwitterInitOption {
    consumerKey: string;
    consumerSecret: string;
    callbackUrl: string;
    windowOption?: string;
}

consumerKey：从后台获取

consumerSecr：从后台获取

callbackUrl：Twitter授权完毕后的回调地址。callbackUrl指向上一步所设置的回调页面地址。

windowOption：Twitter授权弹窗参数，可以自定义弹窗宽高。

开启授权

调用twitterAuthService.startAuth()开启授权，返回值为包含授权结果的Promise

const twitterLogin = () => {
    twitterAuthService.startAuth().then((res: AuthRes) => {
        const oauthToken = res.idToken;
        const oauthTokenSecret = res.extra?.oauthTokenSecret;
        // handle twitter result here
    })
}

AuthRes数据结构如下：

export interface AuthRes {
    idToken?: string;
    code?: string;
    extra?: {
        oauthTokenSecret?: string;
    };
}

示例

twitterAuthService.init({
    consumerKey: "YOUR_CONSUMER_KEY",
    consumerSecret: "YOUR_CONSUMER_SECRET",
    callbackUrl: "CALLBACK_URL",
})   

const twitterLogin = () => {
    twitterAuthService.startAuth().then((res: AuthRes) => {
        const oauthToken = res.idToken;
        const oauthTokenSecret = res.extra?.oauthTokenSecret;
        // handle twitter result here
    })
  } 
}