Pixelyard ID

Единая система аутентификации для всех сервисов Pixelyard. Позволяет пользователям входить в ваше приложение с помощью своего Pixelyard аккаунта.

Возможности

🔐 OAuth 2.0 Authorization Code Flow
👤 Получение профиля пользователя
📧 Доступ к email (с разрешения)
🔒 Безопасное хранение данных
⚡ Быстрая интеграция

Как это работает

1. Пользователь нажимает "Войти через Pixelyard" в вашем приложении

2. Перенаправляется на страницу авторизации Pixelyard ID

3. Подтверждает доступ к своим данным

4. Возвращается в ваше приложение с кодом авторизации

5. Ваш сервер обменивает код на access token

6. Получаете данные пользователя через API

Быстрый старт

Интеграция Pixelyard ID в ваше приложение за 5 минут.

1. Создайте приложение

Перейдите в панель разработчика и создайте новое OAuth приложение. Вы получите:

client_id — публичный идентификатор
client_secret — секретный ключ (храните на сервере!)

2. Добавьте кнопку входа

const loginWithPixelyard = () => {
  const params = new URLSearchParams({
    client_id: 'YOUR_CLIENT_ID',
    redirect_uri: 'https://your-app.com/callback',
    scope: 'profile email',
    state: crypto.randomUUID()
  });
  
  window.location.href = 
    'https://id.pixelyard.dev/oauth/authorize?' + params;
};

3. Обработайте callback

После авторизации пользователь вернётся на ваш redirect_uri с параметром code.

4. Получите токен

// На вашем сервере
const response = await fetch('https://id.pixelyard.dev/oauth/token', {
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  body: new URLSearchParams({
    grant_type: 'authorization_code',
    code: code,
    client_id: CLIENT_ID,
    client_secret: CLIENT_SECRET,
    redirect_uri: REDIRECT_URI
  })
});

Стать разработчиком

Для создания OAuth приложений необходимо получить статус разработчика.

Требования

Аккаунт Pixelyard ID
Подтверждённый email
Описание вашего проекта

Как подать заявку

1. Войдите в свой аккаунт

2. Перейдите в профиль

3. Нажмите "Стать разработчиком"

4. Заполните форму с описанием приложения

5. Дождитесь одобрения администратором

После одобрения вы получите бейдж разработчика 🔧 и доступ к панели создания приложений.

Authorization Code Flow

Pixelyard ID использует стандартный OAuth 2.0 Authorization Code Flow — самый безопасный способ авторизации для веб-приложений.

Схема работы

┌──────────┐     ┌──────────────┐     ┌─────────────┐
│  Юзер    │────>│ Ваше приложение │────>│ Pixelyard ID │
└──────────┘     └──────────────┘     └─────────────┘
     │                  │                    │
     │  1. Клик "Войти" │                    │
     │─────────────────>│                    │
     │                  │ 2. Redirect        │
     │                  │───────────────────>│
     │                  │                    │
     │                  │    3. Логин/Согласие
     │<─────────────────────────────────────│
     │                  │                    │
     │  4. Redirect + code                   │
     │─────────────────>│                    │
     │                  │ 5. Обмен code→token│
     │                  │───────────────────>│
     │                  │<───────────────────│
     │                  │ 6. access_token    │
     │                  │                    │
     │  7. Авторизован! │                    │
     │<─────────────────│                    │

OAuth Endpoints

GET /oauth/authorize

Страница авторизации. Перенаправьте пользователя сюда.

Параметр	Обязательный	Описание
`client_id`	✅	ID вашего приложения
`redirect_uri`	✅	URL для возврата
`scope`	❌	Запрашиваемые права
`state`	❌	Защита от CSRF

POST /oauth/token

Обмен кода на access token.

Параметр	Описание
`grant_type`	Всегда `authorization_code`
`code`	Код из callback
`client_id`	ID приложения
`client_secret`	Секрет приложения
`redirect_uri`	Тот же URI

GET /oauth/userinfo

Получение данных пользователя. Требует Bearer токен.

Scopes

Scopes определяют какие данные пользователя может получить ваше приложение.

Scope	Данные
`profile`	sub, preferred_username, name, picture
`email`	email

Пример ответа /oauth/userinfo

{
  "sub": "550e8400-e29b-41d4-a716-446655440000",
  "email": "user@example.com",
  "preferred_username": "cooluser",
  "name": "Иван Иванов",
  "picture": "https://example.com/avatar.jpg"
}

Аутентификация API

Все защищённые endpoints требуют Bearer токен в заголовке.

Authorization: Bearer eyJhbGciOiJIUzI1NiIs...

Время жизни токенов

Токен	Время жизни
Access Token	15 минут
Refresh Token	7 дней
Authorization Code	10 минут

API Пользователей

POST /auth/register

Регистрация нового пользователя

POST /auth/login

Вход в аккаунт

GET /user/me

Получить свой профиль (требует токен)

Пример на JavaScript

Полный флоу авторизации

// 1. Редирект на авторизацию
function login() {
  const state = crypto.randomUUID();
  sessionStorage.setItem('oauth_state', state);
  
  const params = new URLSearchParams({
    client_id: 'pxl_your_client_id',
    redirect_uri: window.location.origin + '/callback',
    scope: 'profile email',
    state
  });
  
  window.location.href = 
    'https://id.pixelyard.dev/oauth/authorize?' + params;
}

// 2. Обработка callback (на странице /callback)
async function handleCallback() {
  const params = new URLSearchParams(location.search);
  const code = params.get('code');
  const state = params.get('state');
  
  // Проверяем state
  if (state !== sessionStorage.getItem('oauth_state')) {
    throw new Error('Invalid state');
  }
  
  // Отправляем код на ваш бэкенд
  const res = await fetch('/api/auth/callback', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ code })
  });
  
  const { user } = await res.json();
  console.log('Авторизован:', user);
}

Кнопка входа

Готовый компонент кнопки "Войти через Pixelyard".

HTML + CSS

<button class="pixelyard-btn" onclick="login()">
  <img src="https://id.pixelyard.dev/logo.png" alt="">
  Войти через Pixelyard
</button>

<style>
.pixelyard-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: linear-gradient(90deg, #667eea, #764ba2);
  color: white;
  border: none;
  border-radius: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.pixelyard-btn img {
  width: 20px;
  height: 20px;
}
.pixelyard-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
}
</style>