第15章：在 Strapi 中发送邮件确认

头像
王大冶
     福建
    阅读 11 分钟

    本章的代码可在 GitHub 上找到：分支 emailconfirmation。

    https://github.com/peterlidee/NNAS/tree/emailconfirmation

    我们已经完成了一个完整的注册表单。当用户使用该表单注册时，他们会被添加到 Strapi 中。由于我们在本系列开始时的设置，Strapi 实际上已经在发送邮件，但我们需要对其进行配置。但首先，我们需要创建一个页面，用户在成功注册后会被发送到该页面。

    确认消息

    我们创建一个页面和一个组件：

    // frontend/src/app/(auth)/confirmation/message/page.tsx

import ConfirmationMessage from '@/components/auth/confirmation/ConfirmationMessage';

export default function page() {
  return <ConfirmationMessage />;
}
    // frontend/src/components/auth/confirmation/ConfirmationMessage.tsx

export default function ConfirmationMessage() {
  return (
    <div className='bg-zinc-100 rounded-sm px-4 py-8 mb-8'>
      <h2 className='font-bold text-lg mb-4'>请确认您的电子邮件。</h2>
      <p>
        我们已向您发送了一封带有确认链接的邮件。请打开此邮件并点击链接以确认您的[项目名称]帐户和电子邮件。
      </p>
    </div>
  );
}

    在 Strapi 中设置邮件

    Strapi 预设了一些用于帐户/邮件验证的邮件模板。前往 Strapi 管理界面：

    Settings > Users & Permissions plugin > Email templates

    然后点击“email address verification”。在实际应用中，我们应该设置所有的字段，如发送者和名称等，但我们现在关注的是消息文本框。默认情况下，它的内容是：

    <p>Thank you for registering!</p>
<p>You have to confirm your email address. Please click on the link below.</p>
<p><%= URL %>?confirmation=<%= CODE %></p>
<p>Thanks.</p>

    显然，这就是我们的邮件正文。我们想更新这行 <%= URL %>?confirmation=<%= CODE %>，它解析成这个 URL：

    http://localhost:1337/api/auth/email-confirmation?confirmation=3708c50f7ca98ef2654s89z46

    URL 是我们的后端 Strapi URL 加上 Strapi 邮件确认端点：/api/auth/email-confirmation。Strapi 向这个 URL 添加了一个查询参数：?confirmation=123。这是邮件确认令牌。所以这是 Strapi 默认发送的内容，但你绝不应该使用这个：

    1. 我们不想向前端用户暴露我们的后端 URL。
    2. 这个端点没有错误处理。当用户点击链接但失败时，用户只会看到一个纯粹的 JSON 错误对象。

    尽管如此，如果用户点击链接，它将会确认用户的电子邮件！让我们试试吧。我们打开了链接，被重定向到路由 /confirmEmail。这个页面不存在，所以我们得到了 404 错误。但检查我们的 Strapi 后端时，我们发现用户现在的确认状态为 true，之前是 false。

    因此，看起来我们有一个可以工作的 Strapi 端点来确认用户的电子邮件，但它的行为有些奇怪。成功时，它会重定向；错误时，它会返回 Strapi 错误消息。无论如何，我们不希望用户直接访问这个 URL！

    计划

    我们如何解决这个问题？我们将在前端创建一个新页面：/confirmation/submit。我们会更新 Strapi 中的确认链接，使其指向这个页面。我们还会将确认令牌作为查询参数添加到这个页面。在此页面中，我们将处理端点调用。

    在 Strapi 中更新邮件。我们只需要更新邮件模板中的实际链接为：

    <p><a href="http://localhost:3000/confirmation/submit?confirmation=<%= CODE %>">确认您的电子邮件链接</a></p>

    然后保存。还有一个设置需要调整：

    Settings > Users & Permissions plugin > Advanced Settings > Redirection url

    这控制了 Strapi 端点的重定向位置。我们不会使用这个设置，但我们会将其设置为 http://localhost:3000。

    邮件部分已经处理完毕。在注册时，我们向用户发送一封包含前端 URL 和确认令牌的邮件。快速测试确认一切正常。很好，现在我们来创建这个前端页面。

    提交邮件确认

    我们创建一个新页面和一个组件：

    // frontend/src/app/(auth)/confirmation/submit/page.tsx
import ConfirmationSubmit from '@/components/auth/confirmation/ConfirmationSubmit';

