google账号登录第三方平台实现

一、准备工作

1、开通google账号

进入开发者后台：https://console.cloud.google.com/welcome

image.png

2、进入凭据-API和服务中

image.png

image.png

image.png

3、增加API密钥

密钥主要使用于OAuth2.0 JDK方式

image.png

二、google登录的实现方式

1、前端实现google对接登录，使用Google网页版登录，“一键登录”

技术文档链接：https://developers.google.com/identity/gsi/web/guides/overview?hl=zh-cn
首先，加载客户端库

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

在登录组件内增加相关的html代码，可以自己写，也可以使用生成集成代码
https://developers.google.com/identity/gsi/web/tools/configurator?hl=zh-cn

image.png

//此处为vue实现代码
    <div
      id="g_id_onload"
      data-client_id="项目的appid"
      data-context="signin"
      data-auto_select="true"
      data-itp_support="true"
      data-auto_prompt="false"
      allow_parent_origin="http://localhost"
    >
      <div class="g-sign-btn" @click="handleClick">
        <img
          src="@/static/images/home/google.svg"
          alt=""
          class="amall-imgChild"
        />
      </div>
    </div>

mounted() {
    this.$$.getScript("https://accounts.google.com/gsi/client", () => {
      this.init(this.handleCredentialResponse);
    });
},
beforeDestroy() {
    window.removeEventListener("load", this.gload());
},
methods: {
    handleClick() {  
        this.init(this.handleCredentialResponse);
    },
    init(fn) {
      window.addEventListener("load", this.gload(fn));
    },
    async gload(fn) {
      console.log(this);
      if (window.google && window.google.accounts) {
        window.google.accounts.id.initialize({
          // 主要就是填写client_id
          client_id: "项目的AppId",
          callback: fn,
        });
        const dom = document.getElementById("g_id_onload");
        window.google.accounts.id.renderButton(dom, {
            type: "icon",
            shape: "square",
            theme: "outline",
            text: "signin_with",
            size: "medium"
        });
      } else {
        setTimeout(() => {
          this.$$.getScript("https://accounts.google.com/gsi/client", () => {
            this.gload();
          });
        }, 500);
      }
    },
    decodeJwtResponse(token) { //加密
      const strings = token.split(".");
      return JSON.parse(
        decodeURIComponent(
          escape(window.atob(strings[1].replace(/-/g, "+").replace(/_/g, "/")))
        )
      );
    },
    async handleCredentialResponse(response) {
      if (response) {
        console.log(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);
      }
      return true;
    },
  },

2、使用OAuth2.0实现

技术文档链接https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow?hl=zh-cn

image.png

3、通过后端实现

实现流程：

image.png

实现代码：

//模板
<div class="g-sign-btn absolute" @click="handleClick">
        <img
        src="@/static/images/home/google.svg"
        alt=""
        class="amall-imgChild" />
</div>
//方法
handleClick() {
      this.$store.dispatch("user/openIframe", 'google');
}
//store登录方法
const actions = {
  openIframe({state, commit}, key) {
        //具体的登录接口，用于返回第三方登录的验证页面url
        $api(`oauth.${key}`).then((res) => {
            this.$bus.iframe && this.$bus.iframe.close();
            commit("SET_IFRAME", res);
        });
  },
}

const mutations = {
      SET_IFRAME(state, iframeUrl){
        let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,width=800,height=500,left=10%,top=20%`;
        //打开小窗口
        this.$bus.iframe = open(iframeUrl, '_blank', params);
        window.addEventListener("message", (event) => {
            const res = event.data;
            //小窗口的登录信息，包含token
            if(res.code == '000000'){
                //拿到相应的登录token去登录，如果失败给出提示
                this.dispatch("user/getUserInfo", res.token).then(() => {
                    this.$router.replace("/");
                });
            } else {
                this.$message.closeAll();
                this.$message.error(res.message || "login fail~");
            }
        });
        console.log(this.$bus.iframe, "iframe");
    }
};

相对前两种方式来说，前两种对于外网的要求很高，没有连接外网几乎拉不起来登录的弹框，使用后端访问，就算没有连接外网也可以拉起弹框，只是验证的页面打不开而已。

算是记录一下实现的方式和流程，有失误的地方，大家可以提意见~~。