使用外部服务器进行NextJS身份验证

Question

我正在Nextjs中使用auth，我想知道在NextJS中处理身份验证的最佳策略是什么？

这是我的服务结构：

如果我理解得很清楚，则必须在NextJS中处理服务器端渲染，因此我必须将Cookie从外部服务器放到NextJS客户端，然后再处理服务器端渲染检查。为此，我假设我必须在NextJS服务器与其他服务之间创建连接。在深入探讨该主题之前，我将与您讨论我可以使用的可能性。看来NextJS auth是普通开发的主题。

任何提示都会很棒， 谢谢

Answer 1

我最近添加了一个example with cookie auth，它说明了您在前端尝试执行的操作。

对于后端，除了用于渲染Next.js应用程序的服务器之外，最好将API放在外部服务器中。该API将处理数据库和令牌创建业务。然后身份验证的基础如下：

• 客户端POST向服务器发送带有用户名和密码的请求。
• 服务器获取请求并根据接收到的数据生成令牌。
• 如果验证数据一切正常，则服务器将以令牌（例如{ token: "secrettoken" }）进行响应。
• 客户端接收令牌并将其保存在cookie中。如果一切正常，可以选择将用户重定向到/dashboard或/profile。
• 在受限制的页面上，客户端将检查cookie是否存在，并有选择地针对服务器进行验证，您可以在getInitialProps中完成最后一部分。如果Cookie验证失败，则将用户重定向。

我创建了small library来抽象这种逻辑。

因此，最后，您的Next.js应用程序不应该知道服务器中正在发生的事情，它只应接收令牌，保存令牌，对其进行验证，并在出现问题时重定向用户。

如何在外部服务器上处理令牌创建取决于您。

Answer 2

检出this线程。在整个线程中，有几个如何使用JWT，OAuth等进行身份验证的示例。您会看到这些示例正在使用getInitialProps，并且有几个示例在整个过程中都使用cookie来提取身份验证令牌。

您必须使用server.js编写自定义express.js文件，才能通过路由请求提供令牌。我假设“外部服务器”是指一些使用OAuth或OpenId协议来检索令牌的第三方身份验证器。如果是这样，您说对了，您将需要从这些外部服务中请求令牌（或身份验证机制），然后决定如何在自己的客户端中使用它们。渲染到浏览器后，您可能会使用getInitialProps来执行客户端中的身份验证令牌所需的操作。

更多身份验证here的示例-一个用于Firebase，另一个用于Apollo。

Answer 3

如果要专门使用Auth0，只需添加到答案中即可。在http://www.fullstackradio.com/112的采访中，格林尼治·劳赫（Guillermo Rauch）在下午1:06左右提到，如果他要再次实施身份验证，他将使用Auth0，因此我使用具有服务器无功能的Auth0和Nextjs创建了minimal repo 。

像@jolvera一样，除了用于渲染Next.js应用程序的服务器之外，外部服务器中还存在一个API。该API位于./auth/auth.js中。它处理令牌创建业务，并且可以扩展为处理数据库。

./ utils / withAuth.js中的HOC组件调用auth.js lambda来获取用户信息，并且只有在客户端被授权的情况下才可以检索它。否则，用户信息是不确定的。此外，还有一个事件监听器，类似于with-cookie-auth中的事件监听器，可跨选项卡同步注销。

另外要注意的一点是，不要与Nextjs example on Auth0's blog混淆。该示例正在扩展Nextjs服务器，如果要将Next部署到 serverless ，则不是您想要的解决方案。它没有页面路由和身份验证的关注点分离。