type Props = {
  searchParams: {
    confirmation?: string,
  },
};

export default async function page({ searchParams }: Props) {
  return <ConfirmationSubmit confirmationToken={searchParams?.confirmation} />;
}

    注意，我们从页面中获取 confirmation 查询参数并将其传递给组件！我们的组件代码如下：

    // frontend/src/components/auth/confirmation/ConfirmationSubmit.tsx

import Link from 'next/link';

type Props = {
  confirmationToken?: string;
};

export function Wrapper({ children }: { children: React.ReactNode }) {
  return (
    <div className='bg-zinc-100 rounded-sm px-4 py-8 mb-8'>{children}</div>
  );
}

export default async function ConfirmationSubmit({ confirmationToken }: Props) {
  if (!confirmationToken || confirmationToken === '') {
    return (
      <Wrapper>
        <h2 className='font-bold text-lg mb-4'>错误</h2>
        <p>令牌无效。</p>
      </Wrapper>
    );
  }

  // 发送邮件验证请求到 strapi 并等待响应
  try {
    const strapiResponse = await fetch(
      `${process.env.STRAPI_BACKEND_URL}/api/auth/email-confirmation?confirmation=${confirmationToken}`
    );
    if (!strapiResponse.ok) {
      let error = '';
      const contentType = strapiResponse.headers.get('content-type');
      if (contentType === 'application/json; charset=utf-8') {
        const data = await strapiResponse.json();
        error = data.error.message;
      } else {
        error = strapiResponse.statusText;
      }
      return (
        <Wrapper>
          <h2 className='font-bold text-lg mb-4'>错误</h2>
          <p>错误：{error}</p>
        </Wrapper>
      );
    }
    // 成功，不做任何处理
  } catch (error: any) {
    return (
      <Wrapper>
        <h2 className='font-bold text-lg mb-4'>错误</h2>
        <p>{error.message}</p>
      </Wrapper>
    );
  }

  return (
    <Wrapper>
      <h2 className='font-bold text-lg mb-4'>电子邮件已确认。</h2>
      <p>
        您的电子邮件已成功验证。您现在可以{' '}
        <Link href='/login' className='underline'>
          登录
        </Link>
        了。
      </p>
    </Wrapper>
  );
}

    这是一个非常简单的组件。首先我们检查是否存在 confirmationToken。如果没有，我们直接返回一个简单的错误消息。接下来，我们使用我们的令牌调用 Strapi 端点。由于这是一个服务器组件，我们可以在函数组件内部完成此操作。

    我们监听错误：!strapiResponse.ok 并将错误返回给用户。我们还将 API 调用包装在 try-catch 块中，以便再次返回错误。

    成功时，Strapi 端点仍会重定向。但在我们的 strapiResponse 中，状态将为 ok。因此，成功调用此端点后，strapiResponse.ok 仍然为真。当我们跳出 try-catch 块时，我们知道没有错误，因此返回成功消息。

    成功消息确认用户的电子邮件已验证，并提示他们登录。这就是全部内容。我们现在已经完成了用户电子邮件的确认和错误处理。虽然这个 Strapi 端点的行为不太理想，但这就是 Strapi 提供的流程，我们只能使用它。

    请求新确认邮件

    事情可能会出错。也许用户没有找到邮件（可能在垃圾邮件文件夹中？），或者确认令牌已过期（我不知道它有效多久）。但这无关紧要。在某些情况下，你需要给用户一个机会，重新请求确认邮件。

    这是一个用户体验问题。如何实现取决于你的设计。问题在于你何时何地给用户机会请求新的确认邮件。这很棘手，因为它可能会让用户感到困惑。我选择在两个地方显示此选项：

    第一个是在确认消息中。当用户成功注册时，我们会将其重定向到一个确认页面（我们已向您发送一封邮件...）。让我们在那里添加一个链接，用户可以通过该链接请求新的确认邮件。我们稍后会构建此页面。

    // frontend/src/components/auth/confirmation/ConfirmationMessage.tsx

import Link from 'next/link';

