【web页面接入Apple/google/facebook三方登录】

web页面接入Apple/谷歌/脸书三方登录

文章目录

• web页面接入Apple/谷歌/脸书三方登录
• 前言
• 一、apple登录
• • 使用步骤
  • • 1.入口文件index.html引入js文件
    • 2.vue页面初始化支付按钮,并且点击按钮登录
• 二、google登录
• • 使用步骤
  • • 1.入口文件index.html引入js文件
    • 2.vue页面初始化支付按钮,并且点击按钮登录
• 三、facebook登录
• • 使用步骤
  • • 1.入口文件index.html引入js文件
    • 2.vue页面初始化支付按钮,并且点击按钮登录
• 页面效果
• 注意事项
• • 1. 如果遇到登录结果无法监听的情况,需要根据报错配置页面的响应头(找运维老师).
  • 2.google按钮的大小需要用css修改下,让谷歌登录的按钮和设计图的大小一样.点击设计图的按钮时,能正常触发登录.不知道为什么我在js中根据谷歌提供的参数无法修改按钮的样式,所以用了这种方式.

前言

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); }},// 调用登录接口-IOS overseaIosLoginFun(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,popup callback: (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-buttonid=\"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\") }, // 调用登录接口-facebook overseaFacebookLoginFun(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; } }