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

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);
		    }
		},
		// 调用登录接口-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-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")
	    },
	    // 调用登录接口-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;
    }
  }