在现代 Web 应用程序中,身份验证是必需的。而 OAuth2 是目前最常见的身份验证协议之一。在 Fastify 中实现 OAuth2 身份验证可以让我们在应用程序中轻松地集成第三方身份验证,如 Facebook、Google、Github 等等。本文将详细介绍如何在 Fastify 中实现 OAuth2 身份验证,并提供示例代码。
OAuth2 简介
OAuth2 是一种针对授权的开放标准。它允许用户授权第三方应用程序来访问他们的互联网资源,而无需提供他们的用户名和密码。OAuth2 的工作原理如下:
- 用户向第三方应用程序提供他们的凭据。
- 第三方应用程序向授权服务器请求访问令牌。
- 授权服务器验证凭据并颁发访问令牌。
- 第三方应用程序使用访问令牌以获取用户的资源。
Fastify 中的 OAuth2 身份验证
在 Fastify 中实现 OAuth2 身份验证可以通过 fastify-oauth2 插件来实现。它是一个 OAuth2 库,旨在使 OAuth2 集成更加容易。我们可以使用 fastify-oauth2 插件来集成不同的策略,例如基于 GitHub 的 OAuth2 身份验证策略。
安装 fastify-oauth2
我们需要安装并使用 fastify-oauth2 插件来实现 OAuth2 身份验证。您可以通过以下命令来安装它:
npm install fastify-oauth2
集成 GitHub OAuth2 身份验证
我们可以使用 GitHub 来演示如何在 Fastify 中实现 OAuth2 身份验证。我们需要先创建一个 GitHub 应用程序,获取 Client ID 和 Client Secret。在创建 GitHub 应用程序时,我们需要指定回调 URL。这个 URL 将在用户授权后被调用。我们可以通过以下步骤来创建一个 GitHub 应用程序:
- 登录您的 GitHub 帐户。
- 转到应用程序设置页面。
- 单击“New OAuth App”按钮。
- 在“OAuth App name”文本框中输入应用程序名称。
- 在“Homepage URL”文本框中输入您的应用程序主页的 URL。
- 在“Authorization callback URL”文本框中输入您的应用程序的回调 URL。
- 单击“Register application”按钮。
一旦您创建了一个 GitHub 应用程序,您将获得一个客户端 ID 和客户端密码。您需要将这些详细信息保存在某个安全的位置,以便后续使用。
然后,我们需要在 Fastify 应用程序中配置 fastify-oauth2 插件,并使用 GitHub 身份验证策略。我们可以通过以下代码来实现:
const fastify = require('fastify')(); fastify.register(require('fastify-oauth2'), { name: 'githubOAuth2', scope: ['user'], credentials: { client: { id: 'YOUR_GITHUB_CLIENT_ID', secret: 'YOUR_GITHUB_CLIENT_SECRET', }, auth: { authorizeHost: 'https://github.com', authorizePath: '/login/oauth/authorize', tokenHost: 'https://github.com', tokenPath: '/login/oauth/access_token', }, }, startRedirectPath: '/login/github', callbackUri: 'http://localhost:3000/login/github/callback', generateStateFunction: () => { return randomString(); }, checkStateFunction: (state, callback) => { callback(null, state === randomString()); }, }, (err) => { if (err) { throw err; } }); fastify.get('/', async (req, res) => { if (!req.oauth2 || !req.oauth2.githubOAuth2) { return res.redirect('/login/github'); } const token = await req.oauth2.githubOAuth2.getAccessToken(); const user = await req.oauth2.githubOAuth2.getUser(token); res.send(`Hello, ${user.login}!`); }); fastify.get('/login/github', { preHandler: fastify.oauth2.authorize({ redirectTo: '/', scope: ['user'], state: randomString(), }), }); fastify.get('/login/github/callback', { preHandler: fastify.oauth2.callback({ callbackUri: 'http://localhost:3000/login/github/callback', scope: ['user'], state: randomString(), }), }, async (req, res) => { const token = await req.oauth2.githubOAuth2.getAccessToken(); const user = await req.oauth2.githubOAuth2.getUser(token); res.send(`Hello, ${user.login}!`); }); fastify.listen(3000, (err) => { if (err) { throw err; } console.log('Server is up on http://localhost:3000'); }); function randomString(length = 32) { const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; const charsLength = chars.length; let result = ''; for (let i = 0; i < length; i++) { result += chars.charAt(Math.floor(Math.random() * charsLength)); } return result; }
在上面的代码中,我们首先使用 fastify-oauth2 插件创建一个名为 githubOAuth2 的身份验证策略。我们使用 GitHub 的 API 来进行身份验证,并确定 OAuth2 令牌和用户的 Github 信息。当用户(未登录)访问 Fastify 应用程序首页时,用户将被重定向到 /login/github 上,在那里用户可以登录并进行身份验证。如果用户已经登录,则将显示他们的用户名。当用户通过 GitHub 进行身份验证后,他们将被重定向回 Fastify 应用程序首页,并看到他们的 GitHub 用户名。
总结
在本文中,我们详细介绍了如何在 Fastify 中实现 OAuth2 身份验证。我们集成了 GitHub OAuth2 策略,演示了如何创建 GitHub 应用程序以获得 Client ID 和 Client Secret。我们提供了完整的示例代码,通过这些代码,您可以轻松地在 Fastify 应用程序中集成 OAuth2 身份验证。
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/659f8218add4f0e0ff818d5a