googleplay的h5/web端支付

复制代码
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://accounts.google.com/gsi/client" async defer></script>
    <title>Document</title>
</head>
<body>
      <div id="g_id_onload"
           data-client_id="xxxxxx"
           data-context="signin"
           data-ux_mode="popup"
           data-callback="callback"
           data-auto_prompt="false">
      </div>
      
      <div class="g_id_signin"
           data-type="standard"
           data-shape="rectangular"
           data-theme="outline"
           data-text="signin_with"
           data-size="large"
           data-logo_alignment="left">
      </div>
</body>
<script>
    function callback(e){
        console.log("123213213213",e.credential)
        decodeJwt(e.credential)
    }
    function decodeJwt(jwt) {
      // 将JWT拆分为头部、有效载荷和签名
      const [headerB64, payloadB64] = jwt.split('.');
      // 对有效载荷进行Base64解码
      const payload = JSON.parse(atob(payloadB64));
      console.log(38,payload);
      return payload;
    }
</script>
</html>
复制代码

 

复制代码
// 解码JWT并解析用户信息
function decodeJwt(jwt) {
  // 将JWT拆分为头部、有效载荷和签名
  const [headerB64, payloadB64] = jwt.split('.');
  // 对有效载荷进行Base64解码
  const payload = JSON.parse(atob(payloadB64));
  return payload;
}

// 使用GSI API获取身份凭证
google.accounts.id.initialize({
  client_id: 'YOUR_CLIENT_ID',
  callback: handleCredentialResponse,
});

function handleCredentialResponse(response) {
  const credential = response.credential;
  const idToken = credential.id_token;
  // 解码JWT并解析用户信息
  const userInfo = decodeJwt(idToken);
  console.log(userInfo);
}
复制代码

 

 

 

https://developers.google.com/identity/gsi/web/reference/js-reference?hl=zh-cn#credential

posted @   小小强学习网  阅读(315)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 25岁的心里话
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
AI IDE Trae