export default function ConfirmationMessage() {
  return (
    <div className='bg-zinc-100 rounded-sm px-4 py-8 mb-8'>
      <h2 className='font-bold text-lg mb-4'>请确认您的电子邮件。</h2>
      <p>
        我们

已向您发送了一封带有确认链接的邮件。请打开此邮件并点击链接以确认您的[项目名称]帐户和电子邮件。
      </p>
      <h3 className='font-bold my-4'>没有找到邮件？</h3>
      <p>
        如果您没有收到确认链接的邮件，请检查您的垃圾邮件文件夹或等待几分钟。
      </p>
      <p>
        仍未收到邮件？{' '}
        <Link href='/confirmation/newrequest' className='underline'>
          请求新的确认邮件。
        </Link>
      </p>
    </div>
  );
}

    这还不够。可能用户已经关闭了此页面。所以我在登录页面添加了一个额外选项。假设用户没有找到或打开确认邮件，但尝试登录。Strapi 有一个特定的错误：“您的帐户电子邮件未确认”。所以我们可以监听这个错误，然后显示“请求新的确认邮件”消息。

    image.png

    请求新确认邮件页面

    这是 Strapi 的端点：

    const strapiResponse: any = await fetch(
  process.env.STRAPI_BACKEND_URL + '/api/auth/send-email-confirmation',
  {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ email }),
    cache: 'no-cache',
  }
);

    这是一个 POST 请求，我们需要在 body 对象中发送电子邮件。响应非常有趣。Strapi 永远不会确认数据库中是否存在该电子邮件的用户。如果在请求中发送了电子邮件，则响应如下：

    {
  "email": "bob@example.com",
  "sent": true
}

    无论电子邮件是否存在于 Strapi 数据库中，响应都会是这样。这很好。如果请求中没有电子邮件或电子邮件无效，Strapi 会返回错误。所以仍有可能收到错误消息。

    我们需要一个表单，让用户输入电子邮件并提交。它需要错误处理和加载状态。成功后，它会重定向到我们在注册时创建的 confirm/message 页面。我们不需要 NextAuth，所以可以再次使用服务器操作和 useFormState。我们需要一个页面、一个组件和一个服务器操作：

    // frontend/src/app/(auth)/confirmation/newrequest/page.tsx

import ConfirmationNewRequest from '@/components/auth/confirmation/ConfirmationNewRequest';

export default function page() {
  return <ConfirmationNewRequest />;
}
    // frontend/src/components/auth/confirmation/NewRequest.tsx

'use client';

import { useFormState } from 'react-dom';
import confirmationNewRequestAction from './confirmationNewRequestAction';
import PendingSubmitButton from '../PendingSubmitButton';

type InputErrorsT = {
  email?: string[];
};

type InitialFormStateT = {
  error: false;
};

type ErrorFormStateT = {
  error: true;
  message: string;
  inputErrors?: InputErrorsT;
};

export type ConfirmationNewRequestFormStateT =
  | InitialFormStateT
  | ErrorFormStateT;

const initialState: InitialFormStateT = {
  error: false,
};

export default function ConfirmationNewRequest() {
  const [state, formAction] = useFormState<
    ConfirmationNewRequestFormStateT,
    FormData
  >(confirmationNewRequestAction, initialState);

  return (
    <div className='mx-auto my-8 p-8 max-w-lg bg-zinc-100 rounded-sm'>
      <h2 className='text-center text-2xl text-blue-400 mb-8 font-bold'>
        请求确认
      </h2>
      <p className='mb-4'>
        请求新的确认邮件。这里可以放一些关于令牌过期或有限请求的信息。
      </p>
      <form action={formAction} className='my-8'>
        <div className='mb-3'>
          <label htmlFor='email' className='block mb-1'>
            电子邮件 *
          </label>
          <input
            type='email'
            id='email'
            name='email'
            required
            className='bg-white border border-zinc-300 w-full rounded-sm p-2'
          />
          {state.error && state?.inputErrors?.email ? (
            <div className='text-red-700' aria-live='polite'>
              {state.inputErrors.email[0]}
            </div>
          ) : null}
        </div>
        <div className='mb-3'>
          <PendingSubmitButton />
        </div>
        {state.error && state.message ? (
          <div className='text-red-700' aria-live='polite'>
            {state.message}
          </div>
        ) : null}
      </form>
    </div>
  );
}

    最后是我们的服务器操作：

    // frontend/src/components/auth/confirmation/ConfirmationNewrequestAction.ts

'use server';

import { redirect } from 'next/navigation';
import { z } from 'zod';
import { ConfirmationNewRequestFormStateT } from './ConfirmationNewRequest';

const formSchema = z.object({
  email: z.string().email('请输入有效的电子邮件。').trim(),
});

