<div class="callout info">
  <span class="callout-icon">ℹ️</span>
  <div class="callout-body">
    <strong>Başlık</strong>
    Açıklama metni buraya.
  </div>
</div>

<span class="badge blue">Mavi</span>
<span class="badge green">Aktif</span>
<span class="badge orange">Beta</span>
<span class="badge red">Tehlike</span>
<span class="badge gray">Yakında</span>
<span class="badge purple">Premium</span>

<ul class="steps">
  <li class="step">
    <div class="step-num">1</div>
    <div class="step-body">
      <strong>Başlık</strong>
      <p>Açıklama.</p>
    </div>
  </li>
</ul>

// Örnek API isteği
const res = await fetch('https://api.avartech.net/v1/stops', {
  headers: { 'Authorization': 'Bearer YOUR_API_KEY' }
});
const data = await res.json();

<div class="code-block">
  <div class="code-block-header">
    <span class="code-lang">JavaScript</span>
    <button class="code-copy" onclick="copyCode(this)">Kopyala</button>
  </div>
  <pre>// kod buraya</pre>
</div>

<table class="prop-table">
  <thead><tr>
    <th>Parametre</th><th>Tür</th><th>Açıklama</th>
  </tr></thead>
  <tbody>
    <tr>
      <td>stop_id</td>
      <td><span class="badge gray">string</span></td>
      <td>Durak benzersiz kimliği</td>
    </tr>
  </tbody>
</table>

<div class="tabs" id="MY_TABS">
  <div class="tab-nav">
    <button class="tab-btn active"
      onclick="switchTab('MY_TABS','panel-1',this)">Sekme 1</button>
    <button class="tab-btn"
      onclick="switchTab('MY_TABS','panel-2',this)">Sekme 2</button>
  </div>
  <div class="tab-panel active" id="panel-1">İçerik 1</div>
  <div class="tab-panel" id="panel-2">İçerik 2</div>
</div>

<div class="expand">
  <button class="expand-trigger" onclick="toggleExpand(this)">
    Başlık <span class="expand-chevron">›</span>
  </button>
  <div class="expand-body">İçerik burada.</div>
</div>

<div class="card-grid">
  <div class="doc-card" onclick="showPage('hedef-sayfa')">
    <div class="doc-card-icon">📦</div>
    <div class="doc-card-title">Başlık</div>
    <div class="doc-card-desc">Açıklama.</div>
  </div>
</div>

<!-- sidebar içine -->
<a class="sidebar-item" onclick="showPage('benim-sayfam')" data-page="benim-sayfam">
  <span class="si-icon">📄</span> Sayfa Adı
</a>

<div class="doc-page" id="page-benim-sayfam" data-toc='[
  {"id":"bolum-1","text":"Bölüm 1","level":2},
  {"id":"bolum-2","text":"Bölüm 2","level":2}
]'>
  <div class="doc-meta">
    <span class="doc-category">KATEGORİ</span>
    <span class="doc-sep">·</span>
    <span class="doc-updated">Son güncelleme: GÜN AY YIL</span>
  </div>
  <h1>Sayfa <em>Başlığı</em></h1>
  <p class="doc-lead">Kısa açıklama.</p>

  <h2 id="bolum-1">Bölüm 1</h2>
  <p>İçerik...</p>
</div>

const AVAR_BASE = 'https://api.avartech.net/api';

const AvarAuthHelper = {
  get token() {
    return localStorage.getItem('avar_token');
  },
  get refreshToken() {
    return localStorage.getItem('avar_refresh_token');
  },
  saveAuth(data) {
    localStorage.setItem('avar_token', data.token);
    localStorage.setItem('avar_refresh_token', data.refresh_token || '');
    localStorage.setItem('avar_user', JSON.stringify(data.user || null));
  },
  clearAuth() {
    localStorage.removeItem('avar_token');
    localStorage.removeItem('avar_refresh_token');
    localStorage.removeItem('avar_user');
  },
  async login(email, password) {
    const res = await fetch(`${AVAR_BASE}/avar-id/auth/login`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email, password }),
    });
    if (!res.ok) throw new Error('Login failed');
    const data = await res.json();
    this.saveAuth(data);
    return data;
  },
  async refresh() {
    const res = await fetch(`${AVAR_BASE}/avar-id/auth/refresh`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ refresh_token: this.refreshToken }),
    });
    if (!res.ok) throw new Error('Refresh failed');
    const data = await res.json();
    this.saveAuth(data);
    return data;
  },
  async logout() {
    await fetch(`${AVAR_BASE}/avar-id/auth/logout`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ refresh_token: this.refreshToken }),
    });
    this.clearAuth();
  },
  async getMe() {
    const res = await fetch(`${AVAR_BASE}/avar-id/me`, {
      headers: { Authorization: `Bearer ${this.token}` },
    });
    if (res.status === 401) {
      await this.refresh();
      return this.getMe();
    }
    if (!res.ok) throw new Error('getMe failed');
    return res.json();
  },
};

