Xác thực

Cung cấp quyền truy cập xác thực vào ứng dụng của bạn

Bạn có thể tuỳ chọn bắt buộc người dùng ký một tin nhắn bằng ví của họ trong quá trình kết nối, chứng minh rằng họ sở hữu tài khoản đã được kết nối và cho phép bạn tạo một phiên người dùng xác thực với quyền truy cập đặc biệt vào ứng dụng của bạn.

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

Thiết lập Đăng nhập bằng Ethereum và NextAuth

Cài đặt

Cài đặt gói @rainbow-me/rainbowkit-siwe-next-auth và NextAuth v5.

npm install @rainbow-me/rainbowkit-siwe-next-auth [email protected]

Nếu bạn đang nâng cấp một tích hợp SIWE NextAuth v4 hiện có, hãy làm theo hướng dẫn di chuyển NextAuth v5.

Thiết lập NextAuth

Tạo một cấu hình NextAuth sử dụng provider Credentials v5 và xuất auth helper. Thực thi authorize của bạn nên xác thực thông điệp SIWE, chữ ký, miền và nonce trước khi trả về địa chỉ đã xác thực.

import NextAuth from 'next-auth';
import type { NextAuthConfig } from 'next-auth';
import Credentials from 'next-auth/providers/credentials';

export const authOptions: NextAuthConfig = {
  providers: [
    Credentials({
      name: 'Ethereum',
      credentials: {
        message: { label: 'Message', type: 'text' },
        signature: { label: 'Signature', type: 'text' },
      },
      async authorize(credentials) {
        const siweMessage = await validateSiweCredentials(credentials);

        if (!siweMessage) {
          return null;
        }

        return {
          id: siweMessage.address,
        };
      },
    }),
  ],
  secret: process.env.AUTH_SECRET ?? process.env.NEXTAUTH_SECRET,
  session: {
    strategy: 'jwt',
  },
};

export const { handlers, auth, signIn, signOut } = NextAuth(authOptions);

Xem ví dụ hoàn chỉnh with-next-siwe-next-auth để xác thực SIWE, kiểm tra nonce và xác minh phía máy chủ.

Thiết lập nhà cung cấp

Trong thành phần App của bạn, nhập RainbowKitSiweNextAuthProvider.

import { RainbowKitSiweNextAuthProvider } from '@rainbow-me/rainbowkit-siwe-next-auth';

Bọc RainbowKitProvider với RainbowKitSiweNextAuthProvider, đảm bảo nó được lồng trong SessionProvider của NextAuth để nó có quyền truy cập vào phiên.

import { RainbowKitSiweNextAuthProvider } from '@rainbow-me/rainbowkit-siwe-next-auth';
import { RainbowKitProvider } from '@rainbow-me/rainbowkit';
import { SessionProvider } from 'next-auth/react';
import type { Session } from 'next-auth';
import { AppProps } from 'next/app';
import { WagmiProvider } from 'wagmi';
import {
  QueryClient,
  QueryClientProvider,
} from '@tanstack/react-query';

const queryClient = new QueryClient();

export default function App({
  Component,
  pageProps,
}: AppProps<{
  session: Session;
}>) {
  return (
    <WagmiProvider {...etc}>
      <SessionProvider refetchInterval={0} session={pageProps.session}>
        <QueryClientProvider client={queryClient}>
          <RainbowKitSiweNextAuthProvider>
            <RainbowKitProvider {...etc}>
              <Component {...pageProps} />
            </RainbowKitProvider>
          </RainbowKitSiweNextAuthProvider>
        </QueryClientProvider>
      </SessionProvider>
    </WagmiProvider>
  );
}

Với RainbowKitSiweNextAuthProvider được thiết lập, người dùng của bạn sẽ được yêu cầu xác thực bằng cách ký một tin nhắn sau khi họ đã kết nối ví.

Tuỳ chỉnh các tuỳ chọn tin nhắn SIWE

Bạn có thể tùy chỉnh tùy chọn thông điệp SIWE bằng cách truyền một hàm vào thuộc tính getSiweMessageOptions trên RainbowKitSiweNextAuthProvider.

Hàm này sẽ được gọi bất cứ khi nào một tin nhắn mới được tạo. Các tùy chọn trả về từ hàm này sẽ được kết hợp với những mặc định.

import {
  RainbowKitSiweNextAuthProvider,
  GetSiweMessageOptions,
} from '@rainbow-me/rainbowkit-siwe-next-auth';

const getSiweMessageOptions: GetSiweMessageOptions = () => ({
  statement: 'Sign in to my RainbowKit app',
});

<RainbowKitSiweNextAuthProvider
  getSiweMessageOptions={getSiweMessageOptions}
>
  ...
</RainbowKitSiweNextAuthProvider>;

Truy cập phiên từ phía máy chủ

Bạn có thể truy cập phiên bằng cách sử dụng hàm auth được xuất từ cấu hình auth của bạn. Nếu người dùng đã xác thực thành công, thuộc tính address của phiên sẽ là địa chỉ của người dùng.

Bạn cũng có thể chuyển đối tượng phiên đã giải quyết từ máy chủ thông qua getServerSideProps để NextAuth không cần phải giải quyết lại trên phía máy khách.

Ví dụ:

import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
import { auth } from '../auth';

export const getServerSideProps: GetServerSideProps = async context => {
  const session = await auth(context.req, context.res);

  const address = session?.address ?? null;
  // If you have a value for "address" here, your
  // server knows the user is authenticated.

  // You can then pass any data you want
  // to the page component here.
  return {
    props: {
      address,
      session,
    },
  };
};

type AuthenticatedPageProps = InferGetServerSidePropsType<
  typeof getServerSideProps
>;

export default function AuthenticatedPage({
  address,
}: AuthenticatedPageProps) {
  return address ? (
    <h1>Authenticated as {address}</h1>
  ) : (
    <h1>Unauthenticated</h1>
  );
}

Để biết thêm thông tin về quản lý phiên, bạn có thể tham khảo tài liệu sau:

Tổng quan

Bắt đầu

Nâng cao