Kimlik Doğrulama

Uygulamanıza kimlik doğrulamalı erişim sağlama

İsteğe bağlı olarak, kullanıcıların bağlantı süreci sırasında cüzdanlarıyla bir mesaj imzalamasını şart koşabilirsiniz, böylece bağlı hesabın sahibi olduklarını kanıtlarlar ve uygulamanıza ayrıcalıklı erişimi olan bir kimlik doğrulamalı kullanıcı oturumu oluşturabilirsiniz.

Özel back-end'lerle ve mesaj formatlarıyla entegrasyon yapmak mümkün olsa da, RainbowKit öncelikli olarak Ethereum ile Giriş Yapma ve NextAuth için destek sağlar.

Ethereum ve NextAuth ile Giriş Yapmayı Ayarlayın

Kur

@rainbow-me/rainbowkit-siwe-next-auth paketini kurun.

npm install @rainbow-me/rainbowkit-siwe-next-auth

Sağlayıcıyı kurun

App bileşeninizde, RainbowKitSiweNextAuthProvider'ı içe aktarın.

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

RainbowKitProvider'ı RainbowKitSiweNextAuthProvider ile sarmalayın, böylece oturuma erişimi olduğundan emin olun.

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 yerinde olduğunda, kullanıcılarınız cüzdanlarını bağladıktan sonra bir mesaj imzalamak için kimlik doğrulama istemi alacaklardır.

SIWE mesaj seçeneklerini özelleştirin

SIWE mesaj seçeneklerini RainbowKitSiweNextAuthProvider üzerindeki getSiweMessageOptions özelliğine bir fonksiyon geçirerek özelleştirebilirsiniz.

Bu fonksiyon, yeni bir mesaj oluşturulduğunda çağrılacaktır. Bu fonksiyondan dönen seçenekler varsayılanlarla birleştirilecektir.

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

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

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

Oturumu sunucu tarafında erişin

next-auth/jwtten içe aktarılan NextAuth'ın getToken fonksiyonu ile oturum token'ına erişebilirsiniz. Eğer kullanıcı başarılı bir şekilde kimlik doğrulaması yaptıysa, oturum token'ının sub özelliği (token'ın "konusu", yani kullanıcı) kullanıcının adresi olacaktır.

Ayrıca çözümlenmiş oturum nesnesini sunucudan getServerSideProps vasıtasıyla iletip NextAuth'ın bunu istemci üzerinde tekrar çözümlemesi gerekmemesini sağlayabilirsiniz.

Örneğin:

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

Oturumu yönetmek hakkında daha fazla bilgi için aşağıdaki belgelere başvurabilirsiniz:

Genel Bakış

Başlarken