认证

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

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

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

设置使用以太坊和NextAuth.js登录

如果你还没有，首先使用官方的Sign-In with Ethereum为NextAuth.js的模板设置你的 Next.js 项目

安装

安装 @rainbow-me/rainbowkit-siwe-next-auth 包及其对等依赖， ethers。

npm install @rainbow-me/rainbowkit-siwe-next-auth siwe@^2 ethers@^5

注意：siwe 需要 ethers 对等依赖，而 wagmi 现在依赖于替代的 viem。

设置提供者

在你的 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 {
  QueryClientProvider,
  QueryClient,
} 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>;

在服务器端访问会话

您可以使用NextAuth的 getToken 函数从 next-auth/jwt 导入会话令牌。如果用户成功进行身份验证，会话令牌的 sub 属性（令牌的"主题"，即用户）将是用户的地址。

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

例如：

import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
import { getSession } from 'next-auth/react';
import { getToken } from 'next-auth/jwt';
import React from 'react';

export const getServerSideProps: GetServerSideProps = async context => {
  const session = await getSession(context);
  const token = await getToken({ req: context.req });

  const address = token?.sub ?? 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>
  );
}

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

概览

入门

高级

认证

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

设置使用以太坊和NextAuth.js登录

安装

设置提供者

自定义 SIWE 消息选项

在服务器端访问会话