OAuth2Strategy

一个用于使用和实现 OAuth2 框架的策略，用于通过联合服务（如 Google、Facebook、GitHub 等）进行身份验证。

[!WARNING] 此策略期望身份提供程序严格遵循 OAuth2 规范。如果提供程序不遵循规范并偏离规范，则此策略可能无法按预期工作。

支持的运行时

运行时	是否支持
Node.js	✅
Cloudflare	✅

如何使用

安装

npm add remix-auth-oauth2

直接使用

您可以通过将其添加到您的身份验证器实例并配置正确的端点来使用此策略。

import { OAuthStrategy, CodeChallengeMethod } from "remix-auth-oauth2";

export const authenticator = new Authenticator<User>();

authenticator.use(
  new OAuth2Strategy(
    {
      cookie: "oauth2", // Optional, can also be an object with more options

      clientId: CLIENT_ID,
      clientSecret: CLIENT_SECRET,

      authorizationEndpoint: "https://provider.com/oauth2/authorize",
      tokenEndpoint: "https://provider.com/oauth2/token",
      redirectURI: "https://example.app/auth/callback",

      tokenRevocationEndpoint: "https://provider.com/oauth2/revoke", // optional

      scopes: ["openid", "email", "profile"], // optional
      codeChallengeMethod: CodeChallengeMethod.S256, // optional
    },
    async ({ tokens, request }) => {
      // here you can use the params above to get the user and return it
      // what you do inside this and how you find the user is up to you
      return await getUser(tokens, request);
    }
  ),
  // this is optional, but if you setup more than one OAuth2 instance you will
  // need to set a custom name to each one
  "provider-name"
);

然后您需要设置您的路由，对于 OAuth2 流程，您需要调用 authenticate 方法两次。

首先，您将使用您在身份验证器中设置的提供程序名称调用 authenticate 方法。

export async function action({ request }: Route.ActionArgs) {
  await authenticator.authenticate("provider-name", { request });
}

[!NOTE] 此路由可以是 action 或 loader，这取决于您是通过 POST 还是 GET 请求触发流程。

这将启动 OAuth2 流程并将用户重定向到提供程序的登录页面。一旦用户登录并授权您的应用程序，提供程序会将用户重定向回您的应用程序重定向 URI。

现在您需要在该 URI 上设置一个路由来处理来自提供程序的回调。

export async function loader({ request }: Route.LoaderArgs) {
  let user = await authenticator.authenticate("provider-name", request);
  // now you have the user object with the data you returned in the verify function
}

[!NOTE] 此路由必须是 loader，因为重定向将触发 GET 请求。

一旦您有了策略验证函数返回的 user 对象，您就可以对该信息执行任何操作。这可以是将会话中的用户存储，在数据库中创建新用户，将帐户链接到数据库中的现有用户等。

使用刷新令牌

该策略公开了一个公共的 refreshToken 方法，您可以使用它来刷新访问令牌。

let strategy = new OAuth2Strategy<User>(options, verify);
let tokens = await strategy.refreshToken(refreshToken);

刷新令牌是验证函数接收的 tokens 对象的一部分。如何存储它以调用 strategy.refreshToken 以及之后如何处理 tokens 对象取决于您。

最常见的方法是将刷新令牌存储在用户数据中，然后在刷新令牌后更新会话。

authenticator.use(
  new OAuth2Strategy<User>(
    options,
    async ({ tokens, request }) => {
      let user = await getUser(tokens, request);
      return {
        ...user,
        accessToken: tokens.accessToken()
        refreshToken: tokens.hasRefreshToken() ? tokens.refreshToken() : null,
      }
    }
  )
);

// later in your code you can use it to get new tokens object
let tokens = await strategy.refreshToken(user.refreshToken);

撤销令牌

您可以撤销用户在提供程序中拥有的访问令牌。

await strategy.revokeToken(user.accessToken);

发现提供程序

如果您想发现提供程序的端点，可以使用 discover 静态方法。

export let authenticator = new Authenticator<User>();

authenticator.use(
  await OAuth2Strategy.discover<User>(
    "https://provider.com",
    {
      clientId: CLIENT_ID,
      clientSecret: CLIENT_SECRET,
      redirectURI: "https://example.app/auth/callback",
      scopes: ["openid", "email", "profile"], // optional
    },
    async ({ tokens, request }) => {
      // here you can use the params above to get the user and return it
      // what you do inside this and how you find the user is up to you
      return await getUser(tokens, request);
    }
  )
);

这将获取提供程序的配置端点（/.well-known/openid-configuration）并从中获取授权、令牌和撤销端点，它还将获取支持的代码质询方法，并在支持 S256 的情况下尝试使用它。

请记住，这将会在创建策略时执行 fetch 操作，这将增加应用程序启动的延迟。

建议只使用此方法一次，然后将端点复制到您的配置中。

您可以通过将对象传递给 cookie 选项来自定义 cookie 选项。

authenticator.use(
  new OAuth2Strategy<User>(
    {
      cookie: {
        name: "oauth2",
        maxAge: 60 * 60 * 24 * 7, // 1 week
        path: "/auth",
        httpOnly: true,
        sameSite: "lax",
        secure: process.env.NODE_ENV === "production",
      },
      clientId: CLIENT_ID,
      clientSecret: CLIENT_SECRET,
      authorizationEndpoint: "https://provider.com/oauth2/authorize",
      tokenEndpoint: "https://provider.com/oauth2/token",
      redirectURI: "https://example.app/auth/callback",
    },
    async ({ tokens, request }) => {
      return await getUser(tokens, request);
    }
  )
);

这将使用名称 oauth2 设置 cookie，最大有效期为 1 周，只能在 /auth 路径上访问，仅 http，同站点 lax，并且如果应用程序在生产环境中运行，则安全。