การยืนยันตัวตนที่กำหนดเอง
การยืนยันตัวตนที่กำหนดเอง
เชื่อมต่อกับระบบการยืนยันตัวตนของคุณเอง
ในขณะที่ RainbowKit มี การสนับสนุนระบบยืนยันตัวตนด้วย Ethereum และ NextAuth อยู่แล้ว คุณยังสามารถรวมระบบยืนยันตัวตนกับ back-ends และรูปแบบข้อความที่กำหนดเองได้ก็ทำได้
เริ่มต้นด้วยการสร้างอะแดปเตอร์สำหรับการยืนยันตัวตน สิ่งนี้ช่วยให้ RainbowKit สามารถสร้าง/เตรียมข้อความและสื่อสารกับ back-end ของคุณได้
ตัวอย่างเช่น เราสามารถสร้างอะแดปเตอร์สำหรับการยืนยันตัวตนที่ทำให้เราใช้ Sign-In with Ethereum กับ endpoints ของ API ที่กำหนดเองได้ เช่น 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 ยังสามารถรองรับการคืนค่า Promise ซึ่งช่วยให้คุณสามารถสร้างข้อความ EIP-4361 บนเซิร์ฟเวอร์ได้ สำหรับความปลอดภัยที่เข้มงวดขึ้น จุดเชื่อมต่อในเซิร์ฟเวอร์ควรจะทำการคาดเดาหรือยืนยันข้อมูลที่สำคัญต่อความปลอดภัย เช่น domain, nonce และ เวลาประทับผ่าน issued-at แทนการเชื่อมั่นค่าต่างๆ ที่ให้โดยไคลเอนต์ ดู เอกสาร SIWE สำหรับรายละเอียดเพิ่มเติม
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();
},
หากว่าแอปพลิเคชันของคุณสามารถจัดการรอบการยืนยันตัวตนได้แล้ว คุณสามารถส่งสถานะการยืนยันปัจจุบันพร้อมกับอแดปเตอร์ไปยัง RainbowKitAuthenticationProvider เพื่อหุ้ม
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>
);
}
หากคุณทำได้จนถึงจุดนี้และสร้างอะแดปเตอร์สำหรับไลบรารีการยืนยันตัวตนแบบโอเพ่นซอร์สที่มีอยู่ โปรดพิจารณาสร้างแพ็กเกจให้คนอื่นได้ใช้ด้วย