SIWE: Triển khai đơn giản đăng nhập Ethereum

SIWE(Đăng nhập với 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, cho thấy người dùng có quyền kiểm soát ví đó. Hiện nay, quá trình xác thực đã rất đơn giản, chỉ cần ký thông tin trong plugin ví là đủ, hầu hết các plugin ví phổ biến đều hỗ trợ.

Bài viết này thảo luận về các kịch bản ký trên Ethereum, không đề cập đến các blockchain khác như Solana, SUI.

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

Nếu Dapp 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:

• 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ư các ứng dụng tương tự 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 việc bạ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 gọi giao diện cần hỗ trợ từ phía sau, chỉ việc truyền địa chỉ là không đủ, vì địa chỉ là thông tin công khai, bất kỳ ai cũng có thể "mượn".

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 dạng danh tính.

kết nối ví

Đây là một thao tác Web3 phổ biến, kết nối ví của bạn 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 ký hậu trường.

Để lấy giá trị Nonce, cần gọi giao diện backend. Sau khi backend nhận yêu cầu, nó 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 được 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, nội dung chữ ký, v.v. Thông thường sử dụng phương pháp ký được cung cấp bởi ví để ký nội dung.

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, sẽ trả về mã định danh người dùng tương ứng, chẳng hạn như JWT. Khi frontend gửi yêu cầu đến backend sau đó, kèm theo địa chỉ và mã định danh tương ứng, có thể 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 khung đăng nhập SIWE đơn giản. Demo này chỉ dùng để giới thiệu quy trình cơ bản của SIWE, có thể có vấn đề về an ninh trong môi trường sản xuất.

công việc chuẩn bị

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

npx create-next-app@14

Theo hướng dẫn để hoàn thành cài đặt. Sau khi vào thư mục dự án, chạy:

npm run dev

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

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

Chúng tôi sẽ sử dụng Ant Design Web3, vì nó miễn phí, được bảo trì tích cực và trải nghiệm sử dụng tương tự như thư viện thành phần thông thường, hỗ trợ SIWE.

Chạy lệnh sau để cài đặt các phụ thuộc:

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. Trong layout.tsx, hãy nhập các Provider liên quan:

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)=""> (await getNonce(address)).data, 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} ); };

export default WagmiProvider;

Sau đó định nghĩa một 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";

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)} : ""; return Đăng nhập với ${ellipsisAddress}; };

return ( <>

Thực hiện giao diện

Nonce

Nonce được sử dụng để tăng độ tin cậy của chữ ký. Thực hiện như sau:

javascript 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({ data: nonce, }); }

verifyMessage

Thực hiện xác minh chữ ký phía sau:

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"; // Hãy sử dụng một khóa an toàn hơn và thêm kiểm tra hết hạn tương ứng.

const publicClient = createPublicClient({ chuỗi: mainnet, transport: http(), });

export 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("Invalid signature"); }

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

Đề xuất tối ưu

Để cải thiện tốc độ phản hồi của giao diện, nên sử dụng dịch vụ nút chuyên dụng. Ví dụ, có thể sử dụng dịch vụ nút của ZAN để thay thế RPC mặc định của publicClient:

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

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