JavaScript OAuth认证流程-js教程-PHP中文网

JavaScript OAuth认证流程

夜晨

发布： 2025-10-16 11:02:01

原创

1084人浏览过

使用OAuth 2.0 + PKCE实现前端安全授权，首先生成code verifier和challenge，再重定向至第三方登录页，用户授权后回调获取code，最后用code和verifier换取access token并调用API，建议由后端完成token交换以提升安全性。

javascript oauth认证流程

JavaScript 实现 OAuth 认证流程通常用于前端应用（如单页应用 SPA）与第三方服务（如 Google、GitHub、Facebook）进行安全授权。由于 JavaScript 运行在浏览器端，不能安全存储密钥，因此推荐使用 OAuth 2.0 的授权码流程 + PKCE（Proof Key for Code Exchange），这是目前最安全且广泛支持的方式。

1. OAuth 2.0 + PKCE 流程简介

PKCE 是标准授权码流程的增强版本，防止授权码被中间人劫持。适用于无法安全保存客户端密钥的场景，比如纯前端应用。

主要步骤如下：

生成 code verifier 和 code challenge：前端生成一个随机字符串（code verifier），并将其转换为 code challenge（通常用 SHA-256 hash）。
重定向用户到授权服务器：将 client_id、redirect_uri、scope、response_type=code、code_challenge 和 code_challenge_method 发送到第三方认证地址。
用户登录并授权：第三方服务提示用户登录并确认授权。
重定向回应用并携带授权码：授权成功后，第三方将用户重定向到 redirect_uri，并附带 authorization code。
前端通过授权码换取 access token：注意：这一步应由你的后端完成。但如果完全前端实现（不推荐），可以使用 public client 方式，但无法使用 client_secret。

2. 前端实现关键代码示例（以 GitHub 登录为例）

注意：真实项目中，获取 token 应由后端完成，避免暴露逻辑。

步骤 1：生成 Code Verifier 和 Challenge

立即学习“Java免费学习笔记（深入）”；

豆包AI编程

豆包推出的AI编程助手

483

查看详情

function generateCodeVerifier() {
  const array = new Uint8Array(32);
  crypto.getRandomValues(array);
  return btoa(String.fromCharCode(...array))
    .replace(/\+/g, '-')
    .replace(/\//g, '_')
    .replace(/=+$/, '');
}

async function generateCodeChallenge(verifier) {
  const data = new TextEncoder().encode(verifier);
  const digest = await crypto.subtle.digest('SHA-256', data);
  return btoa(String.fromCharCode(...new Uint8Array(digest)))
    .replace(/\+/g, '-')
    .replace(/\//g, '_')
    .replace(/=+$/, '');
}

登录后复制

步骤 2：跳转到 GitHub 授权页面

async function redirectToAuth() {
  const clientId = 'your_client_id';
  const redirectUri = 'https://yourapp.com/callback';
  const scope = 'user:email';
  
  const codeVerifier = generateCodeVerifier();
  const codeChallenge = await generateCodeChallenge(codeVerifier);

  // 存储 codeVerifier，后续换 token 时需要
  sessionStorage.setItem('code_verifier', codeVerifier);

  const authUrl = new URL('https://github.com/login/oauth/authorize');
  authUrl.searchParams.append('client_id', clientId);
  authUrl.searchParams.append('redirect_uri', redirectUri);
  authUrl.searchParams.append('scope', scope);
  authUrl.searchParams.append('response_type', 'code');
  authUrl.searchParams.append('code_challenge', codeChallenge);
  authUrl.searchParams.append('code_challenge_method', 'S256');

  window.location.href = authUrl.toString();
}

登录后复制

步骤 3：回调页处理授权码并请求 Token

在 https://yourapp.com/callback 页面中提取 code，并用 code + code_verifier 换取 token：

async function handleCallback() {
  const urlParams = new URLSearchParams(window.location.search);
  const code = urlParams.get('code');
  if (!code) return;

  const codeVerifier = sessionStorage.getItem('code_verifier');
  if (!codeVerifier) return;

  const tokenUrl = 'https://github.com/login/oauth/access_token';
  const params = new URLSearchParams();
  params.append('client_id', 'your_client_id');
  params.append('code', code);
  params.append('code_verifier', codeVerifier);
  params.append('redirect_uri', 'https://yourapp.com/callback');

  const response = await fetch(tokenUrl, {
    method: 'POST',
    headers: { 'Accept': 'application/json', 'Content-Type': 'application/x-www-form-urlencoded' },
    body: params
  });

  const data = await response.json();
  if (data.access_token) {
    sessionStorage.setItem('access_token', data.access_token);
    window.location.href = '/'; // 回主页面
  }
}

登录后复制

3. 使用 Access Token 调用 API

拿到 token 后，可在请求头中携带它调用第三方 API：

fetch('https://api.github.com/user', {
  headers: { 'Authorization': `Bearer ${access_token}` }
})
.then(res => res.json())
.then(user => console.log(user));

登录后复制