说明文档:https://developers.google.com/identity/oauth2/web/guides/overview
新授权
/**
* @description: 配置初始化-加载auth2的库
* @param {*}
* @return {*}
*/
function onInitGoogle() {
window.google?.accounts.id.initialize({
client_id: import.meta.env.VITE_BASE_ClIENT_ID,
callback: handleCredentialResponse,
});
window.google?.accounts.id.renderButton(
document.getElementById("googleBtn"),
{ size: "large", logo_alignment: "center", shape: "circle", theme: "filled_blue", width:350 } // customization attributes
);
window.google?.accounts.id.prompt();
}
字段说明
https://developers.google.com/identity/gsi/web/reference/js-reference#credential
前端授权后获取凭证(老id_token,新credential, JWT)
前端API: https://developers.google.com/identity/gsi/web/reference/js-reference
- clientId: “675793533606-b2ob35j40nt6g0van82v9e8tcfqd7mjf.apps.googleusercontent.com”
- credential: “eyJhbGciOiJSUzI1NiIsImtpZCI6IjU4MGFkYjBjMzJhMTc1ZDk1MGExYzE5MDFjMTgyZmMxNzM0MWRkYzQiLCJ0eXAiOiJKV1QifQ.eyJpc3MiOiJodHRwczovL2FjY291bnRzLmdvb2dsZS5jb20iLCJuYmYiOjE2NTUxOTgzODgsImF1ZCI6IjY3NTc5MzUzMzYwNi1iMm9iMzVqNDBudDZnMHZhbjgydjllOHRjZnFkN21qZi5hcHBzLmdvb2dsZXVzZXJjb250ZW50LmNvbSIsInN1YiI6IjEwMjI4NjMzOTgwNTkwNDI3MjU5NyIsImVtYWlsIjoid2Via3Vib3JAZ21haWwuY29tIiwiZW1haWxfdmVyaWZpZWQiOnRydWUsImF6cCI6IjY3NTc5MzUzMzYwNi1iMm9iMzVqNDBudDZnMHZhbjgydjllOHRjZnFkN21qZi5hcHBzLmdvb2dsZXVzZXJjb250ZW50LmNvbSIsIm5hbWUiOiLnjovmganljZoiLCJwaWN0dXJlIjoiaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2lYYmZFMUtqQ0F4SzBCeTZDT1hacEdEOHl6QkstcXI3UlF5YkY4PXM5Ni1jIiwiZ2l2ZW5fbmFtZSI6IuaBqeWNmiIsImZhbWlseV9uYW1lIjoi546LIiwiaWF0IjoxNjU1MTk4Njg4LCJleHAiOjE2NTUyMDIyODgsImp0aSI6ImM0OTk0NDBiMmQ2MTlkYzEzMDdkMDZlMzJmMzg2ZDRmNjNlMWFjM2EifQ.9j9ez4m6tcwMymgQQaw7o3dIrkHp2iPyQmcXBEPuENgG3np3eHV-5RQNKlfFusHmHyf10vZHBSZR1vp71tS4pj1ww3-1WrfivTqjpQ7k3DNLoGi433KMXdni62e0pkrwdgwK8C_ZiOAThh_kq0leEH37HG9Mq2PfEKHus4eemTrzXhQ20K5CVBWPXhfrXOdIzeCh48JCe2LIB3Wtevg3Mp-c6SgBNW-URczEpsfX0NrszFktZtxwA9kZZ7JBz1sgO18OUIiIGP6C7EkRWWX40Va2FXsio_OLCFICJZ8urc3D7ulHRdiGxt4tFkpxC7Ju6yJIy4UZ0V4k0JKSdOLT6g”
- select_by: “btn”
测试解JWT
其他
[GSI_LOGGER]: The given origin is not allowed for the given client ID.
Key Point: Add both http://localhost and http://localhost:
to the Authorized JavaScript origins box for local tests or development.
我设置了还是报错
后来才发现是因为index.html加入了
<meta name="referrer" content="no-referrer" />
一种引用策略,可以用来防止图片或视频被盗。它的原理是:http 协议中,如果从一个网页跳到另一个网页,http 头字段里面会带个 Referrer。图片服务器通过检测 Referrer 是否来自规定域名,来进行防盗链。如果没有设置referrer,那就可以直接绕过防盗链机制,直接使用或盗取。