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

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

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

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

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

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

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

Terminal window
npm install lucia

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

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>