Reactjs Next.js身份验证策略

我一直在尝试为Next.js项目实现一个可靠的身份验证流，但现在我完全迷失了方向。我已经看过Next.js的repo示例。但是我有很多问题需要一个完整的解决方案

我有一个express.js API和一个单独的Next.js前端项目。所有数据和身份验证都由API处理。前端仅使用SSR呈现页面。如果我只是创建一个monolith项目，其中呈现页面和所有数据都由一台服务器处理（我的意思是为Next.js提供一个自定义服务器选项），我只会使用express session和csurf。这将是管理会话和针对CSRF创建安全性的传统方法

Express.js API不是必需的。这只是一个例子。它可以是Django API，也可以是.Net核心API。主要的一点是，它是一个独立的服务器和一个独立的项目

我如何拥有一个简单而可靠的结构？我浏览了一些我最喜欢的网站（netlify、zeit.co、heroku、spectrum.chat等）。其中一些使用localstorage存储访问和刷新令牌（XSS易受攻击）。他们中的一些人使用cookies，甚至不仅仅是HTTPOnly（XSS和CSRF都易受攻击）。像spectrum.chat这样的例子使用了我上面提到的方法（cookie会话+防止csrf）

我知道JWT代币有着巨大的宣传。但我觉得它们太复杂了。大多数教程只是跳过所有过期、令牌刷新、令牌撤销、黑名单、白名单等

而Next.js的许多会话cookie示例几乎从未提及CSRF。老实说，身份验证对我来说一直是个大问题。有一天我读到应该使用HTTPOnly cookies，第二天我看到一个巨大的流行网站甚至没有使用它们。或者他们说“永远不要将您的令牌存储到本地存储”，而一些大型项目就是使用这种方法

---

有人能给我指出一些解决这种情况的方向吗？

我也不得不为我目前的项目考虑这个问题。我使用相同的技术：ExpressJSAPI和NextJS服务器端渲染前端

我选择在ExpressJSAPI中使用passport.js。YouTube上的网络忍者有一个非常好的播放列表，共有21集。他向您展示了如何在API中实现GoogleOAuth2.0，但这种逻辑会转移到任何其他策略（JWT、电子邮件+密码、Facebook身份验证等）

在前端，我会直接将用户重定向到Express API中的url。这个url会向用户显示GoogleOAuth屏幕，用户点击“允许”，API会做更多的事情，为特定用户制作cookie，然后重定向回前端的url。现在，用户已通过身份验证

关于HTTPOnly cookie：我选择关闭此功能，因为我在前端所需的cookie中存储信息。如果您启用了此功能，那么前端（javascript）将无法访问这些cookie，因为它们是HTTPOnly

这是我刚才提到的播放列表的链接：

希望我已经给了你一个方向

编辑：

---

我还没有回答你关于CSURF的问题，但那是因为我不熟悉它。

我终于找到了解决方案

现在我使用的是csrf npm包，而不是csurf。csurf只是将csrf转变为一个快速中间件

因此，我在应用程序的getInitialProps中创建了一个csrfSecret。它创建秘密，将其设置为httpOnly cookie。稍后，它会创建一个csrfToken并使用pageProps返回它。因此，我可以通过window.NEXT_DATA.props.csrfToken访问它。如果用户刷新页面，csrfSecret将保持不变，但csrfToken将被更新

当我向代理的“/api/graphql api路由发出请求时，它首先从x-xsrf-token头获取csrf令牌，并用csrfSecret cookie值验证它。 然后，它提取authTokenCookie的值并将其传递给实际的GraphQLAPI

API都是基于令牌的。它只需要一个非过期的访问令牌。（顺便说一句，它不需要是JWT。可以使用任何加密性强的随机令牌。这意味着引用/不透明令牌。）

实际API不需要CSRF检查，因为它不依赖cookies进行身份验证。它只检查授权头。 authToken和csrfSecret都是httpOnly cookies。我甚至从未将它们存储在客户端内存中

我认为这是我能得到的最安全的解决方案。现在我对这个解决方案很满意。

免责声明：我是下面免费开源软件包的维护者，但我认为这是合适的，因为这是一个常见的问题，没有一个很好的答案，因为许多流行的解决方案都有问题中提出的特定安全缺陷（例如在适当的情况下不使用CSRF，并向客户端JavaScript公开会话令牌或web令牌）

该软件包试图用免费开源软件解决上述问题

• 它只使用

  httpOnly

  cookies和

  secure

• 它具有CSRF保护（双重提交cookie方法，带有签名cookie）
• Cookie会根据需要加上前缀（例如，

  \uu主机-

  或

  \uu安全

  ）
• 它支持电子邮件/无密码登录和OAuth提供商（包括许多）
• 它支持JSON Web令牌（签名+加密）和会话数据库
• 您可以在没有数据库的情况下使用它（例如，任何ANSI SQL、MongoDB）
• 有一个（）
• 它是100%自由／开源软件，不是商业软件或SaaS解决方案（不出售任何东西）

API路由示例 e、 g.

page/api/auth/[…nextauth.js]

从“下一次身份验证”导入下一个身份验证
从“下一个身份验证/提供程序”导入提供程序
常量选项={
供应商：[
//OAuth身份验证提供程序
供应商，苹果({
clientId:process.env.APPLE\u ID，
clientSecret:process.env.APPLE\u SECRET
}),
提供商，谷歌({
clientId:process.env。