Вопрос или проблема
Я в замешательстве, как интегрировать oidc-provider конкретно с SvelteKit, и если у кого-то есть идеи, я был бы рад их услышать.
В основном, проблема заключается в том, что SvelteKit генерирует ответы другим способом. Стандартные вещи Node.js, такие как Express, используют модель промежуточного ПО, которая принимает и запрос, и ответ. Но SvelteKit этого не делает, он обрабатывает запрос и генерирует ответ.
Все идет хорошо, пока вы не начнете работать с отображениями форм с использованием oidc-provider и попытаетесь использовать SvelteKit. Взаимодействия требуют получения деталей с помощью чего-то вроде:
expressApp.get('/interaction/:uid', async (req, res) => {
const details = await provider.interactionDetails(req, res);
// ...
});
что, конечно, вы не можете тривиально сделать в SvelteKit, из-за отсутствия ответа вообще. Раздражает, что интеграция работает довольно хорошо, пока вы не начнете строить свои собственные пользовательские потоки.
Возможно, есть какая-то волшебная техника для этого, или, возможно, мне просто нужно отказаться от SvelteKit для взаимодействий (я могу использовать его для всего остального в приложении). Это печально.
Я полагаю, что как только я выберу конкретный адаптер, я смогу внедрить ответ в локальные события в SvelteKit, а затем получить его, но это будет работать только в продакшене, а не в разработке, что менее чем идеально с точки зрения опыта разработчика, поскольку почти никакая аутентификация никогда не будет работать в разработке.
Ответ или решение
Интеграция oidc-provider с SvelteKit действительно может вызывать некоторые трудности из-за различий в подходах к обработке запросов и ответов. SvelteKit использует иной подход, и поскольку у него нет традиционного middleware как в Express, вы должны обойти это ограничение. Вот шаги, которые помогут вам интегрировать oidc-provider в ваше приложение на SvelteKit.
Шаг 1: Установка зависимостей
Сначала убедитесь, что у вас установлены необходимые зависимости:
npm install oidc-provider
npm install expressШаг 2: Создание сервера Express
Создайте сервер Express, который будет обрабатывать запросы для oidc-provider. Для этого создайте файл, например, oidc-server.js.
const express = require('express');
const { Provider } = require('oidc-provider');
const app = express();
const port = 3001; // Порт для OIDC сервера
const clients = [{
client_id: 'your-client-id',
client_secret: 'your-client-secret',
redirect_uris: ['http://localhost:3000/callback'],
response_types: ['code'],
grant_types: ['authorization_code'],
}];
const configuration = {
clients,
// другие конфигурации
};
const provider = new Provider('http://localhost:3001', configuration);
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
// Операции OIDC
app.use('/oidc/', provider.callback());
app.listen(port, () => {
console.log(`OIDC provider is running on http://localhost:${port}`);
});Шаг 3: Реализация взаимодействий
Так как SvelteKit не поддерживает традиционное взаимодействие с ответами, вам придется реализовать маршруты для обработки взаимодействий. Например, вы можете создать два роута: один для получения деталей взаимодействия, а другой для отправки форм.
app.get('/interaction/:uid', async (req, res) => {
const details = await provider.interactionDetails(req, res);
// Здесь вы можете отобразить форму для пользователя
});
app.post('/interaction/:uid', async (req, res) => {
const result = await provider.interactionResult(req, res);
// Здесь обработка результата взаимодействия
});Шаг 4: Встраивание SvelteKit
Ваша SvelteKit-приложение будет отправлять запросы к этому Express-серверу. Создайте страничный маршрут для обработки, например, src/routes/interaction/[uid].svelte:
<script context="module" lang="ts">
export async function load({ params }) {
const res = await fetch(`http://localhost:3001/interaction/${params.uid}`);
const details = await res.json();
return { props: { details } };
}
</script>
<script>
export let details;
</script>
<form action={`http://localhost:3001/interaction/${details.uid}`} method="POST">
<!-- Здесь вы можете использовать details для генерации формы -->
<button type="submit">Подтвердить</button>
</form>Шаг 5: Настройка CORS
Не забудьте настроить CORS, если ваши серверы находятся на разных доменах. Вы можете использовать пакет cors для Express:
const cors = require('cors');
app.use(cors({
origin: 'http://localhost:3000', // Сайт SvelteKit
credentials: true
}));Конфигурация для разработки
Вы правы, разработка может стать сложной. Чтобы улучшить опыт разработки, вы можете создать конфигурацию, которая будет запускать и SvelteKit, и Express одновременно. Используйте такие инструменты, как concurrently для этого.
Заключение
Это базовая структура, которая поможет вам интегрировать oidc-provider с SvelteKit. Имейте в виду, что вам, возможно, придется добавить дополнительные функции, такие как обработка ошибок и более сложные сценарии взаимодействий. SvelteKit и oidc-provider могут работать вместе, но иногда вам придется писать дополнительные куски кода для обеспечения корректной работы пользовательских потоков.