问题标签 [react-google-login]

我在我的 React 应用程序中使用https://github.com/anthonyjgrove/react-google-login进行身份验证。一切正常，除非我关闭所有选项卡并返回我的网站（在几秒钟内，甚至没有那么长），我必须再次登录......我怎样才能将登录保持一段时间？

这是我当前的设置：

我正在为我的 React 应用程序使用谷歌登录，我想使用 useContext 挂钩将来自谷歌登录的响应（即用户数据）传递给其他反应组件，但我没有在那里获取用户数据。

这是我使用 createContext 创建上下文的 Home.js 文件。在这里，我将来自 google auth 的响应存储在名为 user 的状态中，并将该用户作为 UserContext.Provider 中的值传递。

主页.js

这是我试图访问 UserContext 详细信息的组件。 画布.js

我在这里得到空值而不是用户数据。

我已经为我的 React 项目安装了react-google-login用于 Google 注册。

情况1

用户首次尝试使用 Google 注册并允许访问 DOB。一切正常。

案例 2 用户首次尝试注册 Google 并拒绝访问 DOB。在他第二次尝试登录时，Google 升级出现并再次请求 DOB 许可。

理想情况下应该发生的情况是，如果用户在某个时候拒绝 DOB 的权限，那么之后任何时候都不应该再次询问。

我如何使用 React 实现这一目标？

我从“react-google-login”获得了用户的 google 登录信息

我想使用 react-redux 存储这些信息。

登录成功时调用“responseGoogle”函数。

在此函数中，使用 (react-google-login) 的响应创建结构

并将这个结构保持在组件的状态中。

并调用模块的函数'onChangeUser'来改变Store的状态。

但是当调用“responseGoogle”时，检测到错误。

错误

原因是容器中的道具未定义..在组件中

这是组件

这是容器

这是模块

我使用https://www.npmjs.com/package/react-google-login在我的应用程序中设置了身份验证。当我重新加载页面时，我无法弄清楚为什么会话/cookie 信息会在我的应用程序中消失。即已登录的用户重新加载页面将被注销:(

这是我的应用程序登录组件中的代码：

当我尝试在一个简单的演示应用程序中单独测试功能时，我可以确认 react-google-login 保留了会话信息。

我花了很多时间试图弄清楚为什么会发生这种情况，但还没有运气。如果有人可以帮助我解决任何故障排除/调试提示或建议我可以采取的替代想法来实现身份验证功能并在刷新时保留会话，我将不胜感激。

编辑：

1. 在简单的演示应用程序（https://github.com/Sivanesh-S/react-google-authentication）中，我同时打开了应用程序选项卡和网络选项卡，然后当我在登录后尝试刷新时，我可以看到网络请求到accounts.google.com。在这个网络请求之后，我可以在应用程序选项卡中看到本地存储、cookie 和会话信息。

2. 在我的应用程序中，当我在登录后尝试刷新时，我看不到对 accounts.google.com 的网络请求。本地存储、cookie 和会话信息在应用程序选项卡中被清除

我在库的 React"react-google-login": "^5.2.2"和 Nest.js: 中使用"passport-google-oauth20": "^2.0.0"。在 Nest.js 中，谷歌身份验证工作正常，但我在前端站点上遇到问题。当我单击“使用 Google 登录”按钮并登录到 Google 时。Google 身份验证返回错误信息：

在 'https://accounts.google.com/o/oauth2/v2/auth?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A7000%2Fauth%2Flogin-google%2Fredirect&scope=email%20profile&client_id=XXXXX 访问 XMLHttpRequest来自源“http://localhost:3001”的 .apps.googleusercontent.com'（重定向自“http://localhost:7000/auth/login-google”）已被 CORS 策略阻止：无“访问控制-请求的资源上存在 Allow-Origin' 标头。

我正在尝试通过向 React ( docs ) 添加代理来解决此问题：

文件src/setupProxy.js：

但我仍然有同样的 CORS 错误。

我该如何解决？

编辑：

我找到了这个答案。我将onClick“使用 Google 登录”按钮上的操作更改为：

现在我没有收到 CORS 错误。Nest.js 向我返回有关用户的数据（如我所愿，它工作正常），但我不知道当用户登录时如何在 React 中收听。因为现在当用户点击“使用 Google 登录”时（当用户正确登录）然后浏览器重定向到该地址：

http://localhost:7000/auth/login-google/redirect?code=4%2F0AY0e-g7UsKrAyhmnc3xQBT3oE9ck9bCfuuO7lX9RJxh9JuRrZfdFPCaVZsRppapRfanGlw&scope=email+profile+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile+openid+https% 3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email&authuser=0&prompt=none

我正在尝试使用history.location但不工作，因为它不是 React 的地址。

我正在尝试将谷歌登录与 Redux 集成到我的应用程序（MERN）电子商务网站。当我使用电子邮件和密码登录时，一切正常，当我使用谷歌登录时，它也可以正常工作，但是有些部分我无法再访问，我得到 res.status 401 0r 500 取决于。如果我记录我的 userInfo 一切都是一样的......我很绝望。我的问题是这看起来像是谷歌问题还是编码问题。如果是代码问题，可以在需要时共享代码片段

在以下片段中，我尝试使用 npm react-google-login 将 google oauth 实现到我的 web 应用程序中。当我尝试登录时，弹出窗口出现，我选择了我的一个帐户，然后出现一个加载圆圈并且弹出窗口关闭。（不确定这是否是崩溃）。但是，我的 googleSuccess 函数似乎没有被调用，因为我记录的所有内容都没有出现在控制台中。过早关闭弹出窗口会在 onFailure 中记录 googleError。有谁知道为什么我的 onSuccess 回调可能不会触发？

我正在使用谷歌身份验证制作一个反应应用程序，我收到此错误：'通过指定其 SameSite 属性指示是否在跨站点请求中发送 cookie'

我的代码：

我正在使用 React 构建一个简单的站点，并且我正在测试来自https://www.npmjs.com/package/react-google-login的 GoogleLogin 组件。我在 http://localhost:3000 上运行 react。我设置了允许该主机的 cookie 策略。但是，每次启动反应服务器时，我都会收到相同的错误：

“cookiePolicy 无效 - gapi.auth2.ExternallyVisibleError：cookieP 无效…Naq8ri2P66tzK7chsKcRiE1CsLyQ/cb=gapi.loaded_0:1:6”

我还在 Google OAuth 凭据中添加了 http://localhost:3000 作为授权的 JavaScript 来源。在我的 index.js 文件中，我有：

我尝试将 cookiePolicy 替换为“http://localhost:3000”，但随后它开始抱怨正在发送跨站点 cookie：

"通过指定其 SameSite 属性指示是否在跨站点请求中发送 cookie"