SIWE: Dapp için TANIMLAMA yetenekleri eklemek

SIWE(Ethereum ile Giriş), kullanıcı kimliğini Ethereum üzerinde doğrulamanın bir yoludur; bu, bir işlem başlatmaya benzer ve kullanıcının cüzdan üzerindeki kontrolünü kanıtlar. Mevcut durumda, çoğu cüzdan eklentisi bu basit kimlik doğrulama yöntemini desteklemektedir; yalnızca eklenti içinde bilgilerin imzalanması yeterlidir. Bu makale, Ethereum üzerindeki imza senaryolarını tartışacaktır.

SIWE Ne Zaman Gereklidir

Eğer Dapp'iniz aşağıdaki ihtiyaçlara sahipse, SWIE kullanmayı düşünebilirsiniz:

• Bağımsız bir kullanıcı sistemi sahip olmak
• Kullanıcı gizliliği ile ilgili bilgi sorgulamak gerekiyor

Sorgulama odaklı uygulamalar için, etherscan gibi, SIWE kullanılmayabilir.

Cüzdan bağlantısı aracılığıyla kimliği ön uçta belirtmek mümkün olsa da, arka uç desteği gerektiren API çağrıları için yalnızca adres ile kimlik kanıtı sağlanamaz çünkü adresler kamuya açık bilgilerdir.

SIWE'nin Prensibi ve Süreci

SIWE süreci şu şekilde özetlenebilir: Cüzdanı bağla - İmza at - TANIMLAMA al. Ayrıntılı adımlar aşağıdadır:

1. Cüzdanı Bağla: Dapp içinde cüzdan eklentisi aracılığıyla cüzdanı bağlayın.

2. İmza:

   • Nonce değerini al: Rastgele Nonce değerini almak için arka uç API'sini çağırın.
   • İmza içeriğini oluşturma: Nonce değeri, alan adı, zincir ID'si vb. dahil.
   • İçeriği imzalamak için cüzdan imzalama yöntemini kullanın.
   • İmza arka uca gönderilecek.

3. TANIMLAMA almak:

   • Arka uç, imzayı doğruladıktan sonra kullanıcı tanımlayıcısını ( olarak döndürür, örneğin JWT).
   • Sonraki istek, adres ve TANIMLAMA taşıyacak, cüzdan mülkiyetini kanıtlayacaktır.

Uygulama SIWE

Next.js kullanarak SIWE'yi destekleyen bir Dapp geliştireceğiz, hedefimiz kullanıcı TANIMLAMA doğrulaması için JWT döndürmektir.

HAZIRLIK ÇALIŞMASI

1. Next.js'i kurun:

npx create-next-app@14

2. SIWE ile ilgili bağımlılıkları yükleyin:

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

SIWE'yi gerçekleştirin

1. layout.tsx içinde WagmiProvider'ı içe aktarın:

javascript "kullanıcıyı kullan"; import { getNonce, verifyMessage } from "@/app/api"; import { Ana ağ, MetaMask, OkxWallet, TokenPocket, WagmiWeb3ConfigProvider, WalletConnect, } "@ant-design/web3-wagmi"dan; 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(adres)).veri,
    createMessage: (props) => {
      return createSiweMessage({ ...props, statement: "Ant Design Web3" });
    },
    verifyMessage: async (message, signature) =\u003e {
      const jwt = (await verifyMessage(message, signature)).data;
      setJwt(jwt);
      return !!jwt;
    },
  ｝｝
  chains={[Mainnet]}
  transports=｛｛
    [Mainnet.id]: http(),
  ｝｝
  walletConnect=｛｛
    projectId: YOUR_WALLET_CONNECT_PROJECT_ID,
  ｝｝
  cüzdanlar={[
    MetaMask(),
    WalletConnect(),
    TokenPocket({
      grup: "Popüler",
    }),
    OkxWallet(),
  ]}
  queryClient={queryClient}
>
  {children}
</wagmiweb3configprovider>

); };

varsayılan olarak WagmiProvider'ı dışa aktar;

2. Bağlantı düğmesi ekle:

javascript "client kullan"; 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, hesap?: Hesap ) => { const { address } = account ?? {}; const ellipsisAddress = address ? ${address.slice(0, 6)}...${address.slice(-6)} : ""; ${ellipsisAddress} olarak oturum aç. };

return ( <> {jwt} ); }

Arayüz Uygulaması

1. Nonce arayüzü:

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

if (!address) { throw new Error("Geçersiz adres"); } const nonce = randomBytes(16).toString("hex"); addressMap.set(address, nonce); return Response.json({ veri: nonce, }); }

2. Mesaj Doğrulama Arayüzü:

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({ zincir: ana ağ, taşıma: http(), });

export async function POST(request: Request) { const { imza, mesaj } = await request.json();

const { nonce, address = "0x" } = parseSiweMessage(message);

eğer (!nonce || nonce !== addressMap.get(address)) { throw new Error("Geçersiz nonce"); }

const valid = await publicClient.verifySiweMessage({ mesaj, adres, imza, });

eğer (!geçerli) { throw new Error("Geçersiz imza"); }

const token = jwt.sign({ address }, JWT_SECRET, { expiresIn: "1s" }); return Response.json({ veri: token, }); }

Optimizasyon Önerileri

SIWE giriş doğrulama hızını artırmak için özel bir düğüm hizmeti kullanılması önerilir. publicClient'in varsayılan RPC'sini değiştirmek için ZAN düğüm hizmeti kullanılabilir:

javascript const publicClient = createPublicClient({ zincir: ana ağ, taşımacılık: http('), //ZAN düğüm hizmeti RPC });

Bu, doğrulama süresini önemli ölçüde azaltabilir ve arayüz yanıt hızını artırabilir.