@blazes/third-party-auth
v1.0.12-test1
Published
于package.json中新增依赖
Downloads
13
Keywords
Readme
第三方授权
于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
})
}})
初始化
调用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
})
}
初始化
调用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
})
}
添加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
})
}
}