说明文档:https://developers.google.com/identity/oauth2/web/guides/overview

新授权

image.png

  1. /**
  2. * @description: 配置初始化-加载auth2的库
  3. * @param {*}
  4. * @return {*}
  5. */
  6. function onInitGoogle() {
  7. window.google?.accounts.id.initialize({
  8. client_id: import.meta.env.VITE_BASE_ClIENT_ID,
  9. callback: handleCredentialResponse,
  10. });
  11. window.google?.accounts.id.renderButton(
  12. document.getElementById("googleBtn"),
  13. { size: "large", logo_alignment: "center", shape: "circle", theme: "filled_blue", width:350 } // customization attributes
  14. );
  15. window.google?.accounts.id.prompt();
  16. }

字段说明

image.png
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

  1. clientId: “675793533606-b2ob35j40nt6g0van82v9e8tcfqd7mjf.apps.googleusercontent.com”
  2. credential: “eyJhbGciOiJSUzI1NiIsImtpZCI6IjU4MGFkYjBjMzJhMTc1ZDk1MGExYzE5MDFjMTgyZmMxNzM0MWRkYzQiLCJ0eXAiOiJKV1QifQ.eyJpc3MiOiJodHRwczovL2FjY291bnRzLmdvb2dsZS5jb20iLCJuYmYiOjE2NTUxOTgzODgsImF1ZCI6IjY3NTc5MzUzMzYwNi1iMm9iMzVqNDBudDZnMHZhbjgydjllOHRjZnFkN21qZi5hcHBzLmdvb2dsZXVzZXJjb250ZW50LmNvbSIsInN1YiI6IjEwMjI4NjMzOTgwNTkwNDI3MjU5NyIsImVtYWlsIjoid2Via3Vib3JAZ21haWwuY29tIiwiZW1haWxfdmVyaWZpZWQiOnRydWUsImF6cCI6IjY3NTc5MzUzMzYwNi1iMm9iMzVqNDBudDZnMHZhbjgydjllOHRjZnFkN21qZi5hcHBzLmdvb2dsZXVzZXJjb250ZW50LmNvbSIsIm5hbWUiOiLnjovmganljZoiLCJwaWN0dXJlIjoiaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2lYYmZFMUtqQ0F4SzBCeTZDT1hacEdEOHl6QkstcXI3UlF5YkY4PXM5Ni1jIiwiZ2l2ZW5fbmFtZSI6IuaBqeWNmiIsImZhbWlseV9uYW1lIjoi546LIiwiaWF0IjoxNjU1MTk4Njg4LCJleHAiOjE2NTUyMDIyODgsImp0aSI6ImM0OTk0NDBiMmQ2MTlkYzEzMDdkMDZlMzJmMzg2ZDRmNjNlMWFjM2EifQ.9j9ez4m6tcwMymgQQaw7o3dIrkHp2iPyQmcXBEPuENgG3np3eHV-5RQNKlfFusHmHyf10vZHBSZR1vp71tS4pj1ww3-1WrfivTqjpQ7k3DNLoGi433KMXdni62e0pkrwdgwK8C_ZiOAThh_kq0leEH37HG9Mq2PfEKHus4eemTrzXhQ20K5CVBWPXhfrXOdIzeCh48JCe2LIB3Wtevg3Mp-c6SgBNW-URczEpsfX0NrszFktZtxwA9kZZ7JBz1sgO18OUIiIGP6C7EkRWWX40Va2FXsio_OLCFICJZ8urc3D7ulHRdiGxt4tFkpxC7Ju6yJIy4UZ0V4k0JKSdOLT6g”
  3. select_by: “btn”

image.png

测试解JWT

https://jwt.io/

image.png

其他

[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. image.png

我设置了还是报错
后来才发现是因为index.html加入了

  1. <meta name="referrer" content="no-referrer" />

一种引用策略,可以用来防止图片或视频被盗。它的原理是:http 协议中,如果从一个网页跳到另一个网页,http 头字段里面会带个 Referrer。图片服务器通过检测 Referrer 是否来自规定域名,来进行防盗链。如果没有设置referrer,那就可以直接绕过防盗链机制,直接使用或盗取。