Google OAuth 按钮不起作用

【问题标题】：Google OAuth Button Not FunctioningGoogle OAuth 按钮不起作用
【发布时间】：2022-02-11 23:21:40
【问题描述】：

我是一个相对较新的 JS 用户，我正在尝试将 Google OAuth 集成到我的网络应用程序中，但由于某种原因它没有响应。它出现在应用程序上，但我无法单击它，即使我检查了元素。这是我的应用文件中与 OAuth 相关的代码

class App extends React.Component {
  responseGoogle=(response)=>{
    console.log(response);
    console.log(response.profileObj); 
  }
  render(){
    return(
      <div className="App">
        <GoogleLogin
        clientId="MY CLIENT ID IS HERE AND CORRECT"
        buttonText="Login"
        onSuccess={this.responseGoogle}
        onFailure={this.responseGoogle}
        cookiePolicy={'single-host-origin'}
        />

该按钮在应用程序上显示为灰色，并且在我检查时在控制台中标记为“已禁用”。如果有人可以提供帮助，将不胜感激

【问题讨论】：

标签： javascript reactjs oauth

【解决方案1】：

我在这里遇到了同样的问题。

当我重新创建谷歌凭据时，它已解决。

转到https://console.developers.google.com/apis，然后在 Google Plus API 中访问凭据，并为“Oauth Client Id”创建一个新凭据。在“应用程序类型”中选择“Web 应用程序”。

确保将调用 API 的完整地址放在“授权重定向 URI”中。

最后，使用将生成的新“客户 ID”。

或者，

我通过白名单解决了这个问题

http://localhost

并添加cookiePolicy

<GoogleLogin
clientId={WEB_CLIENT_ID}
buttonText="Login with LF account"
onSuccess={this.responseGoogle}
onFailure={this.responseGoogle}
cookiePolicy={'single_host_origin'}
/>

https://developers.google.com/identity/sign-in/web/reference#googleauththenoninit-onerror

如果这对您有帮助或需要更多信息，请告诉我。

【讨论】：