Rainbow logo
RainbowKit
2.2.10

Xác thực Tùy chỉnh

Xác thực Tùy chỉnh

Kết nối với hệ thống lưng xác thực của riêng bạn

Trong khi RainbowKit cung cấp hỗ trợ hàng đầu cho Đăng nhập với Ethereum và NextAuth, bạn cũng có thể tích hợp với các back-end và định dạng tin nhắn tùy chỉnh.

Đầu tiên tạo một bộ chuyển đổi xác thực. Điều này cho phép RainbowKit tạo/chuẩn bị tin nhắn và giao tiếp với hệ thống lưng của bạn.

Ví dụ, chúng ta có thể tạo một bộ chuyển đổi xác thực cho phép chúng ta sử dụng Đăng nhập với Ethereum trên một số điểm cuối API tùy chỉnh, như 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');
},
});

Giả sử ứng dụng của bạn đã quản lý vòng đời xác thực theo cách nào đó, bạn có thể truyền trạng thái xác thực hiện tại cùng với bộ chuyển đổi tùy chỉnh của bạn vào RainbowKitAuthenticationProvider, bao bọc RainbowKitProvider hiện tại của bạn.

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

Nếu bạn đã đi xa đến mức này và tạo bộ chuyển đổi cho thư viện xác thực mã nguồn mở hiện có, vui lòng cân nhắc tạo một gói cho những người khác sử dụng!