[vercel/next.js]添加身份验证示例

2024-05-15 975 views
0

修复 #153

实现https://github.com/iaincollins/nextjs-starter的身份验证部分,但客户端代码存在一些差异。在原始的 nextjs-starter 中,所有页面都从页面组件扩展而来。我将其更改为更高阶的组件。添加了另一个更高阶的组件来限制页面,清理文档,清理代码以适应standard,最后删除所有不必要的代码。

回答

1

@timneutkens @rauchg 希望由现在运行的外部服务提供身份验证。这种方法可以吗?

2

@impronunciable 不是,但在与 slack 上的 @rauchg 交谈后,我已经在开发一个类似于 zeit.co 登录的新实现。

8

你好,这个例子什么时候会合并到master中?谢谢。

3

@gustavomanolo 很可能它不会被合并。仍在研究不使用编程 API 的新示例。会及时向大家发布 ?

3

@timneutkens 非常感谢,那么同时,您建议如何实施身份验证?

2

@gustavomanolo 这个实现非常可靠。可以用于生产吗?我们只是想展示一个如何实现身份验证的不同示例。也许我会把这个移到一个单独的仓库中。

5

@timneutkens 当您有时间审查这些小问题时请告诉我,以便我们可以将其合并:)

2

您好,什么时候将其添加到示例中?

1

~有人可以帮我理解localStorage这里是如何使用的吗?在打开 Chrome 开发工具的情况下玩了原始演示,我从未见过localStorageset(它总是空的),但localStorage在代码中(尤其是在session类中)引用了很多~

更新: 没关系

我只想补充一点,从下一个新手的角度来看,我觉得这个例子,即使有评论(这是一个很好的开始!),也很难理解。一个例子中发生了很多事情,这使得它很难理解。我认为单独的、精简的例子效果最好。那,或者附带的分步教程,其中示例逐渐发展

0

@bookercodes 它用于存储登录后的会话。在该会话中,有有关姓名/电子邮件的信息。并且可以在应用程序中使用它来将其显示在页面上。在该示例中,它在菜单中显示您的姓名或电子邮件。

9

@bookercodes 这是一个好问题,但我不知道。 o_O 该示例可能需要更新以修复已解决的错误或浏览器很奇怪。

可能值得尝试在https://nextjs-starter.now.sh上使用 oAuth 登录,看看它是否适合您(从那时起,它已经进行了一些修复和改进,以增强鲁棒性,我认为现在效果很好 - 尽管来自实时服务器的电子邮件现在被垃圾邮件阻止,所以您可能只能使用 oAuth 登录;我需要配置演示站点以使用外部 SMTP 服务器)。

RE:复杂性,我同意。一段时间以来,我一直把如何简化它作为我脑海中的事情。这有点令人讨厌,因为这种“最佳实践”实现的尝试要求人们在应用程序的前端包含多个组件(包括客户端和服务器端),并专注于 CSRF 和服务器端会话支持,并考虑到诸如能够自定义用户模型以存储在他们想要使用的任何数据库中。

使其变得更容易的一种方法可能是创建一个牺牲一些功能或安全选项的实现,和/或放弃服务器端渲染,创建一个更容易实现的更简单的模型。

2

@bookercodes我想你需要打开它才能看到它?

图像

明白我的意思,您需要打开 LocalStorage 文件夹并单击链接。然后您将能够看到该网站的密钥。

图像

9

@radum 老实说,我以为我扩展了它!只是仔细检查了一下,现在我看到了。真是个傻瓜!

0

只是记下这一点以供我将来参考(希望我可以扩展它),但我觉得大多数应用程序都希望限制对多个路由的访问,而不仅仅是一个(即pages/restricted.js)。值得展示如何简洁地验证多个路由。

6

@juhaelee

这个评论是误导性的,我看到有人在 Stack Overflow 上也指出了这一点。

此外,如果不提供将 CSRF 返回到应用程序的方法(无论是通过 REST 端点还是 Web 套接字),就不可能将 CSRF 与 JavaScript SPA 结合使用。请记住,请求需要 HTTP Only cookie匹配的 CSRF 令牌,以便每个请求执行操作。

如果有人从另一个域执行请求,他们将无法读取您的 CSRF 令牌,因为他们将拥有自己的会话(来自其他域的请求将无法访问包含您的会话令牌的仅 HTTP cookie)。

您仍然由 CSRF 预测 - 即他们无法通过 JS 或提交您的站点的表单之类的东西执行远程 POST 请求,从而触发一个操作,就好像它是由用户完成的一样。这就是 CSRF 令牌的目的。

2

@iaincollins 我明白了。感谢您提供详细信息!但对于 next.js 来说,由于第一个渲染始终在服务器上,我们难道不能将 CSRF 令牌存储在该渲染上,并且对于每个顺序调用,使用该 csrf 令牌进行 POST 吗?

1

@juhaelee 从技术上讲,如果您推出自己的 CSRF 令牌系统,您可以这样做,但通常 CSRF 令牌会轮换以提供额外的安全性 - 这正是 Express 的 CSRF 模块的工作原理 - 因此,如果您只有第一个令牌。

6

结束这个有利于我们将在 v5 中引入的新示例

0

结束这个有利于我们将在 v5 中引入的新示例

@timneutkens 嗨!只是一个问题,在我阅读了大量这样的帖子之后,我得出的结论是,它更喜欢将 JWT 令牌存储在 cookie (前端)中,并且HTTPOnly从服务器使用也是最佳实践(无法访问获取来自 JS 的令牌)和Secure(确保仅通过 HTTPS 发送)。

所以我的后端它为我提供了一个 JWT 令牌,我只需要将它存储在 cookie 中。检查用户是否登录的方法也是通过 HOC,它包装了我的所有私人页面(经过身份验证的页面)。

问题:

  • 我正朝着正确的方向前进吗?
  • 真的需要使用HTTPOnlySecure页吗?你有例子吗?顺便说一句,我不需要 Auth0,(不需要 facebook、gmail 等用户身份验证)

预先感谢您能给我带来的任何帮助! :)