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

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

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

Совет

Официального решения для аутентификации в Astro нет, но вы можете найти “auth” интеграции сообщества в каталоге интеграций.

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

Lucia

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

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

Установка

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

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

npm

npm install lucia

pnpm

pnpm add lucia

Yarn

yarn add lucia

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

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

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

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

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

Совет

Следуйте одному из полных руководств Lucia по Astro, чтобы добавить аутентификацию по имени пользователя и паролю или GitHub OAuth в ваш проект Astro.

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

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

• Пример проекта Astro + Lucia OAuth
• Пример проекта Astro + Lucia с использованием имени пользователя и пароля

Auth.js

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

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

Установка

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

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

npm

npx astro add auth-astro

pnpm

pnpm astro add auth-astro

Yarn

yarn astro add auth-astro

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

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

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

npm

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

pnpm

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

Yarn

yarn add 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>

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

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

• auth-astro на GitHub
• Документация по Auth.js