Hướng dẫn sử dụng SIWE: Tăng cường chức năng Dapp của bạn

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

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 như Solana, SUI, v.v.

Dự án của bạn có cần SIWE không?

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

• Sở hữu hệ thống người dùng của riêng mình
• Cần tra cứu thông tin liên quan đến quyền riêng tư của người dùng

Nhưng nếu Dapp của bạn chủ yếu là chức năng tra cứu, giống như etherscan, thì có thể không cần sử dụng SIWE.

Bạn có thể hỏi, sau khi kết nối ví trên Dapp, không phải là đã thể hiện quyền sở hữu ví rồi sao? Câu nói này không hoàn toàn chính xác. Đối với phía trước, việc kết nối ví thực sự thể hiện danh tính, nhưng đối với các cuộc gọi API cần hỗ trợ từ phía sau, chỉ việc truyền địa chỉ là không đủ để chứng minh danh tính, vì địa chỉ là thông tin công khai, bất kỳ ai cũng có thể sử dụng.

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

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

Kết nối ví

Đây là 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ý của SIWE bao gồm lấy giá trị Nonce, ký ví và xác minh chữ ký phía backend.

Để lấy giá trị Nonce, bạn cần gọi API backend. Backend sẽ tạo ra giá trị Nonce ngẫu nhiên và liên kết với địa chỉ hiện tại, chuẩn bị cho việc ký sau này.

Sau khi lấy giá trị Nonce từ phía trước, xây dựng nội dung chữ ký, bao gồm giá trị Nonce, tên miền, ID chuỗi và nội dung chữ ký, thường sử dụng phương pháp do ví cung cấp để thực hiện chữ ký.

Sau khi xây dựng chữ ký xong, hãy gửi nó cho backend.

Lấy danh tính

Sau khi kiểm tra chữ ký ở phía backend thành công, trả về nhận dạng người dùng, chẳng hạn như JWT. Khi thực hiện các yêu cầu tiếp theo từ phía frontend, mang theo địa chỉ và nhận dạng người dùng để chứng minh quyền sở hữu ví.

Thực hành

Chúng tôi sẽ sử dụng Next.js để phát triển một ứng dụng full-stack, tích hợp chức năng SIWE. Lưu ý, demo này chỉ dùng để trình diễn quy trình cơ bản, không phù hợp để sử dụng trực tiếp trong môi trường sản xuất.

công việc chuẩn bị

Đảm bảo đã cài đặt môi trường Node.js.

Cài đặt phụ thuộc

Đầu tiên cài đặt Next.js:

npx create-next-app@14

Hoàn thành cài đặt theo hướng dẫn.

Vào thư mục dự án, chạy dự án:

npm run dev

Truy cập localhost:3000 để xem dự án Next.js cơ bản.

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

Chúng tôi chọn sử dụng Ant Design Web3 vì nó miễn phí, được bảo trì liên tục, trải nghiệm người dùng tốt và hỗ trợ SIWE.

Cài đặt phụ thuộc:

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

Giới thiệu Wagmi

Nhập các Provider liên quan trong layout.tsx:

typescript "use client"; import { getNonce, verifyMessage } from "@/app/api"; import { Mạng chính, MetaMask, OkxWallet, TokenPocket, WagmiWeb3ConfigProvider, WalletConnect, } từ "@ant-design/web3-wagmi"; import { QueryClient } from "@tanstack/react-query"; import React từ "react"; import { createSiweMessage } from "viem/siwe"; import { http } từ "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 siweconfig="｛｛" getnonce:="" async="" (address)=""> (chờ getNonce(đị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} ); };

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

Thêm nút kết nối ví:

typescript "sử dụng khách hàng"; import type { Account } from "@ant-design/web3"; import { ConnectButton, Connector } from "@ant-design/web3"; import { Flex, Space } from "antd"; import React từ "react"; import { JwtProvider } from "./JwtProvider";

xuất khẩu hàm mặc định 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

Nonce

Tạo Nonce ngẫu nhiên và liên kết với địa chỉ:

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

xuất async chức năng 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, }); }

xác minh tin nhắn

Xác thực chữ ký và trả về JWT:

typescript import { createPublicClient, http } from "viem"; import { mainnet } từ "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

Để tăng tốc độ xác thực, nên sử dụng dịch vụ nút chuyên dụng. Có thể sử dụng dịch vụ nút của ZAN, sau khi nhận được kết nối RPC, hãy thay thế RPC mặc định trong mã.

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ể cải thiện đáng kể tốc độ phản hồi của giao diện.