服务器身份验证后如何为前端提供 JSON Web 令牌? [英] How to provide frontend with JSON web token after server authentication?

问题描述

到目前为止，我只处理了服务器呈现的应用程序，在用户通过用户名/密码或使用 OAuth 提供程序(Facebook 等)登录后，服务器只是在重定向到相关页面时设置会话 cookie.

So far I have only dealt with server-rendered apps, where after a user logs in via username/password or using an OAuth provider (Facebook etc.), the server just sets a session cookie while redirecting to the relevant page.

但是现在我正在尝试使用更现代"的方法构建应用程序，前端使用 React，后端使用 JSON API.显然，对此的标准选择是使用 JSON Web 令牌进行身份验证，但是我无法弄清楚如何将 JWT 提供给客户端，以便可以将其存储在会话/本地存储或任何地方.

However now I'm attempting to build an app using a more 'modern' approach, with React on the frontend and a JSON API backend. Apparently the standard choice for this is to use a JSON web token for authentication, however I'm having trouble working out how I'm meant to provide the JWT to the client so it can be stored in session/local storage or wherever.

举例说明:

1. 用户点击链接(/auth/facebook)通过 Facebook 登录

1. User clicks link (/auth/facebook) to log in via Facebook

用户被重定向并显示 Facebook 登录表单和/或权限对话框(如有必要)

User is redirected and shown Facebook login form and/or permission dialog (if necessary)

Facebook 将用户重定向回 /auth/facebook/callback 并带有授权码，服务器将其交换为访问令牌和有关用户的一些信息

Facebook redirects user back to /auth/facebook/callback with an authorization code in tow, the server exchanges this for an access token and some information about the user

服务器使用信息在数据库中查找或创建用户，然后创建一个包含用户数据相关子集(例如 ID)的 JWT

Server finds or creates the user in the DB using the info, then creates a JWT containing a relevant subset of the user data (e.g. ID)

???

此时我只想将用户重定向到带有 JWT 的 React 应用程序的主页(比如说 /app)，这样前端就可以接管了.但是我想不出一种(优雅的)方法来做到这一点而不会丢失 JWT，除了将它放在重定向的查询字符串中(/app?authtoken=...) - 但它会显示在地址栏中，直到我使用 replaceState() 或其他任何方式手动删除它，这对我来说似乎有点奇怪.

At this point I just want the user to be redirected to the main page for the React app (let's say /app) with the JWT in tow, so the frontend can take over. But I can't think of an (elegant) way to do that without losing the JWT along the way, other than to put it in the query string for the redirect (/app?authtoken=...) - but that will display in the address bar until I remove it manually using replaceState() or whatever, and seems a little weird to me.

真的，我只是想知道这通常是如何完成的，我几乎可以肯定我在这里遗漏了一些东西.如果有帮助，服务器是 Node(带有 Passport 的 Koa).

Really I'm just wondering how this is typically done, and I'm almost sure I'm missing something here. The server is Node (Koa with Passport), if that helps.

为了清楚起见，我问的是最好的方法是向客户端提供令牌(以便可以保存)在 OAuth 重定向流程之后使用 Passport.

To be clear, I'm asking what the best way is to provide a token to the client (so it can be saved) after an OAuth redirect flow using Passport.

推荐答案

我最近遇到了同样的问题，在这里或其他地方没有找到解决方案，写了 这篇博文与我的深入思考.

I recently ran across this same issue, and, not finding a solution here or elsewhere, wrote this blog post with my in-depth thoughts.

TL;DR:我想出了 3 种可能的方法来在 OAuth 登录/重定向后将 JWT 发送到客户端:

1. 将 JWT 保存在 cookie 中，然后在未来的步骤中将其提取到前端或服务器上(例如，在客户端使用 JS 提取它，或者向服务器发送请求，服务器使用 cookie 来获取JWT，返回 JWT).
2. 将 JWT 作为查询字符串的一部分发回(您在问题中建议).
3. 发回带有 <script> 标签的服务器渲染 HTML 页面:

1. Save the JWT in a cookie, then extract it on the front-end or server in a future step (eg. extract it on the client with JS, or send a request to the server, server uses the cookie to get the JWT, returns the JWT).
2. Send the JWT back as part of the query string (which you suggest in your question).
3. Send back a server-rendered HTML page with a <script> tag that:

1. 自动将嵌入的 JWT 保存到 localStorage
2. 之后自动将客户端重定向到您喜欢的任何页面.

(由于使用 JWT 登录本质上等同于将 JWT 保存到 localStorage，因此我最喜欢的选项是 #3，但可能存在我没有考虑到的缺点.我很感兴趣在这里听听别人的想法.)

(Since logging in with JWTs is essentially equivalent to "saving the JWT to localStorage, my favorite option was #3, but it's possible there are downsides I haven't considered. I'm interested in hearing what others think here.)

希望有帮助！

这篇关于服务器身份验证后如何为前端提供 JSON Web 令牌?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！