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

问题描述

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

所以我在我的 rails 服务器上设置了 omniauth，让流程变成这样:

用户点击谷歌验证(客户端)-->

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

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

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

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

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

(原图:

要将其映射到您的问题上，您将执行以下操作:

1. 用户点击谷歌验证(客户端)
2. 客户向 Google 请求授权，其中包括您的范围并收到一次性授权码.
3. 客户端将此授权代码发送到您的 ruby​​ 服务器.
4. Ruby 服务器使用授权码将其与 access_token 和持久化的 refresh_token 交换，您将在后续对 google api 的请求中使用该代码.

希望有帮助.

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.

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

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

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

backend rails server redirects to google for authentication -->

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

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)

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:

(original image: http://imgur.com/v5NgIGr)

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.

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!!

解决方案

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. 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.

Hope it helps.

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