本教程的重点是帮助开发人员学习如何将用户授权的职责委托给其他一些服务,例如 GitHub 或 Google,而不是在他们的应用程序中管理它们。
我们将涵盖:
Next.js 中的身份验证与授权
在 Next.js 中介绍我们的用户授权项目
创建 Next.js 应用
创建 GitHub OAuth 应用程序
将 API 密钥添加到环境变量
安装 NextAuth.js 并配置 GitHub 提供程序
访问用户会话
检查用户登录状态 useSession()
检索和显示用户信息
获取其他范围数据
身份验证是验证用户是他们声称的身份的行为。 用户名和密码是最常见的身份验证因素。
在对用户进行身份验证时 ,如果用户输入了正确的数据,服务器将假定该身份是有效的,并授予用户访问服务器资源的权限。
另一方面,安全系统中的授权是授予用户访问服务器上特定资源或功能的权限的过程。 该术语通常与访问控制或客户端特权互换使用。
通常,身份验证先于授权; 用户应该首先证明他们的身份是真实的,然后后端管理员才授予他们访问所请求资源的权限。
OAuth2.0 是一种行业标准的授权协议,使互联网用户能够与第三方网站和应用程序共享其帐户信息,而无需提供其帐户凭据。
本指南使用 NextAuth.js 库在 Next.js 应用程序中实现用户授权 (OAuth2.0)。
NextAuth.js 是用于 Next.js 的成熟的身份验证和授权解决方案 ,旨在与任何 OAuth 服务一起使用。 它内置了对许多流行登录服务的支持,包括 Google 和 GitHub。
要学习本教程,您需要 Node.js 12.0 或更高版本 以及 React 的基本知识 。
超过 20 万开发人员使用 LogRocket 来创造更好的数字体验 了解更多 →
让我们从创建一个新的 Next.js 项目开始。
以下命令分别展示了如何使用 npm、Yarn 和 pnpm 创建新的 Next.js 项目。 打开终端并运行其中一个:
npx create-next-app@latest # or yarn create next-app # or pnpm create next-app
CLI 将提示您为新项目提供名称。 在命令提示符中键入您的首选名称,然后单击 enter在键盘上完成安装。
安装完成后,运行以下命令在本地机器上启动开发服务器:
npm run dev # or yarn dev # or pnpm dev
默认情况下,这应该在端口 3000 处启动您的开发服务器。 启动您的网络浏览器并导航到 http://localhost:3000 。 您应该会看到 Next.js 起始页,如下所示。
接下来,您将在 GitHub 上创建一个新的 OAuth 应用程序,以使用 OAuth 注册您的应用程序。
我们希望用户使用他们的 GitHub 帐户登录并授权我们的应用程序从他们的帐户访问某些信息。
为此,我们需要首先 创建一个新的 GitHub OAuth App 。 单击“新 OAuth 应用程序”并使用您的网站信息相应地填写表格。 以下是有关表格要求的信息的一些重要事项:
在“应用程序名称”字段中,输入您的应用程序的名称(例如,“我的应用程序”)
在“主页 URL”字段中,输入您网站主页的完整 URL
由于我们处于开发模式,因此它是: http://localhost:3000