Пропустить до содержимого

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

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

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

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

Lucia

Заголовок раздела Lucia

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

Установка

Заголовок раздела Установка

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

Terminal window
npm install lucia

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

Заголовок раздела Конфигурация

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

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

Заголовок раздела Использование

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

Заголовок раздела Следующие шаги

Auth.js

Заголовок раздела Auth.js

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

Установка

Заголовок раздела Установка

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

Terminal window
npx astro add auth-astro

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

Заголовок раздела Ручная установка

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

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

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

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


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

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

Заголовок раздела Конфигурация

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

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 символов.

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

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

Заголовок раздела Использование

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

src/pages/index.astro
---
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.

src/pages/index.astro
---
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>

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

Заголовок раздела Следующие шаги