SIWE: Sử dụng Ethereum ký để thực hiện xác thực danh tính Dapp mạnh mẽ hơn

SIWE(Đăng nhập bằng Ethereum) là một cách xác thực danh tính người dùng trên Ethereum, tương tự như việc thực hiện giao dịch, được sử dụng để 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ợ cách xác thực chữ ký đơn giản này.

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

Nếu Dapp của bạn có những yêu cầu sau, bạn có thể xem xét 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 là tra cứu ( như etherscan ), thì không cần sử dụng SIWE.

Mặc dù việc kết nối ví trên giao diện Dapp có thể xác định danh tính, nhưng đối với các cuộc gọi giao diện cần hỗ trợ backend, 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

Quá trình cơ bản của SIWE bao gồm ba bước: kết nối ví, ký tên, lấy danh tính.

Kết nối ví

Kết nối ví của người dùng trong Dapp thông qua plugin ví.

chữ ký

Các bước ký gồm:

1. Lấy giá trị Nonce: Gọi API backend để nhận giá trị Nonce ngẫu nhiên được tạo ra.
2. Xây dựng nội dung chữ ký: bao gồm giá trị Nonce, tên miền, ID chuỗi và các thông tin khác.
3. Sử dụng ví để ký
4. Gửi chữ ký đến backend để xác thực

Lấy danh tính

Sau khi xác minh chữ ký ở phía back-end thành công, trả về danh tính người dùng ( như JWT ). Sau đó, khi yêu cầu từ phía front-end, mang theo địa chỉ và danh tính, có thể chứng minh quyền sở hữu ví.

Thực hành SIWE

Dưới đây là hướng dẫn cách triển khai SIWE trong dự án, mục tiêu là cho phép Dapp trả về JWT để xác thực danh tính người dùng.

chuẩn bị công việc

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

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

Sử dụng Ant Design Web3 để thực hiện kết nối ví:

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

giới thiệu Wagmi

Nhập WagmiProvider trong layout.tsx:

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

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;

thực hiện nút kết nối

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

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 { địa chỉ } = tài khoản ?? {}; const ellipsisAddress = address ? ${address.slice(0, 6)}...${address.slice(-6)} : ""; trở lại Đăng nhập với ${ellipsisAddress}; };

return ( <> </connector></connectbutton></space>

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

giao diện xác minh chữ ký

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

const publicClient = createPublicClient({ chain: 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

Để cải thiện tốc độ xác thực, nên sử dụng dịch vụ nút chuyên dụng để thay thế RPC mặc định. Ví dụ sử dụng dịch vụ nút ZAN:

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, nâng cao tốc độ giao diện.