八、通过Email-Provider完成授权登录

简介：

• 文档参考：https://next-auth.js.org/providers/email

配置邮件服务器信息：

• 推荐试用 object 形式配置，修改 .env 添加：

EMAIL_SERVER_USER=username
EMAIL_SERVER_PASSWORD=password
EMAIL_SERVER_HOST=smtp.example.com
EMAIL_SERVER_PORT=587
[email protected]

配置 provider

• 修改 pages/api/auth/[...nextauth].js 文件，修改 EmailProvider 为：

EmailProvider({
      server: {
        host: process.env.EMAIL_SERVER_HOST,
        port: process.env.EMAIL_SERVER_PORT,
        auth: {
          user: process.env.EMAIL_SERVER_USER,
          pass: process.env.EMAIL_SERVER_PASSWORD
        }
      },
      from: process.env.EMAIL_FROM
    }),
    ...

配置 Adapter

• 邮件登录需要数据库的支持，用来存储用户登录信息。
• 安装相关类库依赖：yarn add next-auth @next-auth/mongodb-adapter mongodb
• 添加文件 Add lib/mongodb.ts

// This approach is taken from https://github.com/vercel/next.js/tree/canary/examples/with-mongodb
import { MongoClient } from 'mongodb'
if (!process.env.MONGODB_URI) {
  throw new Error('Invalid/Missing environment variable: "MONGODB_URI"')
}
const uri = process.env.MONGODB_URI
const options = {}
let client
let clientPromise: Promise
client = new MongoClient(uri, options)
clientPromise = client.connect()
export default clientPromise

• 在 pages/api/auth/[...nextauth].js next-auth 添加 provider 的配置信息

...
import { MongoDBAdapter } from "@next-auth/mongodb-adapter"
import clientPromise from "../../../lib/mongodb"
...

// For more information on each option (and a full list of options) go to
// https://next-auth.js.org/configuration/options
export default NextAuth({
  adapter: MongoDBAdapter(clientPromise),
  ...
})

• 接下来就要启动一个 mongodb 的数据服务，通过docker启动，参考 https://hub.docker.com/_/mongo 即可。(友情提示，启动时注意暴露 27017 端口的映射否则外部无法访问)
• 配置 mongodb 的服务连接，根据你配置的用户名密码做相应的修改即可：

MONGODB_URI=mongodb://root:example@localhost:27017

测试：

• yarn dev 可以测试效果

如果遇到问题 MissingAdapter [MissingAdapterError]: E-mail login requires an adapter.

• 那么是因为没有配置数据库服务，可以参考Adapter列表。

如何高度自定义

• 有没有一种情况，你觉得默认的 nodemailer 不好用，或者希望通过短信，微信或者其他什么的来扩展链接登录（本质上Email就是连接登录）
• 从源码上 /node_modules/next-auth/providers/index.d.ts 可以看到

export declare type Provider = OAuthConfig | EmailConfig | CredentialsConfig;

• 那么 EmailConfig 的定义是什么呢？

export interface EmailConfig extends CommonProviderOptions {
    type: "email";
    server: string | SMTPTransportOptions;
    from?: string;
    maxAge?: number;
    sendVerificationRequest: (params: SendVerificationRequestParams) => Awaitable;
    generateVerificationToken?: () => Awaitable;
    secret?: string;
    normalizeIdentifier?: (identifier: string) => string;
    options: EmailUserConfig;
}

• 根据上面的定义，就可以知道如果要重新完全可以在 [...nextauth].ts 这个文件重新定义 generateVerificationToken 的回调来完成高度自治：
  
  image.png

• 大致就是这个样子的一个结构：

  
  
  image.png

结束

• 接下来介绍 Client API