Аутентификация

Аутентификация и авторизация — это два процесса безопасности, которые управляют доступом к вашему веб-сайту или приложению. Аутентификация проверяет личность посетителя, а авторизация предоставляет доступ к защищенным областям и ресурсам.

Аутентификация позволяет настраивать области вашего сайта для авторизованных пользователей и обеспечивает наивысшую защиту для личной или конфиденциальной информации. Библиотеки аутентификации (например, Lucia Auth, Auth.js) предоставляют утилиты для различных методов аутентификации, таких как вход по электронной почте и OAuth-провайдеры.

Узнайте, как добавить аутентификацию с помощью Supabase или добавить аутентификацию с помощью Firebase в наших специальных руководствах по этим бэкэнд-сервисам.

Lucia

Lucia — это библиотека аутентификации на основе сессий, не зависящая от фреймворка, с отличной поддержкой Astro.

Установка

Установите Lucia с помощью выбранного вами менеджера пакетов.

npm install lucia

pnpm add lucia

yarn add lucia

Конфигурация

Используйте руководство Lucia “Getting started in Astro” для инициализации Lucia с адаптером и настройки базы данных для хранения пользователей и сессий.

Использование

Следующие шаги

Auth.js

Auth.js — это решение для аутентификации, не зависящее от фреймворка. Для Astro доступен адаптер фреймворка сообщества auth-astro.

Установка

Используйте команду astro add в предпочитаемом менеджере пакетов для добавления интеграции auth-astro.

npx astro add auth-astro

pnpm astro add auth-astro

yarn astro add auth-astro

Ручная установка

Чтобы установить auth-astro вручную, установите требуемый пакет для вашего менеджера пакетов:

npm install auth-astro @auth/core@^0.18.6

pnpm add auth-astro @auth/core@^0.18.6

yarn add auth-astro @auth/core@^0.18.6

Затем примените интеграцию к вашему файлу astro.config.* с помощью свойства integrations:

import { defineConfig } from 'astro/config';
import auth from 'auth-astro';

export default defineConfig({
  // ...
  integrations: [auth()],
});

Конфигурация

Создайте файл auth.config.mjs в корне вашего проекта. Добавьте любых поставщиков аутентификации или методы, которые вы хотите поддерживать, вместе с любыми переменными среды, которые они требуют.

import GitHub from '@auth/core/providers/github';
import { defineConfig } from 'auth-astro';

export default defineConfig({
  providers: [
    GitHub({
      clientId: import.meta.env.GITHUB_CLIENT_ID,
      clientSecret: import.meta.env.GITHUB_CLIENT_SECRET,
    }),
  ],
});

Создайте файл .env в корне проекта, если его еще нет. Добавьте следующие две переменные окружения. AUTH_SECRET должна быть закрытой строкой, состоящей минимум из 32 символов.

AUTH_TRUST_HOST=true
AUTH_SECRET=<my-auth-secret>

Использование

Вы можете добавить кнопки входа и выхода, используя модуль auth-astro/client в теге script или компоненте фреймворка на стороне клиента.

---
import Layout from 'src/layouts/Base.astro';
---
<Layout>
  <button id="login">Login</button>
  <button id="logout">Logout</button>

  <script>
    const { signIn, signOut } = await import("auth-astro/client")
    document.querySelector("#login").onclick = () => signIn("github")
    document.querySelector("#logout").onclick = () => signOut()
  </script>
</Layout>

Вы можете получить сессию пользователя с помощью метода getSession.

---
import Layout from 'src/layouts/Base.astro';
import { getSession } from 'auth-astro/server';

const session = await getSession(Astro.request);
---
<Layout>
  {
    session ? (
      <p>Welcome {session.user?.name}</p>
    ) : (
      <p>Not logged in</p>
    )
  }
</Layout>