客户端接入教程

GET https://api.sso.zdzz.top/oauth/authorize

https://api.sso.zdzz.top/oauth/authorize?response_type=code&client_id=your_client_id&redirect_uri=https://yourapp.com/callback&scope=openid%20profile%20email&state=random_state&code_challenge=xxxxxx&code_challenge_method=S256

https://yourapp.com/callback?code=AUTHORIZATION_CODE&state=random_state

POST https://api.sso.zdzz.top/oauth/token
Content-Type: application/x-www-form-urlencoded

{
  "access_token": "eyJhbGciOiJSUzI1NiIs...",
  "refresh_token": "V1StGXR8_5VH3...",
  "id_token": "eyJhbGciOiJSUzI1NiIs...",
  "expires_in": 1800,
  "token_type": "Bearer"
}

GET https://api.sso.zdzz.top/oauth/userinfo
Authorization: Bearer <access_token>

{
  "sub": "1",
  "name": "zhangsan",
  "picture": "/avatars/1.png",
  "email": "zhangsan@example.com",
  "email_verified": true,
  "phone_number": "138****1234",
  "phone_number_verified": true
}

POST https://api.sso.zdzz.top/oauth/token
Content-Type: application/x-www-form-urlencoded

grant_type=refresh_token&refresh_token=<refresh_token>&client_id=<client_id>

{
  "access_token": "新的 access_token",
  "refresh_token": "新的 refresh_token",
  "expires_in": 1800,
  "token_type": "Bearer"
}

POST https://api.sso.zdzz.top/oauth/token
Content-Type: application/x-www-form-urlencoded

grant_type=client_credentials&client_id=<client_id>&client_secret=<client_secret>

{
  "access_token": "eyJhbGciOiJSUzI1NiIs...",
  "expires_in": 1800,
  "token_type": "Bearer"
}

POST https://api.sso.zdzz.top/oauth/revoke
Content-Type: application/json

{
  "token": "<access_token 或 refresh_token>"
}

GET https://api.sso.zdzz.top/oauth/.well-known/openid-configuration

GET https://api.sso.zdzz.top/oauth/jwks.json

import { useEffect, useState } from 'react';

const CLIENT_ID = 'your_client_id';
const REDIRECT_URI = window.location.origin + '/callback';
const SSO_BASE = 'https://api.sso.zdzz.top';

function base64urlEncode(buffer: Uint8Array) {
  return btoa(String.fromCharCode(...buffer))
    .replace(/\+/g, '-')
    .replace(/\//g, '_')
    .replace(/=+$/, '');
}

async function generatePKCE() {
  const verifierArr = new Uint8Array(32);
  crypto.getRandomValues(verifierArr);
  const codeVerifier = base64urlEncode(verifierArr);

  const encoder = new TextEncoder();
  const hash = await crypto.subtle.digest('SHA-256', encoder.encode(codeVerifier));
  const codeChallenge = base64urlEncode(new Uint8Array(hash));

  return { codeVerifier, codeChallenge };
}

export default function LoginButton() {
  const [user, setUser] = useState(null);

  const handleLogin = async () => {
    const state = crypto.randomUUID();
    const { codeVerifier, codeChallenge } = await generatePKCE();

    // 保存到 sessionStorage
    sessionStorage.setItem('pkce_verifier', codeVerifier);
    sessionStorage.setItem('oauth_state', state);

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

    window.location.href = `${SSO_BASE}/oauth/authorize?${params}`;
  };

  // 处理回调
  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const code = params.get('code');
    const state = params.get('state');

    if (!code) return;

    const savedState = sessionStorage.getItem('oauth_state');
    const codeVerifier = sessionStorage.getItem('pkce_verifier');

    if (state !== savedState || !codeVerifier) {
      console.error('State 或 PKCE 验证失败');
      return;
    }

    // 用授权码换令牌（公开客户端不需要 client_secret）
    fetch(`${SSO_BASE}/oauth/token`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: new URLSearchParams({
        grant_type: 'authorization_code',
        code,
        redirect_uri: REDIRECT_URI,
        code_verifier: codeVerifier,
        client_id: CLIENT_ID,
      }),
    })
      .then((res) => res.json())
      .then((tokens) => {
        // 获取用户信息
        return fetch(`${SSO_BASE}/oauth/userinfo`, {
          headers: { Authorization: `Bearer ${tokens.access_token}` },
        }).then((res) => res.json());
      })
      .then((userInfo) => {
        setUser(userInfo);
        sessionStorage.removeItem('pkce_verifier');
        sessionStorage.removeItem('oauth_state');
        window.history.replaceState({}, '', '/');
      });
  }, []);

  if (user) {
    return <div>欢迎, {user.name}!</div>;
  }

  return <button onClick={handleLogin}>使用统一账号登录</button>;
}