Введение


Зачем использовать вход через web3?

Вход с помощью Ethereum позволяет вам безопасно войти в систему, используя кошелек, и проверить кошелек на серверной части! Мы собираемся использовать Thirdweb Auth, который использует очень популярный стандарт JWT! JSON Web Token (JWT) — это открытый стандарт, определяющий компактный и автономный способ безопасной передачи информации между сторонами в виде объекта JSON.


Настраивать


Создание приложения Next.js

я собираюсь использовать Следующий стартовый шаблон машинописного текста для этого руководства.

Если вы следуете руководству, вы можете создать проект с
Следующий шаблон TypeScript с использованием интерфейс командной строки третьего веба:

npx thirdweb create --next --ts
Войти в полноэкранный режим

Выйти из полноэкранного режима

Если у вас уже есть приложение Next.js, вы можете просто выполнить следующие шаги, чтобы начать:

  • Установить @thirdweb-dev/react а также @thirdweb-dev/sdk а также ethers
  • Добавьте аутентификацию MetaMask на сайт. Вы можете следить за этим руководство сделать это.


Настройка третьей веб-авторизации

Во-первых, нам нужно установить третий пакет аутентификации:

npm i @thirdweb-dev/auth # npm

yarn add @thirdweb-dev/auth # yarn
Войти в полноэкранный режим

Выйти из полноэкранного режима

Теперь создайте файл с именем auth.config.ts и следующее:

import { ThirdwebAuth } from "@thirdweb-dev/auth/next";

export const { ThirdwebAuthHandler, getUser } = ThirdwebAuth({
  privateKey: process.env.PRIVATE_KEY as string,
  domain: "example.org",
});
Войти в полноэкранный режим

Выйти из полноэкранного режима

Обновите домен с URL-адресом вашего веб-сайта, а для закрытого ключа создайте новый .env.local файл и добавьте новую переменную с именем PRIVATE_KEY. Узнайте, как экспортировать свой закрытый ключ из вашего кошелька.

Чтобы настроить API авторизации, создайте новую папку внутри pages/api называется авторизацией и [...thirdweb].ts файл внутри него! Здесь нам нужно экспортировать созданный нами третий веб-обработчик!

import { ThirdwebAuthHandler } from "../../../auth.config";

export default ThirdwebAuthHandler();
Войти в полноэкранный режим

Выйти из полноэкранного режима

Наконец, внутри _app.tsx файл, добавьте реквизит authConfig в ThirdwebProvider:

  <ThirdwebProvider
      desiredChainId={activeChainId}
      authConfig={{
        authUrl: "/api/auth",
        domain: "example.org",
        loginRedirect: "
      }}
    >
      <Component {...pageProps} />
    </ThirdwebProvider>
Войти в полноэкранный режим

Выйти из полноэкранного режима


Создание интерфейса

Внутри pages/index.tsx обновите оператор return следующим образом:

return (
    <div>
      {address ? (
        <button onClick={() => login()}>
          Sign in with Ethereum
        </button>
      ) : (
        <ConnectWallet />
      )}
    </div>
  );
Войти в полноэкранный режим

Выйти из полноэкранного режима

Мы собираемся использовать useAddress а также useLogin хуки для получения функции входа и адреса пользователя:

  const address = useAddress();
  const login = useLogin();
Войти в полноэкранный режим

Выйти из полноэкранного режима

Это добавит вход с помощью Ethereum на наш сайт! Теперь нам нужно проверить, существует ли пользователь, для этого нужно получить пользователя из useUser крючок такой:

  const user = useUser();
Войти в полноэкранный режим

Выйти из полноэкранного режима

И мы проверим, существует ли пользователь, и если он существует, мы вернем это:

if (user.user) {
  return (
    <div>
      <p>You are signed in as {user.user.address}</p>
      <button>Validate user</button>
    </div>
  );
}
Войти в полноэкранный режим

Выйти из полноэкранного режима


Создание API для проверки

Теперь давайте создадим API для получения сведений о пользователе (адрес) на серверной части! Итак, создайте новый файл с именем validate.ts внутри pages/api и добавьте следующее:

import type { NextApiRequest, NextApiResponse } from "next";
import { getUser } from "../../auth.config";

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  if (req.method === "POST") {
    const thirdwebUser = await getUser(req);

    if (thirdwebUser?.address) {
      return res.status(200).json({
        message: `You are signed in as ${thirdwebUser.address}`,
      });
    }
    return res.status(401).json({ message: "Account not validated" });
  }
  return res.status(405).json({ message: "Method not allowed" });
};

export default handler;
Войти в полноэкранный режим

Выйти из полноэкранного режима

Здесь мы используем метод getUser из Thirdweb для получения адреса пользователя, и если он существует, мы отправляем сообщение о том, что «вы вошли в систему как адрес».


Вызов API на фронтенде

Создайте новую функцию с именем handleClick в pages/index.tsx как это:

  const handleClick = async () => {
    try {
      const response = await fetch("/api/validate", {
        method: "POST",
      });

      const data = await response.json();
      alert(data.message);
    } catch (error) {
      console.log(error);
    }
  };
Войти в полноэкранный режим

Выйти из полноэкранного режима

И прикрепите эту функцию к onClick кнопки подтверждения:

<button onClick={handleClick}>Validate user</button>
Войти в полноэкранный режим

Выйти из полноэкранного режима


Вывод

Надеюсь, вы узнали, как добавить вход через web3 в свои замечательные Dapps с помощью этого руководства!


Полезные ссылки

репозиторий GitHub

Третья веб-аутентификация