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');
},
});
createMessage cũng hỗ trợ trả về một Promise, cho phép bạn tạo thông điệp EIP-4361 trên máy chủ. Để bảo mật nghiêm ngặt hơn, điểm cuối của máy chủ nên dẫn xuất hoặc xác thực các trường quan trọng như dấu thời gian domain, nonce, và issued-at thay vì tin tưởng vào các giá trị mà khách hàng cung cấp. Xem tài liệu SIWE để biết thêm chi tiết.
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();
},
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 {
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>
);
}
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!
