Pengesahan Tersuai

Sambungkan kepada pengesahan latar belakang anda sendiri

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

Mewujudkan penyesuai tersuai

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

Sebagai contoh, kita boleh membuat penyesuai pengesahan yang membenarkan kita menggunakan Log 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');
  },
});

Menyediakan keadaan pengesahan

Dengan mengandaikan aplikasi anda sudah mengurus kitaran hayat pengesahan dengan cara tertentu, anda boleh menghantar status pengesahan semasa bersama penyesuai tersuai anda kepada RainbowKitAuthenticationProvider, menyarung RainbowKitProvider sedia ada anda.

import {
  createAuthenticationAdapter,
  RainbowKitAuthenticationProvider,
  RainbowKitProvider,
} from '@rainbow-me/rainbowkit';
import { AppProps } from 'next/app';
import { WagmiProvider } from 'wagmi';
import {
  QueryClientProvider,
  QueryClient,
} 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 telah sampai ke tahap ini dan mencipta penyesuai untuk perpustakaan pengesahan sumber terbuka yang sedia ada, sila pertimbangkan untuk mencipta pakej untuk digunakan oleh orang lain!

Tinjauan

Memulakan

Lanjutan

Pengesahan Tersuai

Sambungkan kepada pengesahan latar belakang anda sendiri

Mewujudkan penyesuai tersuai

Menyediakan keadaan pengesahan