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;}}