使用Google登录时出现idpiframe_initialization_failed及框架初始化失败错误

你遇到的错误是因为使用的gapi.signin2属于Google即将弃用的老版身份验证库，必须迁移到Google Identity Services (GIS) 新库才能正常使用。以下是替换后的完整代码：

<html>
<head>
  <!-- 替换为你的客户端ID -->
  <meta name="google-signin-client_id" content="Myvalue.apps.googleusercontent.com">
</head>
<body>
  <div id="g_id_signin"></div>

  <script>
    // 初始化Google登录配置
    google.accounts.id.initialize({
      client_id: "Myvalue.apps.googleusercontent.com", // 替换为你的客户端ID
      callback: handleCredentialResponse,
      scope: "profile email"
    });

    // 渲染登录按钮，参数匹配旧版配置
    google.accounts.id.renderButton(
      document.getElementById("g_id_signin"),
      {
        width: 240,
        height: 50,
        longtitle: true,
        theme: "dark"
      }
    );

    // 登录成功回调函数
    function handleCredentialResponse(response) {
      // 解码JWT凭证获取用户信息（包含name、email等字段）
      const payload = JSON.parse(atob(response.credential.split('.')[1]));
      console.log('Logged in as: ' + payload.name);
      console.log('User email: ' + payload.email);
    }
  </script>

  <!-- 引入新的GIS官方脚本 -->
  <script src="https://accounts.google.com/gsi/client" async defer></script>
</body>
</html>

核心变更说明： #

• 脚本源替换：从旧的platform.js切换到Google官方推荐的gsi/client脚本
• 初始化逻辑更新：用google.accounts.id.initialize统一配置客户端ID与回调，替代旧版分散的参数设置
• 用户信息获取：通过解码登录返回的JWT凭证（response.credential）直接获取用户数据，无需调用旧版getBasicProfile()方法
• 按钮渲染兼容：renderButton的参数格式与旧版基本一致，无需大幅调整样式配置

内容的提问来源于stack exchange，提问作者f180111 Yousaf Zahid