FormStrategy

一个用于处理任何表单的 Remix Auth 策略。

支持的运行时

运行时	支持
Node.js	✅
Cloudflare	✅

如何使用

此策略在验证函数中返回请求的 FormData 实例和来自操作的请求。

这使您可以使用表单中的任何字段，并使用您想要的名称。因此，您不仅限于用户名+密码或电子邮件+密码，如果您需要第三个字段，也可以使用它。

首先，安装策略和 Remix Auth。

$ npm install remix-auth remix-auth-form

然后，创建一个 Authenticator 实例。

import { Authenticator } from "remix-auth";
import { User, findOrCreateUser } from "~/models/user";

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

您可以告诉身份验证器使用 FormStrategy。

import { FormStrategy } from "remix-auth-form";

// The rest of the code above here...

authenticator.use(
  new FormStrategy(async ({ form, request }) => {
    // Here you can use `form` to access and input values from the form.
    // and also use `request` to access more data
    let username = form.get("username"); // or email... etc
    let password = form.get("password");

    // You can validate the inputs however you want
    invariant(typeof username === "string", "username must be a string");
    invariant(username.length > 0, "username must not be empty");

    invariant(typeof password === "string", "password must be a string");
    invariant(password.length > 0, "password must not be empty");

    // And if you have a password you should hash it
    let hashedPassword = await hash(password);

    // And finally, you can find, or create, the user
    let user = await findOrCreateUser(username, hashedPassword);

    // And return the user as the Authenticator expects it
    return user;
  })
);

为了验证用户身份，您可以在 action 函数中使用以下代码

export async function action({ request }: Route.ActionArgs) {
  let user = await authenticator.authenticate("form", request);
  // Now you have the user object with the data you returned in the verify function
}

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