简介：
配置邮件服务器信息：
- 推荐试用 object 形式配置，修改 .env 添加：
EMAIL_SERVER_USER=username
EMAIL_SERVER_PASSWORD=password
EMAIL_SERVER_HOST=smtp.example.com
EMAIL_SERVER_PORT=587
EMAIL_FROM=noreply@example.com
配置 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<MongoClient>
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<any> | EmailConfig | CredentialsConfig;
- 那么 EmailConfig 的定义是什么呢？
export interface EmailConfig extends CommonProviderOptions {
type: "email";
server: string | SMTPTransportOptions;
from?: string;
maxAge?: number;
sendVerificationRequest: (params: SendVerificationRequestParams) => Awaitable<void>;
generateVerificationToken?: () => Awaitable<string>;
secret?: string;
normalizeIdentifier?: (identifier: string) => string;
options: EmailUserConfig;
}
- 根据上面的定义，就可以知道如果要重新完全可以在
[...nextauth].ts这个文件重新定义 generateVerificationToken 的回调来完成高度自治：
image.png -
大致就是这个样子的一个结构：
image.png
结束
- 接下来介绍 Client API
