Hướng dẫn triển khai công nghệ SIWE: Xây dựng hệ thống xác thực danh tính Dapp mạnh mẽ

SIWE(Đăng Nhập bằng Ethereum) là một cách xác thực danh tính người dùng trên Ethereum, tương tự như khởi tạo giao dịch, chứng minh quyền kiểm soát ví của người dùng. Hiện tại, các plugin ví chính thống đều hỗ trợ phương pháp xác thực danh tính đơn giản này, chỉ cần ký trong plugin là đủ.

Bài viết này chủ yếu thảo luận về các tình huống ký trên Ethereum, không đề cập đến các chuỗi công khai khác.

Khi nào cần sử dụng SIWE

Nếu Dapp của bạn có những yêu cầu sau, bạn có thể cân nhắc sử dụng SIWE:

• Có hệ thống người dùng độc lập
• Cần tra cứu thông tin liên quan đến danh tính người dùng

Đối với các ứng dụng chủ yếu là tra cứu, như trình duyệt khối tương tự etherscan, thì có thể không sử dụng SIWE.

Mặc dù việc kết nối ví trên giao diện Dapp dường như đã chứng minh danh tính, nhưng đối với các cuộc gọi giao diện cần hỗ trợ từ phía back-end, chỉ việc truyền địa chỉ là không đủ, vì địa chỉ là thông tin công khai và dễ bị giả mạo.

Nguyên lý và quy trình của SIWE

Quy trình SIWE có thể được tóm tắt thành ba bước: kết nối ví, ký tên, lấy danh tính.

kết nối ví

Đây là một thao tác Web3 phổ biến, kết nối ví trong Dapp thông qua plugin ví.

chữ ký

Bao gồm ba bước: lấy giá trị Nonce, ký ví và kiểm tra chữ ký phía sau.

1. Lấy giá trị Nonce ngẫu nhiên được tạo từ phía backend, liên kết với địa chỉ hiện tại.

2. Xây dựng nội dung chữ ký phía trước, bao gồm giá trị Nonce, tên miền, ID chuỗi và các thông tin khác, sử dụng phương pháp do ví cung cấp để ký.

3. Gửi chữ ký đến backend để kiểm tra.

Lấy danh tính

Sau khi kiểm tra chữ ký ở phía sau thành công, trả về danh tính người dùng ( như JWT ). Các yêu cầu tiếp theo ở phía trước mang theo địa chỉ và danh tính, có thể chứng minh quyền sở hữu ví.

Hướng dẫn thực hành

Sau đây sẽ giới thiệu cách thực hiện chức năng SIWE trong dự án Nextjs, trả về JWT để xác thực danh tính.

chuẩn bị môi trường

1. Cài đặt Nextjs:

npx create-next-app@14

2. Cài đặt các phụ thuộc liên quan đến SIWE:

npm install antd @ant-design/web3 @ant-design/web3-wagmi wagmi viem @tanstack/react-query --save

giới thiệu Wagmi

Trong layout.tsx, nhập WagmiProvider:

javascript "use client"; import { getNonce, verifyMessage } from "@/app/api"; import { Mainnet, MetaMask, OkxWallet, TokenPocket, WagmiWeb3ConfigProvider, WalletConnect, } từ "@ant-design/web3-wagmi"; import { QueryClient } from "@tanstack/react-query"; import React from "react"; import { createSiweMessage } from "viem/siwe"; import { http } from "wagmi"; import { JwtProvider } from "./JwtProvider";

const YOUR_WALLET_CONNECT_PROJECT_ID = "c07c0051c2055890eade3556618e38a6"; const queryClient = new QueryClient();

const WagmiProvider: React.FC = ({ children }) => { const [jwt, setJwt] = React.useState(null);

return ( <wagmiweb3configprovider siwe="｛｛" getnonce:="" async="" (address)="">

      (chờ lấy nonce(địa chỉ)).dữ liệu,
    createMessage: (props) => {
      return createSiweMessage({ ...props, statement: "Ant Design Web3" });
    },
    verifyMessage: async (message, signature) => {
      const jwt = (await verifyMessage(message, signature)).data;
      setJwt(jwt);
      return !!jwt;
    },
  ｝｝
  chains={[Mainnet]}
  transports=｛｛
    [Mainnet.id]: http(),
  ｝｝
  walletConnect=｛｛
    projectId: YOUR_WALLET_CONNECT_PROJECT_ID,
  ｝｝
  ví={[ 
    MetaMask(),
    WalletConnect(),
    TokenPocket({
      nhóm: "Phổ biến",
    }),
    OkxWallet(),
  ]}
  queryClient={queryClient}
>
  {children}
</wagmiweb3configprovider>

); };

xuất khẩu mặc định WagmiProvider;

thêm nút kết nối

Thêm nút kết nối ví và nút ký vào thành phần:

javascript "use client"; import type { Account } from "@ant-design/web3"; import { ConnectButton, Connector } from "@ant-design/web3"; import { Flex, Space } from "antd"; import React from "react"; import { JwtProvider } from "./JwtProvider";

export default function App() { const jwt = React.useContext(JwtProvider);

const renderSignBtnText = ( defaultDom: React.ReactNode, tài khoản?: Tài khoản ) => { const { address } = account ?? {}; const ellipsisAddress = address ? ${address.slice(0, 6)}...${address.slice(-6)} : ""; trở về Đăng nhập với ${ellipsisAddress}; };

return ( <>

thực hiện giao diện

Giao diện Nonce

javascript import { randomBytes } from "crypto"; import { addressMap } from "../cache";

xuất async hàm GET(yêu cầu: Yêu cầu) { const { searchParams } = new URL(request.url); const address = searchParams.get("address");

nếu (!address) { throw new Error("Địa chỉ không hợp lệ"); } const nonce = randomBytes(16).toString("hex"); addressMap.set(address, nonce); return Response.json({ dữ liệu: nonce, }); }

Giao diện xác thực chữ ký

javascript import { createPublicClient, http } from "viem"; import { mainnet } from "viem/chains"; import jwt từ "jsonwebtoken"; import { parseSiweMessage } from "viem/siwe"; import { addressMap } from "../cache";

const JWT_SECRET = "your-secret-key";

const publicClient = createPublicClient({ chuỗi: mainnet, vận chuyển: http(), });

xuất async function POST(request: Request) { const { signature, message } = await request.json();

const { nonce, address = "0x" } = parseSiweMessage(message);

nếu (!nonce || nonce !== addressMap.get(address)) { throw new Error("Invalid nonce"); }

const valid = await publicClient.verifySiweMessage({ thông điệp, địa chỉ, chữ ký, });

nếu (!valid) { throw new Error("Chữ ký không hợp lệ"); }

const token = jwt.sign({ address }, JWT_SECRET, { expiresIn: "1h" }); return Response.json({ dữ liệu: token, }); }

Đề xuất tối ưu hóa

Để cải thiện tốc độ đăng nhập SIWE, nên sử dụng dịch vụ nút chuyên dụng. Lấy ví dụ dịch vụ nút ZAN, sau khi lấy kết nối RPC HTTPS của mạng chính Ethereum, thay thế RPC mặc định của publicClient:

javascript const publicClient = createPublicClient({ chuỗi: mainnet, vận chuyển: http('), //Dịch vụ RPC nút ZAN });

Điều này có thể giảm đáng kể thời gian xác thực và tăng tốc độ phản hồi của giao diện.