SvelteKit + Lucia: Аутентификация по электронной почте и паролю

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

В этом руководстве мы рассмотрим, как реализовать аутентификацию по электронной почте и паролю, по крайней мере, ее часть. Я собираюсь пропустить некоторые части, которые лучше объяснены в документации.

Настройка

Базовая настройка описана здесь.

База данных

См. раздел «Адаптеры» для объяснения специфики базы данных. Добавьте новый столбец email (text/varchar), где значения уникальны.

Фронтенд

Отправьте POST-запрос на конечную точку регистрации или входа с телом JSON.

const signup = async () => {
    await fetch("/api/signup", {
        method: "POST",
        body: JSON.stringify({
            email,
            password,
        }),
    });
};
Вход в полноэкранный режим Выход из полноэкранного режима

Зарегистрироваться

Создайте routes/api/signup.ts и примите POST-запрос. Получите email и пароль из данных тела.

import type { RequestHandler } from "@sveltejs/kit";
import { auth } from "$lib/lucia";

export const POST: RequestHandler = async ({ request }) => {
    const { email, password } = await request.json();
    if (!email || !password) {
        return {
            status: 400,
        };
    }
};
Вход в полноэкранный режим Выход из полноэкранного режима

Создание нового пользователя

Создайте нового пользователя с помощью createUser, используя идентификатор аутентификации email и идентификатор email. Auth id представляет используемый метод аутентификации (для Github OAuth, «github»), а идентификатор представляет пользователя в рамках этого метода (имя пользователя или email для GitHub). Он используется для идентификации пользователей, а не для хранения данных пользователя (если вам нужно хранить email пользователя, создайте колонку email в вашей базе данных).
Обратитесь к странице обзора для получения разъяснений по аутентификационным идентификаторам и идентификаторам.

Сохраните пароль пользователя, используя опции password, и email пользователя, используя user_data. Установите cookies (маркер обновления, доступа и отпечатка пальца) и перенаправьте пользователя в ответе. Ошибка AUTH_DUPLICATE_IDENTIFER_TOKEN возникает, когда пользователь пытается создать новую учетную запись, используя тот же auth id и идентификатор (в данном случае email).

try {
    const createUser = await auth.createUser("email", email, {
        password,
        user_data: {
            email,
        },
    });
    return {
        status: 302,
        headers: {
            "set-cookie": createUser.cookies,
            location: "/",
        },
    };
} catch (e) {
    const error = e as Error;
    if (
        error.message === "AUTH_DUPLICATE_IDENTIFER_TOKEN" ||
        error.message === "AUTH_DUPLICATE_USER_DATA"
    ) {
        return {
            status: 400,
            body: JSON.stringify({
                error: "Email already in use.",
            }),
        };
    }
    return {
        status: 500,
        body: JSON.stringify({
            error: "Unknown error.",
        }),
    };
}
Вход в полноэкранный режим Выход из полноэкранного режима

Войти в систему

Создайте routes/api/login.ts и примите POST-запрос. Получите email и пароль пользователя из тела запроса.

import type { RequestHandler } from "@sveltejs/kit";
import { auth } from "$lib/lucia";

export const POST: RequestHandler = async ({ request }) => {
    const form = await request.formData();
    const email = form.get("email")?.toString();
    const password = form.get("password")?.toString();
    if (!email || !password) {
        return {
            status: 400,
        };
    }
};
Войти в полноэкранный режим Выйти из полноэкранного режима

Аутентификация пользователя

Аутентифицируйте пользователя с помощью authenticateUser, который потребует пароль в третьем параметре. Auth id должен быть тем же, что и при создании пользователя. Важно НЕ сообщать пользователю, что email был неверным или пароль неверным.

try {
    const authenticateUser = await auth.authenticateUser(
        "email",
        email,
        password
    );
    return {
        status: 302,
        headers: {
            "set-cookie": createUser.cookies,
            location: "/",
        },
    };
} catch (e) {
    const error = e as Error;
    if (
        error.message === "AUTH_INVALID_IDENTIFIER_TOKEN" ||
        error.message === "AUTH_INVALID_PASSWORD"
    ) {
        return {
            status: 400,
            body: JSON.stringify({
                error: "Incorrect email or password.",
            }),
        };
    }
    // database connection error
    return {
        status: 500,
        body: JSON.stringify({
            error: "Unknown error.",
        }),
    };
}
Вход в полноэкранный режим Выход из полноэкранного режима

Вот и все. Другие части Lucia и аутентификации (например, обновление токенов и защищенные маршруты) описаны в разделе «Начало работы».

Оцените статью
devanswers.ru
Добавить комментарий