Pengesahan Tersuai

Sambung ke belakang pengesahan anda sendiri

Walaupun RainbowKit menyediakan sokongan kelas pertama untuk Daftar Masuk dengan Ethereum dan NextAuth, anda juga boleh mengintegrasikan dengan latar belakang dan format mesej tersuai.

Mencipta penyesuai tersuai

Mula-mula cipta penyesuai pengesahan. Ini membolehkan RainbowKit membuat/menyediakan mesej dan berkomunikasi dengan belakang anda.

Sebagai contoh, kita boleh membuat penyesuai pengesahan yang membolehkan kita menggunakan Daftar Masuk dengan Ethereum terhadap beberapa titik akhir API tersuai, seperti iron-session.

import { createAuthenticationAdapter } from '@rainbow-me/rainbowkit';
import { createSiweMessage } from 'viem/siwe';

const authenticationAdapter = createAuthenticationAdapter({
  getNonce: async () => {
    const response = await fetch('/api/nonce');
    return await response.text();
  },

  createMessage: ({ nonce, address, chainId }) => {
    return createSiweMessage({
      domain: window.location.host,
      address,
      statement: 'Sign in with Ethereum to the app.',
      uri: window.location.origin,
      version: '1',
      chainId,
      nonce,
    });
  },

  verify: async ({ message, signature }) => {
    const verifyRes = await fetch('/api/verify', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ message, signature }),
    });

    return Boolean(verifyRes.ok);
  },

  signOut: async () => {
    await fetch('/api/logout');
  },
});

createMessage juga menyokong pemulangan Promise, membolehkan anda membina mesej EIP-4361 di pelayan. Untuk keselamatan yang lebih ketat, titik akhir pelayan harus mendapatkan atau mengesahkan medan kritikal keselamatan seperti cap waktu domain, nonce, dan issued-at dan bukannya mempercayai nilai yang disediakan oleh klien. Lihat dokumentasi SIWE untuk maklumat lanjut.

  createMessage: async ({ address, chainId }) => {
    const response = await fetch('/api/siwe/message', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ address, chainId }),
    });

    if (!response.ok) {
      throw new Error('Failed to create message');
    }

    return await response.text();
  },

Menyediakan status pengesahan

Mengandaikan aplikasi anda sudah menguruskan kitaran hayat pengesahan dengan cara tertentu, anda boleh menghantar status pengesahan semasa bersama penyesuai tersuai anda kepada RainbowKitAuthenticationProvider, membungkus RainbowKitProvider sedia ada anda.

import {
  createAuthenticationAdapter,
  RainbowKitAuthenticationProvider,
  RainbowKitProvider,
} from '@rainbow-me/rainbowkit';
import { AppProps } from 'next/app';
import { WagmiProvider } from 'wagmi';
import {
  QueryClient,
  QueryClientProvider,
} from '@tanstack/react-query';

const authenticationAdapter = createAuthenticationAdapter({
  /* See above... */
});

const queryClient = new QueryClient();

export default function App({ Component, pageProps }: AppProps) {
  // You'll need to resolve AUTHENTICATION_STATUS here
  // using your application's authentication system.
  // It needs to be either 'loading' (during initial load),
  // 'unauthenticated' or 'authenticated'.

  return (
    <WagmiProvider {...etc}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitAuthenticationProvider
          adapter={authenticationAdapter}
          status={AUTHENTICATION_STATUS}
        >
          <RainbowKitProvider {...etc}>
            <Component {...pageProps} />
          </RainbowKitProvider>
        </RainbowKitAuthenticationProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

Jika anda sudah sampai sejauh ini dan mencipta penyesuai untuk perpustakaan pengesahan sumber terbuka sedia ada, sila pertimbangkan untuk mencipta pakej untuk orang lain gunakan!

Tinjauan

Memulakan

Lanjutan

Pengesahan Tersuai

Sambung ke belakang pengesahan anda sendiri

Mencipta penyesuai tersuai

Penciptaan mesej pelayan-sisi

Menyediakan status pengesahan