你知道什么是魔术吗？魔术是一个新事物，允许您创建无密码登录。多么酷啊？
但是您知道如何使用Next.js进行魔术吗？好吧，让我们找出答案。
为什么选择Next.js？我想玩一些我在日常工作中不会使用的很酷的东西，所以我决定尝试Next.js。您可以将Magic与其他任何东西完全结合使用。他们有很好的文档和教程。
首先安装一些软件包
npm i magic-sdk@beta @magic-sdk/admin
让我们构建简单的登录表单
// login.js
const Login = () => {
const handleSubmit = useCallback(async event => {
event.preventDefault();
const elements = e.currentTarget.elements;
const email = elements.email.value;
if (email) {
const magic = new Magic(YOUR_KEY);
const didToken = await magic.auth.loginWithMagicLink({ email });
const serverUrl = window.location.origin;
const result = await fetch(`${serverUrl}/api/magic/login`, {
headers: new Headers({
Authorization: "Bearer " + didToken
}),
credentials: "same-origin",
method: "POST"
});
if (result.status === 200) {
// Route to your main page or whatever
}
}
}, []);
return (
<form onSubmit={handleSubmit}>
<input type="email" name="email" placeholder="Enter your email" />
<button type="submit">
SignUp \ Login
</button>
</form>
);
};
因此，让我们分解一下：
- 用户提交电子邮件地址。
<form onSubmit={handleSubmit}>
<input type="email" name="email" placeholder="Enter your email" />
</form>
- 我们处理此提交，如果电子邮件不为空，则创建一些Magic。
const magic = new Magic(YOUR_KEY);
您可以在Magic仪表板中获取密钥。
- 有了这个很酷的单行代码，我们将获得用户DID令牌。您可以在Magic docs中阅读有关DID令牌的更多信息。
const didToken = await magic.auth.loginWithMagicLink({ email });
魔术正在为您完成所有工作。用户唯一要做的就是检查他的电子邮件。
- 但是现在我们需要存储用户会话。为此，我们在API端点上发送POST请求。
const result = await fetch(`${serverUrl}/api/magic/login`, {
headers: new Headers({
Authorization: "Bearer " + didToken
}),
credentials: "same-origin",
method: "POST"
});
是时候查看我们的服务器端代码了
在我们的服务器上，我们需要再次创建一些魔术，但是现在使用不同的密钥。
// magic.js
import { Magic } from "@magic-sdk/admin";
export const magic = new Magic(YOUR_OTHER_KEY);
您也可以在Magic Dashboard中找到此键。
让我们处理我们的API端点。
// api/login.js
import { serialize } from "cookie";
export default async function login(req, res) {
try {
const DIDToken = req.headers.authorization.substr(6);
const issuer = magic.token.getIssuer(DIDToken);
const metadata = await magic.users.getMetadataByIssuer(issuer);
if (!metadata) {
throw new Error("No metadata from magic");
}
res.setHeader(
"Set-Cookie",
serialize("cool_cookie_name", issuer, {
// very secure cookies options
})
);
res.end();
} catch (error) {
res.status(error.status || 500).end(error.message);
}
}
我们在这里做什么：
- 我们需要请求标头中的用户DID令牌。
const DIDToken = req.headers.authorization.substr(6);
- 然后，我们从Magic获得有关用户的发行者（分散的ID）和元数据。
const issuer = magic.token.getIssuer(DIDToken);
const metadata = await magic.users.getMetadataByIssuer(issuer)
- 然后，您需要做的就是使用您喜欢的选项创建会话cookie，以存储用户会话。
res.setHeader(
"Set-Cookie",
serialize("cool_cookie_name", String(issuer), {
// very secure cookies options
})
);
瞧，现在您可以使用此会话cookie来完成您想对Next.js进行的所有操作。
如果想看完整的例子，可以签出仓库。我还对Next.js示例存储库进行了PR。
附注：这实际上是我的第一篇文章，也是第一篇英文文章。希望你喜欢。