export default async function confirmNewRequestAction(
  prevState: ConfirmationNewRequestFormStateT,
  formData: FormData
) {
  const validatedFields = formSchema.safeParse({
    email: formData.get('email'),
  });
  if (!validatedFields.success) {
    return {
      error: true,
      inputErrors: validatedFields.error.flatten().fieldErrors,
      message: '请核实您的数据。',
    };
  }
  const { email } = validatedFields.data;

  try {
    const strapiResponse: any = await fetch(
      process.env.STRAPI_BACKEND_URL + '/api/auth/send-email-confirmation',
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ email }),
        cache: 'no-cache',
      }
    );

    // 处理 strapi 错误
    if (!strapiResponse.ok) {
      const response = {
        error: true,
        message: '',
      };
      // 检查响应是否为 JSON 格式
      const contentType = strapiResponse.headers.get('content-type');
      if (contentType === 'application/json; charset=utf-8') {
        const data = await strapiResponse.json();

        // 我们不希望确认电子邮件存在于 Strapi DB 中
        // 但我们不能在 try catch 块内重定向
        // 只有在这种情况下才返回响应
        // 如果是这种情况，我们将继续重定向
        if (data.error.message !== 'Already confirmed') {
          response.message = data.error.message;
          return response;
        }
      } else {
        response.message = strapiResponse.statusText;
        return response;
      }
    }
    // 成功时我们在 try catch 块外重定向
  } catch (error: any) {
    // 网络错误或其他问题
    return {
      error: true,
      message: 'message' in error ? error.message : error.statusText,
    };
  }

  redirect('/confirmation/message');
}

    这里没有新东西。我在上一章中解释了如何使用服务器操作和 useFormState。

    注意事项1：在测试这个流程时，我发现了这个错误消息：

    image.png

    这里发生的情况是，用户已经被验证，Strapi 然后返回一个带有消息 "Already confirmed" 的错误对象。这不好，因为它确认数据库中有一个使用该电子邮件的用户，而我们不希望这样。

    为了解决这个问题，我们监听此错误并在发生时不做任何操作。然后该函数将完成 try-catch 块并继续重定向。换句话说，当用户已经被确认时，即使我们没有实际发送新的电子邮件，我们也会将用户重定向到 /confirmation/message。

    这不是最优的，但应该足够了。已经被确认的用户非常不可能偶然访问此页面。我们甚至可以保护此组件，以便已登录的用户收到“已经确认”的消息或类似的内容。我将这部分留给你来决定。

    注意事项2：此路由可能会受到垃圾请求的攻击。有人可能会连续提交请求，导致系统发送大量电子邮件。这也是你可能需要防范的事情。

    总结

    这就是我们账户/电子邮件确认流程所需的一切。在注册时：

    1. 用户会收到一封带有前端 URL + 确认令牌的电子邮件：/confirmation/submit?confirmation=***
    2. 用户会被重定向到确认消息页面：“验证您的电子邮件”：/confirmation/message
    3. 点击邮件中的链接后，用户访问：/confirmation/submit?confirmation=***
    4. 此服务器组件使用令牌调用 Strapi，处理错误并在成功时要求用户登录。
    5. 我们还添加了请求新确认邮件的选项。用户输入他的电子邮件，Strapi 发送邮件（如果邮件在数据库中），然后用户再次进入步骤2。

    到此为止，我们已经处理了登录、注册和电子邮件确认的流程。接下来的章节将处理忘记密码的流程。之后，我们还需要实现修改密码和编辑用户信息的流程。

    首发于公众号 大迁世界，欢迎关注。📝 每周一篇实用的前端文章 🛠️ 分享值得关注的开发工具 ❓ 有疑问？我来回答

    本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

    前端javascript
    王大冶
    68.1k 声望105k 粉丝
    « 上一篇
    14.使用 NextAuth CredentialsProvider 注册，结合服务器操作和 useFormState
    下一篇 »
    第16章：使用 Strapi 和 NextAuth 进行忘记密码流程

    引用和评论

    推荐阅读
    头像
    为什么需要重新考虑将 Zustand 与 Next.js 结合使用的问题？

    王大冶阅读 32

    头像
    网页设计的垂直居中

    寒青赞 41阅读 5.2k评论 3

    头像
    CSS团队协作规范

    寒青赞 38阅读 7.5k

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.4k评论 9

    头像
    100个React最佳实践小技巧

    夕水赞 26阅读 6.8k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.3k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    0 条评论
    得票最新