SIWE: Cách xác thực danh tính mạnh mẽ hơn cho DApp của bạn

SIWE(Đăng nhập bằng Ethereum) là một phương pháp xác thực danh tính người dùng trên Ethereum, tương tự như việc khởi tạo giao dịch, chứng minh người dùng kiểm soát ví. Hiện tại, hầu hết các tiện ích ví đều hỗ trợ phương thức xác thực danh tính đơn giản này, chỉ cần ký thông tin trong tiện ích. 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.

Dự án có cần SIWE không?

Nếu DApp của bạn có các nhu cầu sau, có thể xem xét sử dụng SIWE:

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

Nhưng nếu DApp của bạn chủ yếu là chức năng tra cứu, như các ứng dụng kiểu etherscan, thì không nhất thiết phải cần SIWE.

Mặc dù việc kết nối ví trên DApp đại diện cho quyền sở hữu ví, nhưng điều này chỉ có hiệu lực ở phía trước. Đối với các cuộc gọi giao diện cần hỗ trợ phía sau, chỉ việc truyền địa chỉ không thể chứng minh danh tính, vì địa chỉ là thông tin công khai.

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ý

Các bước ký bao gồm lấy giá trị Nonce, ký ví và kiểm tra chữ ký từ backend.

Đầu tiên gọi API backend để lấy giá trị Nonce, backend sẽ sinh ra một Nonce ngẫu nhiên và liên kết với địa chỉ. Frontend nhận Nonce sau đó xây dựng nội dung chữ ký, bao gồm Nonce, tên miền, ID chuỗi, v.v., sử dụng phương pháp do ví cung cấp để ký, sau đó gửi chữ ký đến backend.

Lấy danh tính

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

Thực hành SIWE

Chúng tôi sẽ phát triển một DApp hỗ trợ SIWE bằng Next.js, mục tiêu là trả về JWT để xác thực danh tính.

công việc chuẩn bị

1. Cài đặt Next.js:

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:

typescript "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)="">

      (await getNonce(address)).data,
    createMessage: (props) => {
      return createSiweMessage({ ...props, statement: "Ant Design Web3" });
    },
    verifyMessage: async (message, signature) => {
      const jwt = (await verifyMessage(message, chữ ký)).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}
>
  <jwtprovider.provider value="{jwt}">{children}</jwtprovider.provider>
</wagmiweb3configprovider>

); };

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

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

typescript "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)} : ""; đăng nhập dưới danh tính ${ellipsisAddress}; };

return ( <>

thực hiện giao diện

Giao diện Nonce

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

xuất async function GET(request: Request) { 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 tin nhắn

typescript 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 { chữ ký, thông điệp } = 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ý, });

if (!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

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

typescript 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 độ giao diện.