import express from 'express';

const app = express();
const AVAR_BASE = 'https://api.avartech.net/api';

async function verifyWithAvarId(accessToken) {
  const res = await fetch(`${AVAR_BASE}/avar-id/me`, {
    headers: { Authorization: `Bearer ${accessToken}` },
  });

  if (!res.ok) {
    throw new Error('Invalid token');
  }

  return res.json();
}

async function requireAvarAuth(req, res, next) {
  const header = req.headers.authorization || '';
  if (!header.startsWith('Bearer ')) {
    return res.status(401).json({ error: 'Missing bearer token' });
  }

  const token = header.slice(7);
  try {
    const me = await verifyWithAvarId(token);
    req.avarUser = me.user;
    return next();
  } catch {
    return res.status(401).json({ error: 'Unauthorized' });
  }
}

app.get('/protected', requireAvarAuth, (req, res) => {
  return res.json({ ok: true, user: req.avarUser });
});

┌─────────────┐                                    ┌──────────────┐
│  Tarayıcı  │                                    │   Avar ID    │
│ (Senin App)│                                    │   Sunucusu   │
└──────┬──────┘                                    └──────┬───────┘
       │                                                  │
       │ 1. PKCE parametreleri üret                      │
       │    - code_verifier (128 char)                   │
       │    - code_challenge (SHA256)                    │
       │                                                │
       │ 2. /authorize'a yönlendir                       │
       ├─────────────────────────────────────────────→  │
       │ GET /api/avar-id/oauth/authorize               │
       │ ?client_id=...&scope=...&state=...             │
       │ &code_challenge=...&code_challenge_method=S256 │
       │                                                │
       │ 3. Rıza ekranı göster                          │
       │ ← ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ │
       │ HTTP 302 + session_id                         │
       │                                                │
       │ 4. Kullanıcı rıza ver                          │
       │                                                │
       │ 5. Geri döndür                                 │
       │ ← ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ │
       │ HTTP 302 ?code=...&state=...                  │
       │                                                │
       │ 6. Backend'e token isteğinde bulun            │
       ├─────────────────────────────────────────────→  │
       │ POST /api/avar-id/oauth/token                 │
       │ grant_type=authorization_code                 │
       │ code=...                                       │
       │ code_verifier=... (orijinal!)                 │
       │ client_id=...&client_secret=...              │
       │                                                │
       │ 7. Token'ı al                                  │
       │ ← ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ │
       │ { "access_token": "...", ... }               │
       │                                                │
       │ 8. User profile'ı al                           │
       ├─────────────────────────────────────────────→  │
       │ GET /api/avar-id/user/profile                 │
       │ Authorization: Bearer                  │
       │                                                │
       │ 9. Profili al                                  │
       │ ← ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ │
       │ { "user_id": "...", "email": "..." }         │
       │                                                │

const state = crypto.randomBytes(32).toString('hex');
const { verifier, challenge } = generatePKCE();

// Session'da sakla (prod'da Redis/DB kullan)
session.pkceVerifier = verifier;
session.state = state;

const params = new URLSearchParams({
  client_id: process.env.CLIENT_ID,
  redirect_uri: process.env.REDIRECT_URI,
  response_type: 'code',
  scope: 'openid email profile',
  state: state,
  code_challenge: challenge,
  code_challenge_method: 'S256'
});

const authorizeUrl = `https://api.avartech.net/api/avar-id/oauth/authorize?${params}`;
res.redirect(authorizeUrl);

app.get('/oauth/callback', (req, res) => {
  const { code, state, error } = req.query;

  // Hata kontrolü
  if (error) {
    return res.status(400).send(
      `Hata: ${error} - ${req.query.error_description}`
    );
  }

  // State kontrolü (CSRF)
  if (state !== session.state) {
    return res.status(403).send('State mismatch!');
  }

  // Token exchange'e git
  exchangeCodeForToken(code, session.pkceVerifier);
});

