这里是配置控制台的面板
console.cloud.google.com/apis/dashbo…
先申请凭证ID
配置登录核心函数
配置入口页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Merchant</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
<script async src="https://accounts.google.com/gsi/client" defer></script>
</body>
</html>
<div id="buttonDiv" ></div>
function onInit() {
window.google?.accounts.id.initialize({
client_id:import.meta.env.VITE_BASE_ClIENT_ID,
callback: handleCredentialResponse,
});
let systemlocale = localStorage.tarspay_merchant_lang ? localStorage.tarspay_merchant_lang : "en"
let locale = {
en: "en-US",
tw:"zh-TW",
cn:"zh-CN"
}
window.google?.accounts.id.renderButton(
document.getElementById("buttonDiv"),
{ size: "large", logo_alignment: "center", locale: locale[systemlocale] } // customization attributes
);
window.google?.accounts.id.prompt();
}
字段说明
developers.google.com/identity/gs…
前端授权后获取凭证（老id_token，新credential， JWT）
前端API： developers.google.com/identity/gs…
测试解JWT
function handleCredentialResponse(response: Object) {
const responsePayload = parseJwt(response?.credential);
window.$message?.loading("google login ....")
console.log(responsePayload, "responsePayload");
googleLogin({
idToken: response?.credential,
name: responsePayload?.name
}).then(res => {
localStorage.setItem("tarspay_bussiness_token", res?.iToken);
window.location.replace(window.location.origin + window.location.pathname + '#/dashboard')
}).catch(err => console.log(err)).finally(()=> {
window.$message?.destroyAll()
})
}
function parseJwt(token: string) {
var base64Url = token.split(".")[1];
var base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
var jsonPayload = decodeURIComponent(
atob(base64)
.split("")
.map(function (c) {
return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
})
.join("")
);
return JSON.parse(jsonPayload);
}
其他
[GSI_LOGGER]: The given origin is not allowed for the given client ID.
Key Point: Add both http://localhost and http://localhost:<port_number> to the Authorized JavaScript origins box for local tests or development.
我设置了还是报错, 后来才发现是因为index.html加入了
<meta name="referrer" content="no-referrer" />
一种引用策略，可以用来防止图片或视频被盗。
它的原理是：http 协议中，如果从一个网页跳到另一个网页，http 头字段里面会带个 Referrer。图片服务器通过检测 Referrer 是否来自规定域名，来进行防盗链。如果没有设置referrer，那就可以直接绕过防盗链机制，直接使用或盗取。
