<template>
  <div class="help-content">
    <div class="content-header">
      <h2>接口对比：/login vs /sso-login</h2>
      <el-button type="primary" size="small" plain @click="downloadDoc('/docs/api_comparison.md', 'API_Comparison_Guide.md')">
        <el-icon style="margin-right: 5px"><Download /></el-icon>
        下载 开发文档
      </el-button>
    </div>
    <p class="intro">平台提供了两个登录接口，它们在功能上有一定重叠，但<strong>设计目的和使用场景不同</strong>。本章节详细对比两个接口的区别，帮助您选择最合适的接口。</p>

    <div class="section">
      <h3>1. /login 接口（通用登录）</h3>
      
      <div class="feature-card">
        <h4>✅ 适用场景</h4>
        <ul>
          <li>后端服务器直接调用（推荐使用签名验证）</li>
          <li>需要签名验证保证安全性的场景</li>
          <li>平台登录（不提供 <code>app_id</code>）不限应用协议</li>
          <li>应用 SSO（提供 <code>app_id</code>）：仅 <code>SIMPLE_API</code> 与 <code>OIDC</code> 返回 <code>ticket</code>；<code>NONE</code>（导航）不提供票据，请使用 <code>/sso-login</code></li>
        </ul>
      </div>

      <div class="feature-card">
        <h4>🔑 接口特点</h4>
        <ul>
          <li><strong>双模式设计</strong>：根据是否提供 <code>app_id</code> 返回不同结果
            <ul>
              <li>不提供 <code>app_id</code>：返回平台 <code>access_token</code>（用于访问平台管理功能）</li>
              <li>提供 <code>app_id</code>：对 <code>SIMPLE_API</code> / <code>OIDC</code> 返回 <code>ticket</code>；<code>NONE</code> 返回错误（请用 <code>/sso-login</code>）</li>
            </ul>
          </li>
          <li><strong>支持签名验证</strong>：<code>sign</code> 和 <code>timestamp</code> 可选，但推荐使用</li>
          <li><strong>返回原始票据</strong>：只返回 <code>ticket</code>，需要调用方自己构建跳转 URL</li>
        </ul>
      </div>

      <h4>📝 请求参数</h4>
      <table class="param-table">
        <thead>
          <tr><th>字段</th><th>必填</th><th>说明</th></tr>
        </thead>
        <tbody>
          <tr>
            <td><code>app_id</code></td>
            <td><span class="tag-optional">选填</span></td>
            <td>不提供时为平台登录，提供时为应用 SSO 登录</td>
          </tr>
          <tr>
            <td><code>identifier</code></td>
            <td><span class="tag-required">必填</span></td>
            <td>用户标识：手机号、映射key或映射email</td>
          </tr>
          <tr>
            <td><code>password</code></td>
            <td><span class="tag-required">必填</span></td>
            <td>用户密码</td>
          </tr>
          <tr>
            <td><code>sign</code></td>
            <td><span class="tag-optional">选填</span></td>
            <td>签名（如果提供，必须同时提供timestamp）</td>
          </tr>
          <tr>
            <td><code>timestamp</code></td>
            <td><span class="tag-optional">选填</span></td>
            <td>时间戳（如果提供，必须同时提供sign）</td>
          </tr>
        </tbody>
      </table>

      <h4>📤 响应示例</h4>
      <p><strong>场景1：应用 SSO 登录（提供 app_id）</strong></p>
      <div class="code-block">
        <pre>
// 请求
{
  "app_id": "your_app_id",
  "identifier": "13800138000",
  "password": "user_password_123",
  "timestamp": 1709876543,
  "sign": "a1b2c3d4e5..." 
}

// 响应
{
  "ticket": "TICKET-7f8e9d0a-..."
}
        </pre>
      </div>

      <p><strong>场景2：平台登录（不提供 app_id）</strong></p>
      <div class="code-block">
        <pre>
// 请求
{
  "identifier": "13800138000",
  "password": "admin_password_123"
}