async function exchangeCodeForToken(code, codeVerifier) {
  try {
    const response = await fetch(
      'https://api.avartech.net/api/avar-id/oauth/token',
      {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: new URLSearchParams({
          grant_type: 'authorization_code',
          code: code,
          code_verifier: codeVerifier, // ← PKCE için zorunlu
          client_id: process.env.CLIENT_ID,
          client_secret: process.env.CLIENT_SECRET,
          redirect_uri: process.env.REDIRECT_URI
        })
      }
    );

    const tokenData = await response.json();

    if (!response.ok) {
      throw new Error(tokenData.error_description);
    }

    // Token'ları güvenli bir şekilde kaydet
    session.accessToken = tokenData.access_token;
    session.refreshToken = tokenData.refresh_token;

  } catch (error) {
    console.error('Token exchange failed:', error);
  }
}

const profile = await fetch(
  'https://api.avartech.net/api/avar-id/user/profile',
  {
    headers: {
      'Authorization': `Bearer ${session.accessToken}`
    }
  }
).then(r => r.json());

console.log(profile);
// {
//   user_id: '507f1f77bcf86cd799439011',
//   username: 'coffee_lover',
//   email: 'user@example.com',
//   display_name: 'Coffee Lover',
//   avatar_url: '...',
//   ...
// }

POST /api/avar-id/oauth/authorize HTTP/1.1
Host: api.avartech.net
Content-Type: application/json

{
  "username": "user@example.com",
  "password": "securepass",
  "client_id": "app_....",
  "scope": "openid email profile"
}

GET /api/avar-id/oauth/session/sess_789abc/consent-check HTTP/1.1
Host: api.avartech.net
Authorization: Bearer 

{
  "can_auto_approve": true,
  "previous_scopes": ["openid", "email", "profile"],
  "message": "User hasiously consented to these scopes"
}

async function checkAndAutoApprove(sessionId, userToken) {
  const check = await fetch(
    `https://api.avartech.net/api/avar-id/oauth/session/${sessionId}/consent-check`,
    {
      headers: { 'Authorization': `Bearer ${userToken}` }
    }
  ).then(r => r.json());

  if (!check.can_auto_approve) {
    // Rıza ekranı göster
    return displayConsentScreen();
  }

  // Auto-approve
  const approval = await fetch(
    `https://api.avartech.net/api/avar-id/oauth/session/${sessionId}/approve`,
    {
      method: 'POST',
      headers: { 'Authorization': `Bearer ${userToken}` },
      body: JSON.stringify({ remember: true })
    }
  ).then(r => r.json());

  // Redirect
  window.location = approval.redirect_uri;
}

HTTP/1.1 302 Found
Location: https://api.avartech.net/api/avar-id/oauth/authorize?session_id=sess_...
Set-Cookie: session_id=sess_...; Path=/; HttpOnly; Secure

POST /api/avar-id/oauth/token HTTP/1.1
Host: api.avartech.net
Content-Type: application/x-www-form-urlencoded

grant_type=authorization_code&code=authcode_xyz...&code_verifier=verifier_128_chars...&client_id=app_...&client_secret=secret_...&redirect_uri=https://app.example.com/callback

{
  "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
  "token_type": "Bearer",
  "expires_in": 3600,
  "refresh_token": "refresh_token_xyz...",
  "scope": "openid email profile"
}

GET /api/avar-id/user/profile HTTP/1.1
Host: api.avartech.net
Authorization: Bearer 

{
  "user_id": "507f1f77bcf86cd799439011",
  "username": "coffee_lover_42",
  "email": "user@example.com",
  "display_name": "Coffee Lover",
  "avatar_url": "https://example.com/avatars/user_507f.jpg",
  "bio": "Coffee enthusiast",
  "location": "Seattle, WA",
  "created_at": "2024-01-15T10:30:00Z",
  "verified": true
}

POST /api/avar-id/oauth/session/sess_789/approve HTTP/1.1
Host: api.avartech.net
Authorization: Bearer 
Content-Type: application/json

{
  "remember": true
}

{
  "status": "approved",
  "authorization_code": "authcode_xyz123...",
  "code_expires_at": "2026-03-27T10:40:00Z",
  "redirect_uri": "https://app.example.com/callback?code=authcode_xyz...&state=xyz..."
}

POST /api/avar-id/dev/apps HTTP/1.1
Host: api.avartech.net
Authorization: Bearer 
Content-Type: application/json

{
  "name": "Coffee Club",
  "description": "Share coffee recipes",
  "website": "https://coffeeclub.example.com",
  "icon_url": "https://cdn.example.com/icon.png",
  "redirect_uris": ["https://coffeeclub.example.com/callback"],
  "scopes": ["openid", "email", "profile", "chat:read"]
}

{
  "app_id": "app_xyz...",
  "client_id": "app_xyz...",
  "client_secret": "secret_abc123...",
  "name": "Coffee Club",
  "scopes": ["openid", "email", "profile", "chat:read"],
  "created_at": "2026-03-27T10:30:00Z"
}

