标签: react-google-login

我正在尝试使用“react-google-login”进行社交登录。

根目录中的.env

NEXT_PUBLIC_GOOGLE_CLIENT_ID=askfjaskf\n

就绪.tsx

import { GoogleLogin } from "react-google-login";\n<GoogleLogin\n    clientId={process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID}\n    render={(props) => (\n      <div onClick={props.onClick}>\n        <div>\xea\xb5\xac\xea\xb8\x80 \xeb\xa1\x9c\xea\xb7\xb8\xec\x9d\xb8</div>\n      </div>\n    )}\n    onSuccess={(res) => {\n      const { profileObj } = res as any;\n      setStep(AuthStep.AGREE);\n    }}\n    onFailure={(res) => {\n      console.log("Google Error", res);\n    }}\n  />\n

在 clientId 中，它说

\n

没有与此调用匹配的重载。\n重载 1 of 2，“(props: GoogleLoginProps | Readonly): GoogleLogin”，出现以下错误。\n键入 'string | 无法将“未定义”分配给“字符串”类型。\n无法将“未定义”类型分配给“字符串”类型。\n重载 2 个，共 2 个“(props: GoogleLoginProps, context: any): GoogleLogin”，出现以下错误。 \n输入“字符串|” undefined' 不能分配给类型 'string'。\n类型 'undefined' 不能分配给类型 'string'.ts(2769)\nindex.d.ts(80, 12): 预期类型来自属性 'clientId'这是在类型“IntrinsicAttributes …

我正在使用 Google 身份服务，并面临一些问题。看一下下面的函数loginUser并得到access_token：

const client = (window as any).google.accounts.oauth2.initTokenClient({
  client_id: process.env.GOOGLE_CLIENT_ID,
  scope: `profile email`,
  callback: '' // defined at request time
});

const loginUser = async () => {
  const tokenResponse = await new Promise<TokenResponse>((resolve, reject) => {
    try {
      // Settle this promise in the response callback for requestAccessToken()
      client.callback = (resp) => {
        if (resp.error !== undefined) {
          reject(resp);
        }
        resolve(resp);
      };
      // requesting access token
      client.requestAccessToken({ prompt: 'consent' });
    } catch (err) { …

我尝试使用react-google-login包实现谷歌登录。我已经将客户端 ID 也放入了正确的 URL http://localhost:3000 和 https://localhost:3000。但我一直收到错误消息“idpiframe_initialization_failed”和如下详细信息的问题： 您创建了一个新的客户端应用程序，该应用程序使用库进行用户身份验证或授权，但很快就会被弃用。新客户必须使用新库；在这些库被弃用之前，现有的客户端也必须迁移。我真的很困惑。请花点时间帮助我解决这一问题。谢谢。

            <header className="App-header">
                <h1>React Google Login App</h1>
                <div>
                    {loginData ? (
                        <div>
                            <h3>You logged in as {loginData.email}</h3>
                            <button onClick={handleLogout}>Logout</button>
                        </div>
                    ) : (
                        <GoogleLogin
                            clientId={"846142574809-apbj2h6v9upultr3qvfskn6kfght9udb.apps.googleusercontent.com"}
                            buttonText="Log in with Google"
                            onSuccess={handleLogin}
                            onFailure={handleFailure}
                            cookiePolicy={'single_host_origin'}
                        ></GoogleLogin>
                    )}
                    <GoogleLogout clientId='846142574809-apbj2h6v9upultr3qvfskn6kfght9udb.apps.googleusercontent.com' buttonText='logout' onLogoutSuccess={handleoutSuccess}></GoogleLogout>

                </div>
            </header>
        </div>```