on不会在使用uxMode ='redirect'时触发-> react-google-login？

Question

我正在使用react-google-login组件使用户通过google帐户登录，我对此有问题。如果我使用uxMode ='popup'

onSucess方法正在触发，但如果我使用uxMode ='redirect'，则不会触发相同的方法`

    <GoogleLogin
clientId="*****"
scope= "profile"
buttonText="Login with Google"
uxMode='redirect'
redirectUri="http://localhost:3000"
onSuccess={responseGoogle}
onFailure={responseGoogle}/>`

Answer 1

您指定的redirectUri应该是您为OAuth客户端授权的URL。意味着在Google Developer Console中创建您的应用ID时，您必须将该URL列入白名单

Answer 2

然后在此处删除重定向，并在保存详细信息后从代码中重定向。供您参考，请在下面粘贴我的代码。

<GoogleLogin
                  clientId="XXXXXXXXXXXXXXX"
                  buttonText="Login with Google"
                  uxMode="redirect"
                  redirectUri="http://localhost:3000"
                  onSuccess={responseGoogle}
                  onFailure={responseGoogle}
                />

在http://localhost:3000/results页面上调用此代码，并将其重定向到http://localhsot:3000/#id_token=XXXX，并在我的网址上附加了id_token。

Answer 3

这是我使用重定向模式的方式。永远不会调用Onsuccess函数。而是使用查询字符串并解析＃id_token ..并将其发送到服务器以进行进一步的验证和配置文件数据

Answer 4

您未在末尾添加斜线，即/，>

1）redirectUri，即redirectUri =“ http：// localhost：3000 /”

2]另外，请确保在https://console.developers.google.com/下的授权重定向URI中添加尾部斜杠，即/。也应该是http://localhost:3000/

<GoogleLogin
clientId="*****"
scope= "profile"
buttonText="Login with Google"
uxMode='redirect'
redirectUri="http://localhost:3000/"
onSuccess={responseGoogle}
onFailure={responseGoogle}/>`

不要错过斜杠。