https://app.example.com/callback?
  error=invalid_scope&
  error_description=Scope+%27chat%3Awrite%27+not+allowed&
  state=xyz123

{
  "error": "invalid_code",
  "error_description": "Authorization code has expired",
  "timestamp": "2026-03-27T10:35:00Z",
  "request_id": "req_xyz123_abcdef"
}

// ✅ Doğru — Her seferinde yeni
const state = crypto.randomBytes(32).toString('hex');
session.state = state;

// ❌ Yanlış — Fixed
const state = 'my_fixed_state';

// ❌ Yanlış — Tahmin edilebilir
const state = Math.rand().toString();

// ✅ HttpOnly Cookie (XSS'e karşı)
res.cookie('access_token', tokenData.access_token, {
  httpOnly: true,    // JavaScript erişemiyor
  secure: true,      // HTTPS-only
  sameSite: 'strict', // CSRF koruması
  maxAge: 3600000    // 1 hour
});

import express from 'express';
import fetch from 'node-fetch';
import crypto from 'crypto';
require('dotenv').config();

const app = express();
const sessions = new Map();

function generatePKCE() {
  const v = crypto.randomBytes(96).toString('base64').replace(/[^a-zA-Z0-9_-]/g, '');
  const c = crypto.createHash('sha256').update(v).digest('base64').replace(/[^a-zA-Z0-9_-]/g, '');
  return { verifier: v, challenge: c };
}

app.get('/login', (req, res) => {
  const { verifier, challenge } = generatePKCE();
  const state = crypto.randomBytes(32).toString('hex');
  const sid = 'sess_' + Date.now();
  sessions.set(sid, { verifier, state });

  const url = new URL('https://api.avartech.net/api/avar-id/oauth/authorize');
  url.searchParams.set('client_id', process.env.CLIENT_ID);
  url.searchParams.set('redirect_uri', process.env.REDIRECT_URI);
  url.searchParams.set('response_type', 'code');
  url.searchParams.set('scope', 'openid email profile');
  url.searchParams.set('state', state);
  url.searchParams.set('code_challenge', challenge);
  url.searchParams.set('code_challenge_method', 'S256');

  res.redirect(url.toString());
});

app.get('/oauth/callback', async (req, res) => {
  const { code, state, error } = req.query;

  if (error) return res.status(400).send(`Error: ${error}`);

  const sid = Array.from(sessions.keys())[0];
  const session = sessions.get(sid);

  if (state !== session.state) return res.status(403).send('State mismatch');

  try {
    const tokenRes = await fetch('https://api.avartech.net/api/avar-id/oauth/token', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: new URLSearchParams({
        grant_type: 'authorization_code',
        code,
        code_verifier: session.verifier,
        client_id: process.env.CLIENT_ID,
        client_secret: process.env.CLIENT_SECRET,
        redirect_uri: process.env.REDIRECT_URI
      })
    });

    const tokenData = await tokenRes.json();
    if (!tokenRes.ok) throw new Error(tokenData.error);

    const userRes = await fetch('https://api.avartech.net/api/avar-id/user/profile', {
      headers: { Authorization: `Bearer ${tokenData.access_token}` }
    });

    const user = await userRes.json();
    res.json({ success: true, user });
  } catch (err) {
    res.status(400).json({ error: err.message });
  }
});

app.listen(3000, () => console.log('Server running on :3000'));

from flask import Flask, redirect, request, session, jsonify
import requests
import os
import secrets
import hashlib
import base64

app = Flask(__name__)
app.secret_key = os.environ.get('SECRET', 'dev')

def generate_pkce():
    v = base64.urlsafe_b64encode(secrets.token_bytes(96)).decode().rstrip('=')
    c = base64.urlsafe_b64encode(hashlib.sha256(v.encode()).digest()).decode().rstrip('=')
    return v, c

@app.route('/login')
def login():
    verifier, challenge = generate_pkce()
    state = secrets.token_hex(32)
    session['pkce_verifier'] = verifier
    session['state'] = state

    params = {
        'client_id': os.environ['CLIENT_ID'],
        'redirect_uri': os.environ['REDIRECT_URI'],
        'response_type': 'code',
        'scope': 'openid email profile',
        'state': state,
        'code_challenge': challenge,
        'code_challenge_method': 'S256'
    }
    url = 'https://api.avartech.net/api/avar-id/oauth/authorize'
    return redirect(f"{url}?{'&'.join(f'{k}={v}' for k,v in params.items())}")

