跳转到内容
搜索文档

魔术链接身份验证

使用通过邮件发送的魔术链接、JWT 令牌和会话管理实现无密码登录系统。

最后更新 查看 MarkdownAgent 设置

本示例演示如何使用 Cloudflare Email Service 发送用于无密码身份验证的魔术链接邮件。

在 Wrangler 配置文件中配置邮件绑定:

{
	"send_email": [{ "name": "EMAIL" }],
	"vars": {
		"DOMAIN": "yourdomain.com",
	},
}
[[send_email]]
name = "EMAIL"

[vars]
DOMAIN = "yourdomain.com"

该 Worker 公开 POST /send-magic-link 路由,用于验证提交的电子邮件地址、生成一次性令牌,并向收件人发送有时限的登录链接。以下代码实现了该处理程序。

interface Env {
	EMAIL: SendEmail;
	DOMAIN: string;
}

export default {
	async fetch(request: Request, env: Env): Promise<Response> {
		const url = new URL(request.url);

		if (url.pathname === "/send-magic-link" && request.method === "POST") {
			return handleSendMagicLink(request, env);
		}

		return new Response("Not Found", { status: 404 });
	},
};

async function handleSendMagicLink(
	request: Request,
	env: Env,
): Promise<Response> {
	const { email } = await request.json();

	if (!email || !isValidEmail(email)) {
		return new Response(JSON.stringify({ error: "Invalid email" }), {
			status: 400,
		});
	}

	// Generate a simple secure token (you would implement proper JWT/token handling)
	const token = crypto.randomUUID();
	const magicUrl = `https://${env.DOMAIN}/login?token=${token}`;

	// Send magic link email
	await env.EMAIL.send({
		to: email,
		from: `noreply@${env.DOMAIN}`,
		subject: "Your login link",
		html: `
			<h1>Login to your account</h1>
			<p>Click the link below to log in:</p>
			<p><a href="${magicUrl}">Login Now</a></p>
			<p>This link expires in 15 minutes.</p>
		`,
		text: `
			Login to your account
			
			Click this link to log in: ${magicUrl}
			
			This link expires in 15 minutes.
		`,
	});

	return new Response(
		JSON.stringify({
			success: true,
			message: "Magic link sent to your email",
		}),
	);
}

function isValidEmail(email: string): boolean {
	return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

后续步骤

这篇文档对您有帮助吗?