Ứng dụng và thực tiễn của SIWE trong các ứng dụng Web3

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

Tình huống áp dụng của SIWE

SIWE chủ yếu được sử dụng để giải quyết vấn đề xác thực danh tính của địa chỉ ví. Nếu ứng dụng của bạn có các yêu cầu sau, bạn có thể xem xét việ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 quyền riêng tư của người dùng

Đối với các ứng dụng chủ yếu dựa trên chức năng truy vấn, như trình duyệt blockchain, có thể không sử dụng SIWE.

Mặc dù việc kết nối ví có thể xác nhận danh tính ở giao diện ứng dụng, nhưng đối với các cuộc gọi API cần hỗ trợ từ phía backend, chỉ truyền địa chỉ là không đủ, vì địa chỉ là thông tin công khai và dễ bị người khác đánh cắp.

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

Quy trình của 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à thao tác Web3 phổ biến, kết nối ví trong ứng dụng thông qua plugin ví.

chữ ký

Các bước ký bao gồm lấy giá trị Nonce, ký ví và xác minh chữ ký phía backend.

1. Lấy giá trị Nonce: Gọi API backend để lấy giá trị Nonce ngẫu nhiên và liên kết với địa chỉ hiện tại.

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

3. Gửi chữ ký: Gửi chữ ký đến backend để xác thực.

Lấy định danh

Sau khi xác thực chữ ký ở phía backend 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 frontend 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

Dưới đây là hướng dẫn cách nhanh chóng tích hợp SIWE vào ứng dụng, mục tiêu là trả về JWT để xác thực danh tính người dùng. Lưu ý, ví dụ này chỉ dùng để trình bày quy trình cơ bản, việc sử dụng trong môi trường sản xuất có thể có rủi ro về an ninh.

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

Bài viết này sử dụng Next.js để phát triển ứng dụng toàn diện, cần chuẩn bị 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

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

npm run dev

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

cấu hình Wagmi

Nhập WagmiProvider vào layout.tsx:

javascript "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 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(đị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

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";

xuất khẩu chức năng 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)} : ""; đăng nhập dưới dạng ${ellipsisAddress}; };

trả về ( <>

triển khai giao diện

Giao diện Nonce

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

export 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(địa chỉ, nonce); return Response.json({ dữ liệu: nonce, }); }

Giao diện xác thực tin nhắn

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"; // Vui lòng sử dụng khóa an toàn hơn và thêm kiểm tra hết hạn

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

xuất async function POST(yêu cầu: 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ý, });

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, }); }

Tối ưu hóa hiệu suất

Để cải thiện tốc độ phản hồi của đăng nhập SIWE, nên sử dụng dịch vụ nút chuyên dụng thay vì nút RPC mặc định. Bài viết này sử dụng dịch vụ nút của ZAN, có thể lấy kết nối RPC từ bảng điều khiển của nó.

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 minh và tăng tốc độ giao diện.