使用React前端和Rails后端的带有Google Calendar API的客户端OAuth [英] Client side OAuth with google calendar api using React frontend and Rails backend

问题描述

因此，我正在尝试使用google oauth为我的用户获取刷新令牌(实际上不使用google oauth来保存用户).当我使用Google api的客户端OAuth时，一切正常，但是当您进行握手时，它们不提供刷新令牌，只有access_token.我需要一个持久的refresh_token，因为我将向用户google日历发出很多请求.

So I'm trying to do google oauth to get a refresh token for my users (not actually using google oauth to save the user). I had everything working when I used the client side OAuth for google api but they don't provide a refresh token when you do that handshake, only an access_token. I need a persisted refresh_token since I'm going to be making a lot of requests to the users google calendars.

因此，我在我的rails服务器上设置了omniauth，以使流程像这样进行:

So I set up omniauth on my rails server to make the flow go like this:

用户点击向Google进行身份验证(客户端)->

user clicks authenticate with google (client side) -->

弹出屏幕转到后端服务器(localhost:3001/users/auth/google_oauth2)->

popup screen goes to backend server (localhost:3001/users/auth/google_oauth2) -->

后端Rails服务器重定向到Google进行身份验证->

backend rails server redirects to google for authentication -->

他们通过google进行身份验证，并重定向到后端服务器的回调(localhost:3001/users/auth/google_oauth2/callback)->

they authenticate with google and get redirected to backend server's callback (localhost:3001/users/auth/google_oauth2/callback) -->

后端服务器为适当的用户保存令牌，然后重定向回localhost:3000上的客户端应用程序(无需在客户端上进行任何操作，只需将令牌保存在我的服务器上以备将来使用)

backend server saves token for appropriate user and then redirects back to client side app on localhost:3000 (nothing needs to be done on client, just need the token saved on my server for future use)

但是我确实需要知道身份验证是成功的，因此我可以在react/redux中调度适当的操作.在redux-auth中，它们检查popup.location URI中的access_token.问题是，当我使用此服务器端弹出流时，出现此讨厌的http/https错误:

I do however need to know that the authentication was successful so I can dispatch appropriate actions in react/redux. In redux-auth they check for the access_token inside the popup.location URI. Problem is when I use this server side popup flow I get this nasty http/https error:

(原始图片: http://imgur.com/v5NgIGr )

如果不是重定向回客户端，而是重定向到后端服务器中的视图，则可以在该页面上创建一个脚本，该脚本可以正常工作，但对我来说似乎很笨拙.我在考虑的另一个潜在解决方案是尝试使用window.postMessage api，但我不知道该浏览器是否具有出色的浏览器支持/也似乎很hack.我可以从弹出窗口向另一个窗口(主客户端应用程序)发送一条消息，说oauth成功，因此我的反应代码可以执行任何所需的操作.

If instead of redirecting back to the client I just redirect to a view in my backend server I could then have a script on that page that just does window.close() which works but seems hacky to me. Another potential solution I was thinking was to try and use the window.postMessage api but I don't know if that has great browser support/also seems hacky. I could emit a message to the other window (the main client app) from the popup saying the oauth was successful so my react code and do whatever it needs to do.

我觉得我只是完全错误地处理了整个流程，或者我缺少明显的东西.

I feel like I'm just approaching this whole flow completely wrong or I'm missing something obvious.

我还觉得，如果我在所有内容上都使用HTTPS，那么自从100％成为客户端之前，弹出窗口就可以很好地工作了，而我没有收到此SecurityError.我花了一些时间弄清楚如何使用https获取我的webpack开发服务器，并尝试在rails上做同样的事情(认为我在rails方面做错了)，但是仍然无法正常工作.也觉得我不需要在所有开发服务器上都强制使用HTTPS来使其正常工作...

I also feel like if I just had HTTPS on everything it would all work since before when it was 100% client side the popup worked beautifully and I didn't get this SecurityError. I spent some time figuring out how to get my webpack dev server using https and tried doing the same with rails (think I did something wrong on the rails side) but it was still not working. Also feel like I shouldn't need to force HTTPS on all my development servers in order to get it working...

如果有人有任何想法或可以给我一些指导，将不胜感激！

If anyone has any thoughts or could give me some direction that would be much appreciated!!

推荐答案

您正以错误的方式进行操作. Google的身份验证及其API确实有令人困惑的文档.我也遇到类似的情况，花了很多时间后，我找到了正确的方法.

You are approaching this the wrong way. Google's authentication and their APIs do have confusing documentation. I was also stuck with similar situation and after spending considerable time, I found the right way to do this.

从您的问题来看，我认为这似乎是相关的链接:

From your question, I believe this seems like the relevant link: https://developers.google.com/identity/sign-in/web/server-side-flow

然后，这是您的流程的样子:

And following it, here is how your flow should look like:

要针对您的问题进行映射，这是您要执行的操作:

To map it on your problem, this is what you will do:

1. 用户点击通过Google进行身份验证(客户端)
2. 客户请求Google授予包含您的范围的授权 并收到一次authorization code.
3. 客户端将此授权代码发送到您的ruby服务器.
4. Ruby服务器使用授权代码与access_token和持久化的refresh_token进行交换，您将在随后对google api的请求中使用该代码.

1. user clicks authenticate with google (client side)
2. Client requests Google for authorization that includes your scopes and receives a one time authorization code.
3. Client Sends this authorization code to your ruby server.
4. Ruby server uses the authorization code to exchange it with access_token and persisted refresh_token which you shall use in your subsequent requests to google apis.

希望有帮助.

这篇关于使用React前端和Rails后端的带有Google Calendar API的客户端OAuth的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！