一勒庄、準備工作
1、開通google賬號
進入開發(fā)者后臺：https://console.cloud.google.com/welcome
image.png
2橡卤、進入憑據(jù)-API和服務中
image.png
image.png
image.png
3、增加API密鑰
密鑰主要使用于OAuth2.0 JDK方式
image.png
二、google登錄的實現(xiàn)方式
1麸澜、前端實現(xiàn)google對接登錄摘盆，使用Google網(wǎng)頁版登錄翼雀，“一鍵登錄”
技術文檔鏈接：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實現(xiàn)代碼
<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實現(xiàn)
技術文檔鏈接https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow?hl=zh-cn
image.png
3类垦、通過后端實現(xiàn)
實現(xiàn)流程：
image.png
實現(xiàn)代碼：
//模板
<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");
}
};
相對前兩種方式來說米苹，前兩種對于外網(wǎng)的要求很高，沒有連接外網(wǎng)幾乎拉不起來登錄的彈框砰琢，使用后端訪問蘸嘶，就算沒有連接外網(wǎng)也可以拉起彈框，只是驗證的頁面打不開而已氯析。
算是記錄一下實現(xiàn)的方式和流程亏较，有失誤的地方，大家可以提意見~~掩缓。
