web頁面接入Apple/谷歌/臉書三方登錄

---

前言

web頁面除了賬號登錄外,一般還會接入三方登錄,例如apple登錄,google登錄,facebook登錄.接入方式如下.

---

一、apple登錄

apple登錄,就是使用蘋果賬號登錄,ios系統中都是使用apple賬號密碼登錄自己的手機用戶中心

使用步驟

1.入口文件index.html引入js文件

代碼如下（示例）：

<script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>

2.vue頁面初始化支付按鈕,并且點擊按鈕登錄

<div id="appleid-signin" data-color="black" data-border="true" data-type="sign in" @click="iosLogin()"></div>

import {overseaIosLogin,
} from "../api/api";
export default {data() {return {IOSLoginData: {},}},created() {// 監聽apple登錄的結果const that = this;document.addEventListener('AppleIDSignInOnSuccess', (event) => {// alert("ios登錄成功");that.IOSLoginData = event.detail.authorization;that.overseaIosLoginFun(event.detail.authorization);});document.addEventListener('AppleIDSignInOnFailure', (event) => {// Toast.fail("Apple Sign In Error");});},mounted() {// 初始化apple登錄this.initAppleLogin();},methods: {// 初始化 Apple ID 認證initAppleLogin () {if (AppleID?.auth) {const nonce = Math.random().toString(36).substr(2, 10);AppleID.auth.init({clientId: 'xxx', // 后臺生成的redirectURI: 'https://xxx', // 回調地址,必須要后臺添加scope: 'name email',state: `${Math.round(Math.random() * 100000000)}`,nonce: nonce,usePopup: true, // 使用當前頁面彈出小窗的模式});}},iosLogin() {try {AppleID.auth.signIn();} catch ( error ) {console.error('Apple Sign In Error: ', error);}},// 調用登錄接口-IOSoverseaIosLoginFun(val) {const json = {id_token: val.id_token,};overseaIosLogin(json).then(res => {if(res.Code != 0) {return;}localStorage.setItem("token", res.data.account.token);Toast.success(this.$t('message.loginToast1'));});},}
}

二、google登錄

使用你的谷歌賬號登錄

使用步驟

1.入口文件index.html引入js文件

代碼如下（示例）：

<script src="https://accounts.google.com/gsi/client" async defer></script>

2.vue頁面初始化支付按鈕,并且點擊按鈕登錄

<div id="my-google-id"></div>

import {overseaGoogleLogin,
} from "../api/api";
export default {data() {return {}},created() {},mounted() {setTimeout(() => {this.renderButton();}, 3000);},methods: {// 初始化谷歌按鈕,建議每次打開頁面都再次初始化renderButton() {const that = this;const nonce = Math.random().toString(36).substr(2, 10);google.accounts.id.initialize({client_id: 'xxx',ux_mode: 'popup', // redirect,popupcallback: (response) => {that.overseaGoogleLoginFun(response);},auto_prompt: false, // 自動登錄nonce: nonce,})const parent = document.getElementById('my-google-id');google.accounts.id.renderButton(parent, {type: "icon",width: 130,});},// 調用登錄接口- 谷歌overseaGoogleLoginFun(val) {const json = {third_user_token: val.credential,};overseaGoogleLogin(json).then(res => {if(res.Code != 0) {return;}localStorage.setItem("token", res.data.account.token);Toast.success(this.$t('message.loginToast1'));});},}
}

三、facebook登錄

使用你的facebook賬號登錄

使用步驟

1.入口文件index.html引入js文件

代碼如下（示例）：

<script crossorigin="anonymous" src="https://connect.facebook.net/zh_CN/sdk.js#xfbml=1&version=v3.3&appId=xxxxx&autoLogAppEvents=1" async defer></script>

2.vue頁面初始化支付按鈕,并且點擊按鈕登錄

<fb-signin-button
id="my-facebook-id"
:params="fbSignInParams"
@success="onSignInSuccess"
@error="onSignInError">
Sign in with Facebook
</fb-signin-button>

import {overseaFacebookLogin,
} from "../api/api";
export default {data() {return {fbSignInParams: {scope: 'email, public_profile',return_scopes: true},}},created() {},mounted() {},methods: {onSignInSuccess(response) {this.overseaFacebookLoginFun(response);},onSignInError (error) {// alert("faceBook error")},// 調用登錄接口-facebookoverseaFacebookLoginFun(val) {const json = {auth_api_ver: 1,code: val.authResponse.accessToken}overseaFacebookLogin(json).then(res => {if(res.Code != 0) {return;}localStorage.setItem("token", res.data.account.token);Toast.success(this.$t('message.loginToast1'));});},}
}

頁面效果

注意事項

1. 如果遇到登錄結果無法監聽的情況,需要根據報錯配置頁面的響應頭(找運維老師).

我配置的響應頭有:

響應頭如下（示例）：
cross-origin-opener-policy: *

2.google按鈕的大小需要用css修改下,讓谷歌登錄的按鈕和設計圖的大小一樣.點擊設計圖的按鈕時,能正常觸發登錄.不知道為什么我在js中根據谷歌提供的參數無法修改按鈕的樣式,所以用了這種方式.

#my-google-id {width: 100%;height: 100%;position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 1;opacity: 0;>div {>div {>div {width: 130px !important;height: 130px !important;}}}iframe {margin: 0 !important;position: relative !important;transform: scaleX(2) scaleY(2.9); // 這是主要的代碼top: 43px !important;left: 32px !important;z-index: 2;cursor: pointer;}}