Google OAuth2 出现问题（应用没有后端，因此只有客户端）答案

【问题标题】：Having a trouble with Google OAuth2 (app has no backend, so client side only)Google OAuth2 出现问题（应用没有后端，因此只有客户端）
【发布时间】：2022-07-20 14:03:41
【问题描述】：

我正在尝试使用 OAuth 实现仅客户端登录。收到以下错误：

details: "You have created a new client application that uses libraries for user authentication or authorization that will soon be deprecated. New clients must use the new libraries instead; existing clients must also migrate before these libraries are deprecated. See the [Migration Guide](https://developers.google.com/identity/gsi/web/guides/gis-migration) for more information."
error: "idpiframe_initialization_failed"

之后，每当我尝试登录时，都会收到以下错误：

error: "popup_closed_by_user"
[[Prototype]]: Object

现在我正在处理 localhost:3000，所以我在 OAuth 2.0 客户端 ID 中添加了 http://localhost:3000 作为授权的 JS 来源，还尝试将发布状态从测试更改为生产。用户类型设置为外部。

【问题讨论】：

我已经尝试了这里提供的所有选项：stackoverflow.com/questions/52529360/…。没有任何帮助。还能做什么？
观看以下 YouTube 视频，以便在您的 react 应用中实施新的 Google 身份； youtube.com/watch?v=roxC8SMs7HU

标签： javascript google-oauth

【解决方案1】：

我有同样的错误，但在 React 应用程序中。有解决办法

import React, { useEffect } from 'react';
import { GoogleLogin, GoogleLogout } from 'react-google-login';
import env from 'react-dotenv';
import { gapi } from 'gapi- script';

function AuthPage() {  
  useEffect(() => {
    function start() {
      gapi.client.init({
        clientId: env.REACT_PUBLIC_GOOGLE_CLIENT_ID,
        scope: 'email',
      });
    }

    gapi.load('client:auth2', start);
  }, []);


  // **you can access the token like this**
  // const accessToken = gapi.auth.getToken().access_token;
  // console.log(accessToken);

  const onSuccess = response => {
    console.log('SUCCESS', response);
  };
  const onFailure = response => {
    console.log('FAILED', response);
  };
  const onLogoutSuccess = () => {
    console.log('SUCESS LOG OUT');
  };

  return (
    <div>
      <GoogleLogin
        clientId={env.REACT_PUBLIC_GOOGLE_CLIENT_ID}
        onSuccess={onSuccess}
        onFailure={onFailure}
      />
      <GoogleLogout
        clientId={env.REACT_PUBLIC_GOOGLE_CLIENT_ID}
        onLogoutSuccess={onLogoutSuccess}
      />
    </div>
  );
}

export default AuthPage;

【讨论】：

这很有帮助。我们是否需要在我们使用 google auth 的每个页面（登录、注册等）上添加此初始化语句？因为只将它添加到一页就可以了？
@mukund 如果您只有一个具有此逻辑的“GoogleAuth”组件，我认为您不需要复制此代码，因此您可以在任何地方使用它
您的客户 ID 放在哪里？
@Caeta inside useEffect in gapi 客户端初始化，REACT_PUBLIC_GOOGLE_CLIENT_ID 变量
@Caeta 你也可以使用 process.env.YOUR_VAR，之前安装 dotenv。它对我不起作用，所以我使用了 react-env lib。现在我再次使用 dotenv，不幸的是，我不记得我是如何解决这个问题的，抱歉 :c

【解决方案2】：

默认情况下，现在阻止新创建的客户端 ID 使用旧平台库，现有客户端 ID 不受影响。在 2022 年 7 月 29 日之前创建的新客户端 ID 可以设置 plugin_name 以启用 Google 平台库。

所以，就我而言，解决方案是：

window.gapi.load('client:auth2', () => {
            window.gapi.client.init({
                clientId: '******.apps.googleusercontent.com',
                plugin_name: "chat"
            })

【讨论】：

嗨@MovieZ 我在angularx-social-login package 中使用角度，你是怎么做到的？
@HaimTabak 我对前端开发很陌生，所以这将是一个大胆的猜测。但我会尝试在初始化时指定一个新的自定义字段 plugin_name，如您在“初始化时指定自定义范围、字段等”部分提供的链接所示。

【解决方案3】：

对于 Angular 开发人员，一个包含如何使用新 google 登录示例的存储库：https://github.com/ShemiNechmad/GoogleSignInAngular

检查 readme.md 文件以获取说明。

【讨论】：