如何在SPA中正确使用OAuth 2.0？

// 示例代码：SPA使用隐式模式获取令牌
const authEndpoint = 'https://authorization-server.com/auth';
const clientId = 'your-client-id';

window.location.href = `${authEndpoint}?response_type=token&client_id=${clientId}&redirect_uri=${encodeURIComponent(window.location.origin)}`;

// 示例代码：SPA使用PKCE扩展的授权码模式
const authEndpoint = 'https://authorization-server.com/auth';
const clientId = 'your-client-id';
const redirectUri = window.location.origin;
const codeVerifier = generateCodeVerifier();
const codeChallenge = generateCodeChallenge(codeVerifier);

window.location.href = `${authEndpoint}?response_type=code&client_id=${clientId}&redirect_uri=${encodeURIComponent(redirectUri)}&code_challenge=${codeChallenge}`;

// 获取授权码后，使用代码验证器和授权码获取访问令牌
fetchToken(codeVerifier, authorizationCode);

function fetchToken(codeVerifier, authorizationCode) {
  const tokenEndpoint = 'https://authorization-server.com/token';
  const body = new URLSearchParams({
    grant_type: 'authorization_code',
    code: authorizationCode,
    redirect_uri: redirectUri,
    client_id: clientId,
    code_verifier: codeVerifier
  });

  fetch(tokenEndpoint, {
    method: 'POST',
    body: body,
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  })
  .then(response => response.json())
  .then(data => {
    const accessToken = data.access_token;
    // 存储令牌并使用它进行后续请求
  });
}

// 示例代码：使用刷新令牌获取新的访问令牌
function refreshToken(refreshToken) {
  const tokenEndpoint = 'https://authorization-server.com/token';
  const body = new URLSearchParams({
    grant_type: 'refresh_token',
    refresh_token: refreshToken,
    client_id: clientId
  });

  fetch(tokenEndpoint, {
    method: 'POST',
    body: body,
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  })
  .then(response => response.json())
  .then(data => {
    const newAccessToken = data.access_token;
    // 更新存储的访问令牌
  });
}