@app.route('/oauth/callback')
def callback():
    code = request.args.get('code')
    state = request.args.get('state')
    error = request.args.get('error')

    if error:
        return jsonify({'error': error}), 400

    if state != session.get('state'):
        return jsonify({'error': 'State mismatch'}), 403

    try:
        token_res = requests.post(
            'https://api.avartech.net/api/avar-id/oauth/token',
            data={
                'grant_type': 'authorization_code',
                'code': code,
                'code_verifier': session['pkce_verifier'],
                'client_id': os.environ['CLIENT_ID'],
                'client_secret': os.environ['CLIENT_SECRET'],
                'redirect_uri': os.environ['REDIRECT_URI']
            }
        )
        tokenData = token_res.json()

        if not token_res.ok:
            raise Exception(tokenData.get('error_description'))

        user_res = requests.get(
            'https://api.avartech.net/api/avar-id/user/profile',
            headers={'Authorization': f"Bearer {tokenData['access_token']}"}
        )
        user = user_res.json()

        return jsonify({'success': True, 'user': user})
    except Exception as err:
        return jsonify({'error': str(err)}), 400

if __name__ == '__main__':
    app.run(debug=True)

import { useEffect } from 'react';

function AvarLoginButton() {
  const login = async () => {
    // PKCE üret
    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-._~';
    let verifier = '';
    for (let i = 0; i < 128; i++) verifier += chars[Math.floor(Math.random() * chars.length)];
    const hash = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(verifier));
    const challenge = btoa(String.fromCharCode(...new Uint8Array(hash))).replace(/[^a-zA-Z0-9_-]/g, '');

    const state = Array.from(crypto.getRandomValues(new Uint8Array(32)))
      .map(x => x.toString(16).padStart(2, '0')).join('');

    // Session'da sakla
    sessionStorage.setItem('pkce_verifier', verifier);
    sessionStorage.setItem('state', state);

    // Yönlendir
    const url = new URL('https://api.avartech.net/api/avar-id/oauth/authorize');
    url.searchParams.set('client_id', process.env.REACT_APP_CLIENT_ID);
    url.searchParams.set('redirect_uri', process.env.REACT_APP_REDIRECT_URI);
    url.searchParams.set('response_type', 'code');
    url.searchParams.set('scope', 'openid email profile');
    url.searchParams.set('state', state);
    url.searchParams.set('code_challenge', challenge);
    url.searchParams.set('code_challenge_method', 'S256');

    window.location = url.toString();
  };

  return Avar ID ile Giriş Yap;
}

export default AvarLoginButton;

{
  "info": { "name": "Avar ID OAuth", "schema": "https://schema.getpostman.com/json/collection/v2.1.0/collection.json" },
  "item": [
    {
      "name": "1. Authorize", "request": {
        "method": "GET",
        "url": "https://api.avartech.net/api/avar-id/oauth/authorize?client_id={{CLIENT_ID}}&redirect_uri={{REDIRECT_URI}}&response_type=code&scope=openid%20email&state={{STATE}}&code_challenge={{CODE_CHALLENGE}}&code_challenge_method=S256"
      }
    },
    {
      "name": "2. Token Exchange", "request": {
        "method": "POST",
        "url": "https://api.avartech.net/api/avar-id/oauth/token",
        "body": { "mode": "urlencoded", "urlencoded": [
          { "key": "grant_type", "value": "authorization_code" },
          { "key": "code", "value": "{{AUTH_CODE}}" },
          { "key": "code_verifier", "value": "{{CODE_VERIFIER}}" },
          { "key": "client_id", "value": "{{CLIENT_ID}}" },
          { "key": "client_secret", "value": "{{CLIENT_SECRET}}" },
          { "key": "redirect_uri", "value": "{{REDIRECT_URI}}" }
        ]}
      }
    },
    {
      "name": "3. User Profile", "request": {
        "method": "GET",
        "url": "https://api.avartech.net/api/avar-id/user/profile",
        "header": [{ "key": "Authorization", "value": "Bearer {{ACCESS_TOKEN}}" }]
      }
    }
  ],
  "variable": [
    { "key": "CLIENT_ID", "value": "" },
    { "key": "CLIENT_SECRET", "value": "" },
    { "key": "REDIRECT_URI", "value": "http://localhost:3000/oauth/callback" },
    { "key": "STATE", "value": "xyz123abc456" },
    { "key": "CODE_VERIFIER", "value": "" },
    { "key": "CODE_CHALLENGE", "value": "" },
    { "key": "AUTH_CODE", "value": "" },
    { "key": "ACCESS_TOKEN", "value": "" }
  ]
}