一、准备工作

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实现代码<divid="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"><imgsrc="@/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_idclient_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"><imgsrc="@/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;//小窗口的登录信息，包含tokenif(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");}
};

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

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