Увійти через AniHub

Auth.js, Passport, Authlib, Spring Security, Keycloak — усі вміють OpenID Connect. Дайте бібліотеці одну адресу:

https://anihub.in.ua/.well-known/openid-configuration

Решту вона вичитає звідти сама. Конфіг, Auth.js / NextAuth:

providers: [
  {
    id: "anihub",
    name: "AniHub",
    type: "oidc",
    issuer: "https://anihub.in.ua",
    clientId: process.env.ANIHUB_CLIENT_ID,
    clientSecret: process.env.ANIHUB_CLIENT_SECRET,
    authorization: {
      params: { scope: "openid profile email" },
    },
  },
]

Питання одне: чи є у вас сервер, де може лежати секрет. Тип не змінюється після реєстрації.

Готова кнопка для вашої сторінки входу — три варіанти під темний, світлий і акцентний фон. Підставте свій маршрут у href — далі все як завжди: користувач іде на ваш бекенд, а той починає авторизацію.

ТемнаСвітлаФіолетова

Увійти через AniHub

Веб-компонентЧистий HTML

<script src="https://dev.anihub.in.ua/sdk/v1/anihub.js" defer></script>

<anihub-login variant="dark" href="/auth/anihub"></anihub-login>

Логотип уже всередині — завантажувати нічого. Стилі ізольовані в shadow DOM, тож ваш CSS кнопку не зачепить.

Веб-компонент — це скрипт із нашого домену, тобто залежність під час виконання. Якщо на сторінці входу сувора CSP або зайва залежність вам не потрібна — беріть чистий HTML: він працює, навіть якщо ми недоступні. Логотип у такому разі покладіть до себе, не тягніть із нашого домену.

Якщо бекенду немає

Той самий тег уміє провести вхід сам — authorization code + PKCE просто в браузері. Підходить публічним застосункам (тим, що без секрету); секрет у браузер не кладіть ніколи, token-ендпоінт його від публічного клієнта все одно не прийме.

<script src="https://dev.anihub.in.ua/sdk/v1/anihub.js" defer></script>

<anihub-login
  client-id="ваш client_id"
  redirect-uri="https://ваш-сайт/callback"
  scope="openid profile"
  flow="popup"
></anihub-login>

На сторінці, куди веде redirect-uri, завершіть обмін. Виклик безпечний навіть тоді, коли коду в адресі немає — тоді він поверне null.

AniHubLogin.handleCallback().then((token) => {
  if (!token) return;                 // сторінку відкрили не з авторизації
  return AniHubLogin.getUser(token.accessToken);
});

У режимі flow="popup" результат повертається у вікно, яке відкривало вхід — подією anihub-login на самому теґу. Refresh-токен видається лише зі скоупом offline_access.

Кожен дозвіл — окремий рядок на екрані згоди. Просіть мінімум.

Refresh-токен ротується при кожному використанні, повторне пред'явлення гасить увесь ланцюжок — не запускайте два паралельні оновлення.

Коли користувач тисне «вийти» у вас, надішліть його на:

GET https://anihub.in.ua/api/oauth/logout
      ?id_token_hint=<id_token, який ви отримали при вході>
      &post_logout_redirect_uri=https://example.com/
      &state=<ваш state>

Відкликаємо всі токени вашого застосунку для цього користувача.

• post_logout_redirect_uri має бути зареєстрована — незареєстровану ігноруємо й показуємо власну сторінку.
• id_token_hint може бути протермінований. Перевіряємо підпис, не строк.
• З акаунта AniHub користувач не виходить, і згода лишається.

Новий застосунок працює одразу. До перевірки — застереження на екрані згоди й ліміт у 10 користувачів; ліміт лише на нових, наявні працюють далі. Заявку подаєте в налаштуваннях.

• Адреси повернення — побайтово. /cb і /cb/ різні.
• https:// — усім. Публічним ще й http://127.0.0.1:порт та власна схема com.example.app:/cb. localhost не приймається — лише IP.
• Домен належить тому, хто зареєстрував першим. Чужий і домен AniHub не приймаються; loopback спільний.
• Назва й опис не можуть містити «AniHub» чи натякати на офіційність.
• Секрет показується один раз — далі лише перевипуск.
• Доступ відкликається будь-коли. Обробляйте invalid_grant як «треба увійти знову».