认证邮件

身份验证直接与 Payload 提供的邮件功能相关联。这允许你向用户发送验证邮件、密码重置邮件等。虽然 Payload 为这些操作提供了默认的邮件模板,但你可以自定义它们以符合你的品牌风格。

邮件验证

邮件验证强制用户证明他们能够访问用于身份验证的邮箱地址。这有助于减少垃圾账户并确保用户身份的真实性。

要启用邮件验证功能,请在Collection配置中使用 auth.verify 属性:

import type { CollectionConfig } from 'payload'

export const Customers: CollectionConfig = {
  // ...
  auth: {
    verify: true, // highlight-line
  },
}

提示: 验证邮件可以完全自定义。更多详情

以下是可用的配置选项:

选项描述
generateEmailHTML允许覆盖发送给用户的验证账户邮件的HTML内容。更多详情
generateEmailSubject允许覆盖发送给用户的验证账户邮件的主题。更多详情

generateEmailHTML

该函数接受一个参数 { req, token, user },允许覆盖发送给用户的账户验证邮件中的 HTML 内容。该函数应返回一个支持 HTML 的字符串,可以选择返回完整的 HTML 邮件内容。

import type { CollectionConfig } from 'payload'

export const Customers: CollectionConfig = {
  // ...
  auth: {
    verify: {
      // highlight-start
      generateEmailHTML: ({ req, token, user }) => {
        // 使用提供的 token 让用户验证他们的账户
        const url = `https://yourfrontend.com/verify?token=${token}`

        return `${user.email},点击这里验证你的邮箱: ${url}`
      },
      // highlight-end
    },
  },
}

重要提示: 如果你指定了不同的 URL 来发送用户进行邮箱验证(例如应用前端页面等),你需要自行在前端处理调用 Payload REST 或 GraphQL 验证操作,使用提供的 token。在上面的例子中,token 是通过查询参数传递的。

generateEmailSubject

与上述 generateEmailHTML 类似,你也可以自定义邮件的主题。函数参数相同,但只能返回字符串 - 不能包含 HTML。

import type { CollectionConfig } from 'payload'

export const Customers: CollectionConfig = {
  // ...
  auth: {
    verify: {
      // highlight-start
      generateEmailSubject: ({ req, user }) => {
        return `${user.email},重置你的密码!`
      },
      // highlight-end
    },
  },
}

忘记密码功能

你可以通过 auth.forgotPassword 属性中的以下选项来自定义忘记密码流程的操作方式:

import type { CollectionConfig } from 'payload'

export const Customers: CollectionConfig = {
  // ...
  auth: {
    forgotPassword: {
      // highlight-line
      // ...
    },
  },
}

可用的配置选项如下:

选项描述
expiration配置密码重置令牌的有效时长,以毫秒为单位。
generateEmailHTML允许覆盖发送给尝试重置密码用户的邮件HTML内容。更多详情
generateEmailSubject允许覆盖发送给尝试重置密码用户的邮件主题。更多详情

generateEmailHTML

此函数允许覆盖发送给尝试重置密码用户的电子邮件中的 HTML 内容。该函数应返回一个支持 HTML 的字符串,可以是一个完整的 HTML 电子邮件模板。

import type { CollectionConfig } from 'payload'

export const Customers: CollectionConfig = {
  // ...
  auth: {
    forgotPassword: {
      // highlight-start
      generateEmailHTML: ({ req, token, user }) => {
        // 使用提供的 token 允许用户重置密码
        const resetPasswordURL = `https://yourfrontend.com/reset-password?token=${token}`

        return `
          <!doctype html>
          <html>
            <body>
              <h1>这是我的自定义邮件模板!</h1>
              <p>你好,${user.email}!</p>
              <p>点击下方链接重置密码。</p>
              <p>
                <a href="${resetPasswordURL}">${resetPasswordURL}</a>
              </p>
            </body>
          </html>
        `
      },
      // highlight-end
    },
  },
}

重要提示: 如果你指定了不同的 URL 将用户引导至重置密码页面(例如应用前端页面等),你需要在前端自行处理调用 Payload REST 或 GraphQL 的 reset-password 操作,使用提供的 token。在上面的例子中,token 是通过查询参数传递的。

小技巧: 可以使用 HTML 模板创建自定义邮件模板、自动内联 CSS 等。你可以创建一个可复用的函数来标准化从 Payload 发送的所有邮件,使发送自定义邮件更加 DRY(不重复)。Payload 不内置 HTML 模板引擎,因此你可以自由选择自己的方案。

generateEmailHTML 函数接收以下参数:

参数描述
req请求对象
token为用户生成的用于重置密码的 token
user正在尝试重置密码的用户文档

generateEmailSubject

与上述 generateEmailHTML 类似,你也可以自定义邮件的主题。函数参数相同,但只能返回字符串 - 不能返回 HTML。

import type { CollectionConfig } from 'payload'

export const Customers: CollectionConfig = {
  // ...
  auth: {
    forgotPassword: {
      // highlight-start
      generateEmailSubject: ({ req, user }) => {
        return `Hey ${user.email}, reset your password!`
      },
      // highlight-end
    },
  },
}

以下是传递给 generateEmailSubject 函数的参数:

Argument描述
req请求对象。
user正在尝试重置密码的用户文档。