SIWE：Công cụ mạnh mẽ để đă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 phát động giao dịch, nó chứng minh quyền kiểm soát của người dùng đối với ví thông qua chữ ký. Hiện tại, hầu hết các plugin ví chính thống đều đã hỗ trợ phương thức xác thực đơn giản này.

Bài viết này chủ yếu thảo luận về các tình huống 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 SIWE?

Nếu Dapp của bạn có những yêu cầu sau, bạn có thể xem xét việ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 quyền riêng tư của 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 cần SIWE.

Mặc dù việc kết nối bằng ví có thể chứng minh danh tính ở phía trước, nhưng đối với các cuộc gọi API 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ể sử dụng.

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

kết nối ví

Đây là thao tác thường gặp trong ứng dụng Web3, kết nối ví của người dùng qua plugin ví.

chữ ký

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

Đầu tiên, lấy giá trị Nonce ngẫu nhiên được tạo từ phía backend, backend sẽ liên kết nó với địa chỉ hiện tại.

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

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 backend thành công, sẽ trả về danh tính người dùng ( như JWT). Khi gửi yêu cầu tiếp theo từ phía 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

Dưới đây, chúng ta sẽ thực hành quy trình cơ bản của SIWE thông qua một Demo đơn giản, với mục tiêu là để Dapp có thể trả về JWT dùng để xác thực danh tính.

Lưu ý: Demo này chỉ được sử dụng để trình bày quy trình cơ bản, việc sử dụng trong môi trường sản xuất có thể có rủi ro về an ninh.

công việc chuẩn bị

Chúng tôi sử dụng Next.js để phát triển ứng dụng full-stack, cần chuẩn bị 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

Hoàn thành cài đặt theo hướng dẫn.

Vào thư mục dự án và khởi động:

npm run dev

Truy cập localhost:3000 có thể 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ử dụng Ant Design Web3 để kết nối ví và thực hiện 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

Trong layout.tsx, nhập 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 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, chữ ký)).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}
</wagmiweb3configprovider>

); };

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

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ở về Đăng nhập như ${ellipsisAddress}; };

return ( <>

Như vậy đã thiết lập được một khung đăng nhập SIWE cơ bản.

triển khai giao diện

Bây giờ hãy thực hiện một số giao diện cần thiết cho backend.

Nonce

Tạo Nonce ngẫu nhiên và liên kết với địa chỉ:

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

verifyMessage

Xác thực chữ ký và trả về JWT:

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 thời hạn tương ứng.

const publicClient = createPublicClient({ chuỗi: mainnet, vận chuyển: 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("Chữ ký không hợp lệ"); }

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

Đến đây, một Dapp đăng nhập SIWE cơ bản đã được phát triển xong.

Tối ưu hóa hiệu suất

Để cải thiện tốc độ xác thực, chúng tôi khuyên bạn nên sử dụng dịch vụ nút chuyên dụng. Ở đây chúng tôi sử dụng dịch vụ nút của ZAN, thay thế RPC mặc định của publicClient:

javascript const publicClient = createPublicClient({ chuỗi: mainnet, transport: http('), //thay thế bằng RPC dịch vụ nút ZAN nhận được });

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