如何使用 Thirdweb 添加 web3 登录

2023-12-13 阅读: 评论: 约 1282 字预计阅读 3 分钟

介绍

为什么使用 web3 登录？

使用以太坊登录可以让您使用钱包安全登录并在后端验证钱包！我们将使用 Thirdweb Auth，它使用非常流行的 JWT 标准！JSON Web Token (JWT) 是一种开放标准，它定义了一种紧凑且独立的方式，用于在各方之间以 JSON 对象的形式安全地传输信息。

设置

创建 Next.js 应用程序

我将在本指南中使用Next typescript 入门模板。

如果您按照指南进行操作，则可以使用thirdweb CLI使用 Next TypeScript 模板创建项目：

1

npx thirdweb create --next --ts

如果您已经有 Next.js 应用程序，您只需按照以下步骤即可开始使用：

安装@thirdweb-dev/react和@thirdweb-dev/sdk和ethers
将 MetaMask 身份验证添加到站点。您可以按照本指南来执行此操作。

设置 ThirdWeb 身份验证

首先，我们需要安装thirdweb auth包：

1
2
3


npm i @thirdweb-dev/auth # npm

yarn add @thirdweb-dev/auth # yarn

auth.config.ts现在，创建一个名为以下内容的文件：

1
2
3
4
5
6


import { ThirdwebAuth } from "@thirdweb-dev/auth/next";

export const { ThirdwebAuthHandler, getUser } = ThirdwebAuth({
  privateKey: process.env.PRIVATE_KEY as string,
  domain: "example.org",
});

使用您的网站 URL 和私钥更新域，创建一个新.env.local文件并添加一个名为的新变量PRIVATE_KEY。了解如何从钱包导出私钥。

要配置 auth api，请在其中创建一个pages/api名为 auth 的新文件夹并[...thirdweb].ts在其中创建文件！这里我们需要导出我们创建的thirdwebHandler！

1
2
3


import { ThirdwebAuthHandler } from "../../../auth.config";

export default ThirdwebAuthHandler();

最后，在_app.tsx文件内，将 authConfig 属性添加到ThirdwebProvider：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


  <ThirdwebProvider
      desiredChainId={activeChainId}
      authConfig={{
        authUrl: "/api/auth",
        domain: "example.org",
        loginRedirect: "/",
      }}
    >
      <Component {...pageProps} />
    </ThirdwebProvider>

构建前端

在里面pages/index.tsx用以下内容更新 return 语句：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


return (
    <div>
      {address ? (
        <button onClick={() => login()}>
          Sign in with Ethereum
        </button>
      ) : (
        <ConnectWallet />
      )}
    </div>
  );

我们将使用useAddress和useLogin钩子来获取登录函数和用户地址：

1
2


  const address = useAddress();
  const login = useLogin();

这将为我们的网站添加以太坊登录！现在我们需要检查用户是否存在，因此为此从钩子中获取用户，useUser如下所示：

1

  const user = useUser();

我们将检查用户是否存在，如果存在我们将返回：

1
2
3
4
5
6
7
8


if (user.user) {
  return (
    <div>
      <p>You are signed in as {user.user.address}</p>
      <button>Validate user</button>
    </div>
  );
}

创建用于验证的 api

现在让我们创建一个 api 来获取后端的用户详细信息（地址）！因此，创建一个名为validate.tsinside的新文件pages/api并添加以下内容：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


import type { NextApiRequest, NextApiResponse } from "next";
import { getUser } from "../../auth.config";

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  if (req.method === "POST") {
    const thirdwebUser = await getUser(req);

    if (thirdwebUser?.address) {
      return res.status(200).json({
        message: `You are signed in as ${thirdwebUser.address}`,
      });
    }
    return res.status(401).json({ message: "Account not validated" });
  }
  return res.status(405).json({ message: "Method not allowed" });
};

export default handler;

在这里，我们使用 ThirdWeb 的 getUser 方法来获取用户的地址，如果存在，我们会发送一条消息“您已作为地址登录”。

调用前端API

创建一个新函数，如下handleClick所示pages/index.tsx：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


  const handleClick = async () => {
    try {
      const response = await fetch("/api/validate", {
        method: "POST",
      });

      const data = await response.json();
      alert(data.message);
    } catch (error) {
      console.log(error);
    }
  };

并将此函数附加到验证按钮的 onClick 上：

1

<button onClick={handleClick}>Validate user</button>

演示视频：

https://www.loom.com/share/7f637c53db6b4cf6a380ff8e113bf765?sid=7bcbcf04-de92-4770-840d-bf17c46f3dd0

结论

希望您通过本指南学会了如何将 web3 登录添加到您令人惊叹的 Dapp 中！

有用的链接

GitHub 仓库

Thirdweb Auth

原文：https://blog.avneesh.tech/how-to-add-web3-sign-in-with-thirdweb

目录