Встроить вход за 5 минут

Эта страница проведёт от пустой страницы до момента, когда ваш бэкенд получил токен пользователя.

1. Подключите SDK

Добавьте тег на страницу, где стоит кнопка входа:

<script src="https://id.fidmos.com/js/sdk.js" data-client-id="ВАШ_CLIENT_ID"></script>

С атрибутом data-client-id SDK прогреет окно заранее — оно откроется мгновенно.

npm install fidmos-id

npm install fidmos-id

2. Откройте окно входа

На клиенте позовите login с clientId и redirectUri. Окно откроется поверх вашей страницы мгновенно, само заведёт поток входа и по завершении вернёт код авторизации в onSuccess.

SDK подключён тегом на шаге 1 — зовём глобал window.FidmosID напрямую:

window.FidmosID.login({
  clientId: 'ВАШ_CLIENT_ID',
  redirectUri: 'https://partner.example/callback',
  scope: 'openid profile email',
  onSuccess: async ({ code, state, codeVerifier }) => {
    // обменяйте code на токен на своём бэкенде: POST /login/callback
    await fetch('/login/callback', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ code, state, codeVerifier }),
    });
    location.assign('/logged-in');
  },
  onCancel: () => {
    // человек закрыл окно; отменой это не считается за ошибку
  },
  onError: ({ code }) => {
    // code: 'invalid_arguments' | 'already_open' | 'unavailable'
  },
});

import { login } from 'fidmos-id';

export function LoginButton() {
  const signIn = () =>
    login({
      clientId: 'ВАШ_CLIENT_ID',
      redirectUri: 'https://partner.example/callback',
      scope: 'openid profile email',
      onSuccess: async ({ code, state, codeVerifier }) => {
        // обменяйте code на токен на своём бэкенде: POST /login/callback
        await fetch('/login/callback', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ code, state, codeVerifier }),
        });
        location.assign('/logged-in');
      },
      onError: ({ code }) => {
        // code: 'invalid_arguments' | 'already_open' | 'unavailable'
      },
    });

  return <button onClick={signIn}>Войти через Fidmos</button>;
}

<script setup>
import { login } from 'fidmos-id';

function signIn() {
  login({
    clientId: 'ВАШ_CLIENT_ID',
    redirectUri: 'https://partner.example/callback',
    scope: 'openid profile email',
    onSuccess: async ({ code, state, codeVerifier }) => {
      // обменяйте code на токен на своём бэкенде: POST /login/callback
      await fetch('/login/callback', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ code, state, codeVerifier }),
      });
      location.assign('/logged-in');
    },
    onError: ({ code }) => {
      // code: 'invalid_arguments' | 'already_open' | 'unavailable'
    },
  });
}
</script>

<template>
  <button @click="signIn">Войти через Fidmos</button>
</template>

Полный разбор формы вызова на каждом стеке (занятость кнопки, компонент) — в контракте виджета.

3. Обменяйте код на токен

На своём бэкенде обменяйте полученный code на токен обычным запросом OAuth2 — с code_verifier, который пришёл в onSuccess (поле codeVerifier), и своим client_secret.

POSThttps://id.fidmos.com/oauth/token

Content-Type: application/x-www-form-urlencoded

grant_type=authorization_code&
code=ПОЛУЧЕННЫЙ_CODE&
redirect_uri=https://partner.example/callback&
client_id=ВАШ_CLIENT_ID&
client_secret=ВАШ_CLIENT_SECRET&
code_verifier=CODE_VERIFIER_ИЗ_ONSUCCESS

В ответе — access_token, refresh_token и id_token (JWT OIDC). Обновление токена, чтение профиля через UserInfo и discovery-адреса эндпоинтов — в обмене кода на токен.

4. Узнайте, кто вошёл

Идентификатор пользователя — поле sub из id_token или из ответа GET /oauth/userinfo. Он парный: стабилен для вашего клиента и по нему вы опознаёте человека при следующем входе.

Полное описание запросов и ответов — в справочнике API.