SIWE: Làm cho xác thực danh tính Dapp của bạn an toàn và đáng tin cậy hơ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 ví khởi tạo 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ợ phương pháp xác thực danh tính đơn giản này, chỉ cần ký thông tin trong ví.

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

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

Nếu Dapp của bạn có các 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 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 Dapp( chủ yếu dựa trên chức năng tìm kiếm như trình duyệt khối ), thì không nhất thiết phải cần SIWE.

Bạn có thể thắc mắc, khi kết nối ví với Dapp, không phải đã thể hiện quyền sở hữu ví rồi sao? Cách nói này không hoàn toàn chính xác. Đối với giao diện người dùng, việc kết nối ví thực sự có thể 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 máy chủ, chỉ việc truyền địa chỉ là không thể xác 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 - nhận danh tính. Hãy cùng tìm hiểu kỹ về ba bước này:

kết nối ví

Đây là một thao tác Web3 phổ biến, người dùng có thể kết nối ví của mình trong Dapp thông qua plugin ví.

chữ ký

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

Đầu tiên cần gọi API backend để lấy giá trị Nonce. Backend sẽ tạo ra 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ý tiếp theo.

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

Cuối cùng, gửi chữ ký đến backend để xác thực.

lấy danh tính

Sau khi xác thực chữ ký phía sau thành công, sẽ trả về mã định danh người dùng tương ứng, thường là JWT token. Phía trước trong các yêu cầu tiếp theo sẽ kèm theo địa chỉ và mã định danh, để chứng minh quyền sở hữu ví.

Thực hành SIWE

Chúng ta có thể thực hiện chức năng SIWE thông qua thao tác thực tế, mục tiêu là để Dapp có thể trả về JWT để xác thực danh tính người dùng. Cần lưu ý, demo dưới đây chỉ dùng để trình diễn quy trình cơ bản, trong môi trường sản xuất có thể tồn tại rủi ro an ninh.

công việc chuẩn bị

Bài viết này sử dụng Next.js để phát triển ứng dụng, cần chuẩn bị môi trường Node.js. Lợi ích của việc sử dụng Next.js là có thể phát triển dự án full-stack trực tiếp, không cần tách biệt frontend và backend.

cài đặt phụ thuộc

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

npx create-next-app@14

Sau khi hoàn tất cài đặt theo hướng dẫn, vào thư mục dự án và khởi động dự án:

npm run dev

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

Chúng tôi sử dụng thư viện thành phần Ant Design Web3 để thực hiện kết nối ví và chức năng SIWE:

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

Giới thiệu Wagmi

Ant Design Web3 của SIWE phụ thuộc vào thư viện Wagmi để thực hiện. Chúng tôi đã nhập các Provider liên quan trong layout.tsx, giúp toàn bộ dự án có thể sử dụng các Hooks do Wagmi cung cấp.

Đầu tiên định nghĩa cấu hình WagmiProvider:

jsx "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 siweconfig="｛｛" getnonce:="" async="" (address)=""> (await getNonce(address)).data, createMessage: (props) => { return createSiweMessage({ ...props, statement: "Ant Design Web3" }); }, xác minhTinNhắn: async (tin nhắn, chữ ký) => { 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} > <jwtprovider.provider value="{jwt}">{children}</jwtprovider.provider> ); };

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

Sau đó thêm nút kết nối ví:

jsx "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 mặc định chức năng 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ở lại Đăng nhập với ${ellipsisAddress}; };

return ( <>

Đến đây, chúng ta đã thực hiện một khung đăng nhập SIWE đơn giản.

thực hiện giao diện

Nonce

Nonce được sử dụng để tạo ra nội dung chữ ký khác nhau mỗi lần, tăng cường độ tin cậy của chữ ký. Mã thực hiện như sau:

javascript 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

Phía sau cần xác thực nội dung chữ ký và trả lại JWT để kiểm tra quyền truy cập sau này:

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

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

nếu (!valid) { throw new Error("Invalid signature"); }

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 để tăng tốc thời gian phản hồi của giao diện. Có thể sử dụng dịch vụ nút như ZAN, sau khi lấy kết nối RPC tương ứng, hãy thay thế RPC mặc định trong mã.

javascript const publicClient = createPublicClient({ chain: 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à nâng cao tốc độ giao diện.