Otentikasi Kustom
Otentikasi Kustom
Hubungkan ke backend otentikasi Anda sendiri
Sementara RainbowKit menyediakan dukungan kelas satu untuk Sign-In dengan Ethereum dan NextAuth, Anda juga dapat mengintegrasikan dengan backend dan format pesan kustom.
Pertama buat adaptor otentikasi. Ini memungkinkan RainbowKit untuk membuat/mempersiapkan pesan dan berkomunikasi dengan backend Anda.
Sebagai contoh, kami dapat membuat adaptor otentikasi yang memungkinkan kami menggunakan Sign-In dengan Ethereum terhadap beberapa titik akhir API kustom, 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 mendukung pengembalian Promise, memungkinkan Anda untuk membuat pesan EIP-4361 di server. Untuk keamanan yang lebih ketat, endpoint server seharusnya menentukan atau memvalidasi bidang-bidang yang penting untuk keamanan seperti domain, nonce, dan stempel waktu issued-at daripada mempercayai nilai yang disediakan oleh klien. Lihat dokumentasi SIWE untuk lebih detailnya.
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();
},
Dengan asumsi aplikasi Anda sudah mengelola siklus hidup otentikasi dengan cara tertentu, Anda dapat mengoperkan status otentikasi saat ini bersamaan dengan adaptor kustom Anda ke RainbowKitAuthenticationProvider, mengemas RainbowKitProvider yang ada.
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({
});
const queryClient = new QueryClient();
export default function App({ Component, pageProps }: AppProps) {
return (
<WagmiProvider {...etc}>
<QueryClientProvider client={queryClient}>
<RainbowKitAuthenticationProvider
adapter={authenticationAdapter}
status={AUTHENTICATION_STATUS}
>
<RainbowKitProvider {...etc}>
<Component {...pageProps} />
</RainbowKitProvider>
</RainbowKitAuthenticationProvider>
</QueryClientProvider>
</WagmiProvider>
);
}
Jika Anda telah mencapai tahap ini dan membuat adaptor untuk perpustakaan otentikasi sumber terbuka yang ada, mohon pertimbangkan untuk membuat paket untuk digunakan orang lain!
