如何在前端处理 OAuth2 重定向

Question

我正在尝试为单页 Web 应用程序实施 OAuth2 流程，但我不知道如何处理前端/Javascript 重定向端。

我弄清楚了后端：我正在使用一个完成所有工作并公开 2 条路由的库：

/auth/authorize returns 像这样的 json 回复：

 { "authorization_url": "https://github.com/login/oauth/authorize?response_type=code&client_id=d263f54&redirect_uri=http%3A%2F%2Fxxx&state=eyJ0eXAiOiJkdjsfkj&scope=read" }

/auth/callback 当 OAuth 提供者（此处为 Github）作为 redirect_uri 回调时，returns 或 json 回复如
```
 {"access_token":"jhfgkjhdfkjghkdhgkdhgfd","token_type":"bearer"}
```
（如果使用 Bearer 身份验证），或者简单地 null（如果使用 Cookie 身份验证。在这种情况下，浏览器会正确设置 cookie）

我应该如何在前端处理这个问题？

当用户点击“登录”按钮时，我可以使用类似

的内容将他们重定向到 Oauth 提供商登录页面

window.open(axios.get('/auth/authorize').data.authorization_url);

，没问题。

但是，如果在我的 OAuth 提供程序中我将回调注册为 /auth/callback，用户将被重定向到一个只显示文本的页面，这是不好的。

我想我应该注册一个 Frontend 路由作为 OAuth 提供者回调，那个路由应该监听 OAuth 提供者的响应，并手动转发 exact 一样响应后端的 auth/callback.

在 Axios/Javascript 中如何做到这一点？

有correct/best练习方法吗？

谢谢！

（作为附加信息，我使用的后端库是 FastAPI-Users，前端是 Vuejs）

Answer 1

我一直采用的方法是将重定向 URI 作为应用程序的基本路径，然后在应用程序加载时处理 OAuth 响应。这是我的一些 example React code 做的。

我将其与 pre and post login code 相结合，它处理从浏览器历史记录中删除登录响应 URL 并恢复状态，例如原始的 apication 路径。这样深层链接就可以工作了。

多标签浏览

如果用户打开新的浏览器选项卡或重新加载页面，handlePageLoad 方法的上述技术对于设置身份验证状态也很有用。所以我认为从任何路径运行它比使用特定路径更好。

如何在前端处理 OAuth2 重定向

How to handle OAuth2 redirect on the frontend side

javascript

oauth-2.0

vue.js

axios