SIWE: Thêm khả năng xác thực danh tính cho Dapp

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 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 pháp xác thực đơn giản này, chỉ cần ký thông tin trong plugin. Bài viết này sẽ thảo luận về các tình huống ký trên Ethereum.

Khi nào cần SIWE

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

• Có 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 ứng dụng chủ yếu là tra cứu, như etherscan, có thể không sử dụng SIWE.

Mặc dù có thể xác định danh tính qua kết nối ví ở phía trước, nhưng đối với các gọi API cần hỗ trợ phía sau, chỉ 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ể tóm tắt như sau: kết nối ví - ký - lấy danh tính. Các bước cụ thể như sau:

1. Kết nối ví: Kết nối ví trong Dapp thông qua plugin ví.

2. Chữ ký:

   • Lấy giá trị Nonce: Gọi API phía backend để lấy giá trị Nonce ngẫu nhiên.
   • Xây dựng nội dung chữ ký: bao gồm giá trị Nonce, tên miền, ID chuỗi, v.v.
   • Sử dụng phương pháp ký bằng ví để ký nội dung.
   • Gửi chữ ký đến backend.

3. Lấy danh tính:

   • Sau khi xác thực chữ ký ở phía sau, trả về danh tính người dùng ( như JWT ).
   • Yêu cầu tiếp theo mang theo địa chỉ và danh tính, chứng minh quyền sở hữu ví.

Thực hành SIWE

Chúng tôi sẽ sử dụng Next.js để phát triển một Dapp hỗ trợ SIWE, mục tiêu là trả về JWT cho việc xác minh danh tính người dùng.

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

thực hiện SIWE

1. 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 từ "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} ); };

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

2. 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 từ "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)} : ""; trở lại Đăng nhập với ${ellipsisAddress}; };

return ( <> {jwt} ); }

triển khai giao diện

1. Giao diện Nonce:

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({ dữ liệu: nonce, }); }

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

javascript import { createPublicClient, http } from "viem"; import { mainnet } from "viem/chains"; import jwt from "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ý, });

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

Để tăng tốc độ xác thực đăng nhập SIWE, nên sử dụng dịch vụ nút chuyên dụng. Có thể sử dụng dịch vụ nút ZAN, 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 thực và nâng cao tốc độ phản hồi của giao diện.