在 Fastify 中实现 OAuth2 身份验证

在现代 Web 应用程序中,身份验证是必需的。而 OAuth2 是目前最常见的身份验证协议之一。在 Fastify 中实现 OAuth2 身份验证可以让我们在应用程序中轻松地集成第三方身份验证,如 Facebook、Google、Github 等等。本文将详细介绍如何在 Fastify 中实现 OAuth2 身份验证,并提供示例代码。

OAuth2 简介

OAuth2 是一种针对授权的开放标准。它允许用户授权第三方应用程序来访问他们的互联网资源,而无需提供他们的用户名和密码。OAuth2 的工作原理如下:

  1. 用户向第三方应用程序提供他们的凭据。
  2. 第三方应用程序向授权服务器请求访问令牌。
  3. 授权服务器验证凭据并颁发访问令牌。
  4. 第三方应用程序使用访问令牌以获取用户的资源。

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 应用程序:

  1. 登录您的 GitHub 帐户。
  2. 转到应用程序设置页面
  3. 单击“New OAuth App”按钮。
  4. 在“OAuth App name”文本框中输入应用程序名称。
  5. 在“Homepage URL”文本框中输入您的应用程序主页的 URL。
  6. 在“Authorization callback URL”文本框中输入您的应用程序的回调 URL。
  7. 单击“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


纠错反馈