前端学习——第三方登录（Google登录、Facebook登录）

---

前言

本文介绍了作者本人学习前端JavaScript对接第三方Google登录、Facebook登录的基础内容。

---

一、前端对接第三方登录有什么用？

个人理解前端对接第三方登录，就是在原有的网站注册的基础上关联一个大家都认可的第三方平台账号，因为每个网站平台都有自己的账号，让用户记住所有的账号这是不切实际的，解决这个问题目前：1.使用手机验证码。2.使用第三方平台来跳转登录。（这个平台应该足够多的人使用并且足够安全私密）

二、使用环境

项目使用 vue cli 搭建，以下是 package.json文件展示的一些框架的版本号。

"dependencies": {
    "vue": "^2.5.2",
    "vue-facebook-signin-button": "^1.0.1",
  },

三、FB第三方登录

引入且封装成组件

代码如下（示例）：

安装 vue-facebook-signin-button 组件

npm install vue-facebook-signin-button

main.js

import FBSignInButton from 'vue-facebook-signin-button';
Vue.use(FBSignInButton);

index.html；

• en_US : 可以换成zh_CN
• version : 直接用最新的v14.0
• appId : 去FB平台申请

<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v14.0&appId=1*************5&autoLogAppEvents=1"></script>

自己封装成一个组件fbSignin.vue（当然你也可以不封装，直接使用你引入的全局组件FBSignInButton）

<template>
  <div>
    <fb-signin-button :params="fbSignInParams" @success="onSignInSuccess" @error="onSignInError"></fb-signin-button>
  </div>
</template>

export default {
    name: 'fbSignin',
    data() {
      return {
        fbSignInParams: {
          scope: 'email,user_likes',
          return_scopes: true
        }
      }
    },
    methods: {
      onSignInSuccess(response) {
        switch (response.status) {
          case "connected":
            console.log('返回第三方FB的信息：授权成功，登录成功！');
            break;
          case "not_authorized":
            console.log('返回第三方FB的信息：授权成功但是未关联该应用（用户第一次授权）');
            break;
          case "unknown":
            console.log('返回第三方FB的信息：取消授权');
            break;
        }
      },
      onSignInError(error) {
        console.log('返回第三方FB的error信息', error);
      },
    },
  }

四、G第三方登录

引入且封装成组件

index.html

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

自己封装成一个组件gSignin.vue（当然你同样也可以不封装）

<template>
  <div>
    <div class="g_id_signin2" id="g_id_signin2"></div>
  </div>
</template>

window.google.accounts.id.initialize(）

• callback ：回调函数，需要定义，不能使用匿名箭头函数（需要使用箭头函数，不然访问不了外部的this.）
• locale ：语言
• client_id ：去G平台申请

    mounted() {
      this.init(this.handleCredentialResponse);
    },
    beforeDestroy() {
      window.removeEventListener("load", this.gload());
    },
    methods: {
      init(fn) {
        window.addEventListener('load', this.gload(fn));
      },
      gload(fn) {
        window.google.accounts.id.initialize({
          // 主要就是填写client_id
          client_id: '******.apps.googleusercontent.com',
          callback: fn,
          locale: 'en-US'
        });
        window.google.accounts.id.renderButton(
          document.getElementById("g_id_signin2"), {
            theme: "filled_blue",
            size: 'large',
            width: '336',
            type: 'standard',
            text: 'signin_with'
          }
        );
      },
      decodeJwtResponse(token) {
        const strings = token.split("."); 
        return JSON.parse(decodeURIComponent(escape(window.atob(strings[1].replace(/-/g, "+").replace(/_/g,"/")))));
      },
      async handleCredentialResponse(response) {
        if (response) {
          const responsePayload = this.decodeJwtResponse(response.credential);
        	console.log('responsePayload', responsePayload);
        	console.log("ID: " + responsePayload.sub);
        	console.log('Full Name: ' + responsePayload.name);
        	console.log('Given Name: ' + responsePayload.given_name);
        	console.log('Family Name: ' + responsePayload.family_name);
        	console.log("Image URL: " + responsePayload.picture);
        	console.log("Email: " + responsePayload.email);
        	}
      }
  }

五、页面上使用

像使用自定义的vue组件一样就行了。

template

<fb-signin></fb-signin>
<g-signin></g-signin>

javascript

import fbSignin from './components/fbSignin.vue'
import gSignin from './components/gSignin.vue'
  export default {
    name: 'login',
    components: {
      fbSignin,
      gSignin
    }
  }

---

总结

以上就是个人理解的前端有关于Google、Facebook的第三方登录的内容，本文仅仅简单介绍了作者本人的一些理解和如何使用，本人亲测可用，当然最终的测试环境需要网络状态良好。¹

欢迎留言评论技术问题，谢谢你的阅读。

---

1. 绿色上网，科学上网，网络不是法外之地。 ↩︎