// 响应
{
  "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
  "token_type": "bearer",
  "role": "SUPER_ADMIN"
}
        </pre>
      </div>
    </div>

    <el-divider />

    <div class="section">
      <h3>2. /sso-login 接口（简易 SSO 登录）</h3>
      
      <div class="feature-card">
        <h4>✅ 适用场景</h4>
        <ul>
          <li>前端浏览器调用（简化跳转流程）</li>
          <li>支持基于会话的单点登录（用户已在平台登录）</li>
          <li>快速实现跨应用免登录</li>
          <li>支持 <code>SIMPLE_API</code>（<code>redirect_url</code> 含 <code>ticket</code>）、<code>OIDC</code>（返回 <code>scheme://host</code> 入口）与 <code>NONE</code>（导航 URL，无 ticket）；完整 OIDC 授权码流仍走 Hydra</li>
        </ul>
      </div>

      <div class="feature-card">
        <h4>🔑 接口特点</h4>
        <ul>
          <li><strong>双认证模式</strong>：
            <ol>
              <li><strong>会话认证优先</strong>：如果用户已登录 UAP 平台（携带有效 token），自动使用当前用户身份</li>
              <li><strong>凭据认证备用</strong>：如果未登录，可以提供 <code>username</code> 和 <code>password</code> 进行认证</li>
            </ol>
          </li>
          <li><strong>直接返回跳转 URL</strong>：返回完整的 <code>redirect_url</code>，前端直接跳转即可</li>
          <li><strong>无需签名</strong>：简化调用流程，适合前端使用</li>
          <li><strong>应用协议</strong>：<code>SIMPLE_API</code> / <code>OIDC</code> / <code>NONE</code>，详见下方 <code>redirect_url</code> 说明</li>
        </ul>
      </div>

      <h4>📝 请求参数</h4>
      <table class="param-table">
        <thead>
          <tr><th>字段</th><th>必填</th><th>说明</th></tr>
        </thead>
        <tbody>
          <tr>
            <td><code>app_id</code></td>
            <td><span class="tag-required">必填</span></td>
            <td>应用ID；支持 <code>SIMPLE_API</code>、<code>OIDC</code>、<code>NONE</code></td>
          </tr>
          <tr>
            <td><code>username</code></td>
            <td><span class="tag-conditional">条件必填</span></td>
            <td>用户名（如果用户未登录UAP，则必须提供）</td>
          </tr>
          <tr>
            <td><code>password</code></td>
            <td><span class="tag-conditional">条件必填</span></td>
            <td>密码（如果用户未登录UAP，则必须提供）</td>
          </tr>
        </tbody>
      </table>

      <h4>📤 使用示例</h4>
      <p><strong>场景1：用户已在 UAP 登录（会话认证）</strong></p>
      <div class="code-block">
        <pre>
// JavaScript 前端代码
const response = await fetch('/api/v1/simple/sso-login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ' + localStorage.getItem('access_token')
  },
  body: JSON.stringify({ 
    app_id: 'my_app_123' 
  })
});

const { redirect_url } = await response.json();
window.location.href = redirect_url;  // 直接跳转

// 响应示例（SIMPLE_API 含 ticket；OIDC 为 scheme://host；NONE 为导航 URL 无 ticket）
{
  "redirect_url": "https://your-app.com/callback?ticket=TICKET-xxx"
}
        </pre>
      </div>

      <p><strong>场景2：用户未登录（凭据认证）</strong></p>
      <div class="code-block">
        <pre>
// JavaScript 前端代码
const response = await fetch('/api/v1/simple/sso-login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    app_id: 'my_app_123',
    username: '13800138000',
    password: 'password123'
  })
});

const { redirect_url } = await response.json();
window.location.href = redirect_url;  // 直接跳转

