Недавно я выпустил 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 и аутентификации (например, обновление токенов и защищенные маршруты) описаны в разделе «Начало работы».