前端接入Facebook/Google/Apple登录

本文基于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开发文档

后台配置

在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登录

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)

前端接入Facebook/Google/Apple登录