// 响应示例（协议不同则 redirect_url 含义不同，见上文）
{
  "redirect_url": "https://your-app.com/callback?ticket=TICKET-xxx"
}
        </pre>
      </div>
    </div>

    <el-divider />

    <div class="section">
      <h3>3. 核心区别总结</h3>
      <table class="comparison-table">
        <thead>
          <tr>
            <th style="width: 20%">特性</th>
            <th style="width: 40%">/login</th>
            <th style="width: 40%">/sso-login</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><strong>认证方式</strong></td>
            <td>只支持用户名+密码</td>
            <td><span class="highlight">支持会话认证 OR 用户名+密码</span></td>
          </tr>
          <tr>
            <td><strong>签名验证</strong></td>
            <td><span class="success">✅ 支持（可选）</span></td>
            <td>❌ 不支持</td>
          </tr>
          <tr>
            <td><strong>应用协议（app_id 场景）</strong></td>
            <td><code>SIMPLE_API</code> / <code>OIDC</code> 可返回 <code>ticket</code>；<code>NONE</code> 不支持</td>
            <td><code>SIMPLE_API</code> / <code>OIDC</code> / <code>NONE</code> 均可返回 <code>redirect_url</code></td>
          </tr>
          <tr>
            <td><strong>返回值</strong></td>
            <td><code>ticket</code> 或 <code>access_token</code></td>
            <td><span class="highlight"><code>redirect_url</code>（依协议可能含 ticket 或为导航 URL）</span></td>
          </tr>
          <tr>
            <td><strong>会话支持</strong></td>
            <td>❌ 不支持</td>
            <td><span class="success">✅ 支持（优先使用）</span></td>
          </tr>
          <tr>
            <td><strong>适用端</strong></td>
            <td>后端服务器</td>
            <td><span class="highlight">前端浏览器</span></td>
          </tr>
          <tr>
            <td><strong>使用复杂度</strong></td>
            <td>中等（需要自己构建跳转）</td>
            <td><span class="success">简单（直接跳转）</span></td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="section">
      <h3>4. 选择建议</h3>
      <table class="recommendation-table">
        <thead>
          <tr>
            <th style="width: 35%">使用场景</th>
            <th style="width: 25%">推荐接口</th>
            <th style="width: 40%">原因</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>后端服务器调用</td>
            <td><span class="recommend-badge">/login</span></td>
            <td>支持签名验证，安全性更高</td>
          </tr>
          <tr>
            <td>前端浏览器跳转</td>
            <td><span class="recommend-badge">/sso-login</span></td>
            <td>直接返回跳转 URL，简化流程</td>
          </tr>
          <tr>
            <td>单点登录（已登录用户）</td>
            <td><span class="recommend-badge">/sso-login</span></td>
            <td>支持会话认证，无需再次输入密码</td>
          </tr>
          <tr>
            <td>OIDC 应用</td>
            <td><span class="recommend-badge">/login</span> 或 Hydra</td>
            <td>服务端取 ticket 用 <code>/login</code>；完整授权码与 Token 走 Hydra；浏览器已登录时也可用 <code>/sso-login</code> 取入口 URL</td>
          </tr>
          <tr>
            <td>需要平台管理功能</td>
            <td><span class="recommend-badge">/login</span></td>
            <td>获取平台 access_token（不提供 app_id）</td>
          </tr>
          <tr>
            <td>跨应用免登录</td>
            <td><span class="recommend-badge">/sso-login</span> 或 <span class="recommend-badge">/exchange</span></td>
            <td>取决于是否需要服务端签名</td>
          </tr>
        </tbody>
      </table>
    </div>

    <el-alert title="💡 最佳实践建议" type="info" :closable="false" show-icon class="alert-box">
      <div>
        <ul style="margin: 0; padding-left: 20px;">
          <li>如果您的应用是<strong>前端单页应用（SPA）</strong>且需要实现单点登录，推荐使用 <code>/sso-login</code></li>
          <li>如果您需要从<strong>服务器端</strong>进行认证并需要更高的安全性，推荐使用 <code>/login</code> 接口（带签名）</li>
          <li>对于用户已经在 UAP 平台登录的场景，<code>/sso-login</code> 可以提供<strong>无缝的跳转体验</strong></li>
          <li>如果您的应用使用 <strong>OIDC 协议</strong>，完整登录请走 Hydra 授权码流程；已登录 UAP 需要快捷入口时可调用 <code>/sso-login</code></li>
        </ul>
      </div>
    </el-alert>
  </div>
</template>

<script setup lang="ts">
import { Download } from '@element-plus/icons-vue'
import { useHelpDocs } from '../../composables/useHelpDocs'

const { downloadDoc } = useHelpDocs()
</script>

<style scoped>
@import './help.css';
</style>
