认证

为您的应用程序提供经过认证的访问权限

在连接过程中，您可以选择强制要求用户使用其钱包签名一个消息，证明他们拥有连接的账户，并允许您创建具有对您的应用程序的特权访问权限的认证用户会话。

虽然可以与自定义后端和消息格式进行集成，但RainbowKit为使用以太坊登录和 NextAuth 提供了一流的支持。

设置使用以太坊和NextAuth登录

安装

安装 @rainbow-me/rainbowkit-siwe-next-auth 包和 NextAuth v5。

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

如果您正在升级现有的 NextAuth v4 SIWE 集成，请遵循 NextAuth v5 迁移指南。

设置 NextAuth

创建一个使用 v5 Credentials 提供程序并导出 auth 辅助工具的 NextAuth 配置。在返回经过身份验证的地址之前，您的 authorize 实现应验证 SIWE 消息、签名、域及 nonce。

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

查看完整的 with-next-siwe-next-auth 示例以了解 SIWE 验证、nonce 检查和服务器端验证。

设置提供者

在您的App组件中，导入RainbowKitSiweNextAuthProvider。

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

用RainbowKitSiweNextAuthProvider封装RainbowKitProvider，确保它嵌套在NextAuth的SessionProvider中，以便可以访问会话。

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

利用RainbowKitSiweNextAuthProvider，当用户连接他们的钱包时，他们将需要通过签名消息进行身份验证。

自定义SIWE消息选项

您可以通过将函数传递给RainbowKitSiweNextAuthProvider上的getSiweMessageOptions属性，自定义SIWE消息选项。

每当创建新消息时将调用此函数。从该函数返回的选项将与默认选项合并。

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

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

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

在服务器端访问会话

您可以使用从身份验证配置中导出的 auth 函数访问会话。如果用户成功通过身份验证，会话的 address 属性将是用户的地址。

您还可以通过getServerSideProps从服务器传递已解析的会话对象，以便NextAuth不需要在客户端再次解析它。

例如：

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

有关管理会话的更多信息，您可以参考以下文档：

概览

入门

高级