本文基于JS本地接入,通过三方登录授权获取openid和token，通过服务端接口进行账号体系注册
1.Google登录
网上大部分都是使用Google的的按钮样式，自定义按钮样式有限。所以我这里使用js API进行授权登录
后台配置：
Google后台是支持localhost进行测试的，但是需要再后台添加授权来源;找到后台的已获授权的JavaScript来源里填写,如何网页的端口不是80开头需要填写具体的端口号;然后等待一段时间就可以测试了
<script src="https://accounts.google.com/gsi/client?hl=en_US" async defer></script>
<button onclick="signIn()">Sigin in with Google</button>
const client = google.accounts.oauth2.initCodeClient({
client_id: '客户端ID',
ux_mode: 'popup',
scope: 'https://www.googleapis.com/auth/calendar.readonly',
callback: (response) => {
console.log('google auth:', res);
}
})
function signIn(){
//请求code，服务端通过code拿到想要的用户信息
client.requestCode();
}
2.Facebook登录
后台配置
在Facebook后台创建web应用，进入web设置页面.
设置，打开启动网页登录和使用JavaScript SDK登录
填写JavaScript SDK允许使用的网域,可以填写localhost但必须是https,保存之后就可以facebook登陆了
引入facebookSDK
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/zh_CN/sdk.js#xfbml=1&version=v20.0&appId=facebookclientID&autoLogAppEvents=1"></script>
//使用javascript API进行调用。如果要切换用户请在facebook网站进行切换
window.FB.login((response) => {
if (response.authResponse) {
const thridLoginInfo = { openid: response.authResponse.userID, token: response.authResponse.accessToken, login_pfkey: 'facebook' }
} else {
console.log('User cancelled login or did not fully authorize.');
}
}, { scope: 'email,public_profile', return_scopes: true });
3.Apple登录
苹果登录首先要去苹果后台注册一个ClientId，然后才可以登录
1.在Apple官网进入证书,点击Identifiers加号创建一个标识
2.选择Services IDs，填写一个ID，保存
3.保存之后返回ServicesIDs列表点击刚才创建的ServicesID，勾选Sign In with Apple并配置重定向地址，等配置
4.之后就可以进行代码编写了
苹果登录按钮样式自定义范围不是很大，具体可以参考文档
<div id="appleid-signin"
class="signin-button"
data-mode="left-align"
data-type="sign in"
data-color="black"
data-border="false"
data-border-radius="15"
data-width="250"
data-height="40"
data-logo-size="medium"
data-logo-position="5">
</div>
API调用
AppleID.auth.init({
clientId : '[CLIENT_ID]', //苹果后台注册的客户端ID
scope : 'email', //访问权限
redirectURI : '[REDIRECT_URI]', //登录成后的重定向地址
state : '[STATE]', //透传字段
usePopup : true //Popup方式打开
});
//监听登陆回调
document.addEventListener("AppleIDSignInOnSuccess", function(data){
//解析token的用户信息，也可把token给服务端让服务去解析
function getAppleDataFromToken(token) {
var base64Url = token.split(".")[1];
var base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
var jsonPayload = decodeURIComponent(atob(base64).split("").map(function (c) {
return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2)
}).join(""));
return JSON.parse(jsonPayload)
}
const appleUserData = getAppleDataFromToken(data.detail.authorization.id_token);
//用户ID: appleUserData.sub,
//用户token: data.detail.authorization.id_token, login_pfkey: 'appstore' }
};
document.addEventListener("AppleIDSignInOnFailure", this.appleSignInOnFailure)
