SIWE: Công cụ mạnh mẽ để tăng cường xác thực danh tính Dapp

SIWE(Đăng nhập bằng Ethereum) là một phương pháp xác minh 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í chính thống đề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ẽ tập trung thảo luận về các kịch bản ký trên Ethereum, không đề cập đến các chuỗi công khai khác như Solana, SUI, v.v.

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ể cân nhắ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 danh tính người dùng

Đối với Dapp( chủ yếu cung cấp chức năng tra cứu như trình duyệt khối ), có thể không sử dụng SIWE.

Mặc dù việc kết nối ví trên Dapp dường như đã chứng minh được danh tính, nhưng điều này chỉ có hiệu lực đối với phía trước. Đối với các cuộ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 và dễ bị giả mạo.

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

Quy trình SIWE có thể được tóm tắt trong ba bước: Kết nối ví - Ký tên - Nhận danh tính. Hãy cùng tìm hiểu chi tiết về ba bước này.

kết nối ví

Đây là thao tác Web3 phổ biến, kết nối ví người dùng 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ý từ phía backend.

Đầu tiên cần gọi API phía sau để lấy giá trị Nonce. Phía sau 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ý sau này.

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 giá trị Nonce, tên miền, ID chuỗi và nội dung chữ ký. Sau đó sử dụng phương pháp do 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ý ở backend thành công, sẽ trả về danh tính người dùng, chẳng hạn như JWT. Khi gửi yêu cầu tiếp theo từ frontend, kèm theo địa chỉ và danh tính, có thể 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 ứng dụng SIWE đơn giản, mục tiêu là để Dapp có thể trả về JWT cho việc xác thực danh tính. Lưu ý, bản trình diễn này chỉ nhằm giới thiệu quy trình cơ bản, có thể có rủi ro bảo mật trong môi trường sản xuất.

chuẩn bị công việc

Chúng ta cần chuẩn bị môi trường Node.js và sử dụng Next.js để phát triển dự án full-stack.

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à chạy:

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 sẽ sử dụng Ant Design Web3, nó miễn phí, được duy trì liên tục, trải nghiệm sử dụng tương tự như một thư viện thành phần bình thường, và hỗ trợ SIWE. Lệnh cài đặt như sau:

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

giới thiệu Wagmi

Trong layout.tsx, nhập WagmiProvider:

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 đó thêm nút kết nối ví:

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

return ( <>

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

triển khai giao diện

Bây giờ chúng ta sẽ triển khai giao diện kiểm tra danh tính người dùng ở phía backend.

Nonce

Nonce được sử dụng để tăng cường độ tin cậy của chữ ký. Chúng tôi tạo ra chuỗi ngẫu nhiên và thiết lập liên kết với địa chỉ:

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

signMessage

signMessage thường được thực hiện bởi plugin ví, chúng tôi sử dụng phương pháp ký của Wagmi.

xác minh tin nhắn

Phía sau cần xác thực nội dung chữ ký và thực hiện kiểm tra an ninh:

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 khác

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

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

Đề xuất tối ưu

Để cải thiện tốc độ xác thực, khuyên bạn nên sử dụng dịch vụ nút chuyên dụng. Bạn có thể sử dụng dịch vụ nút của ZAN, sau khi lấy kết nối HTTPS RPC hãy thay thế RPC mặc định trong mã.

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

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