编辑“︁JavaScript OAuth认证”︁（章节）

= JavaScript OAuth认证 =

== 介绍 ==  
'''OAuth'''（开放授权）是一种行业标准的授权协议，允许用户在不共享密码的情况下，授权第三方应用访问其在其他服务提供者上的资源。在JavaScript中，OAuth常用于实现单点登录（SSO）、API访问控制等场景。本章将详细介绍如何在JavaScript中实现OAuth认证，涵盖基本流程、安全注意事项及实际案例。

== OAuth 2.0 核心概念 ==  
OAuth 2.0 定义了四种授权模式，适用于不同场景：  
1. '''授权码模式（Authorization Code）'''：最安全的模式，适用于有后端的应用。  
2. '''隐式模式（Implicit）'''：适用于纯前端应用（如SPA），但安全性较低。  
3. '''密码模式（Resource Owner Password Credentials）'''：直接传递用户凭据，仅限高度信任的应用。  
4. '''客户端模式（Client Credentials）'''：适用于机器对机器的通信。  

在JavaScript中，常用的是'''授权码模式'''（配合后端）或'''隐式模式'''（纯前端）。

== 隐式模式实现示例 ==  
以下是一个使用隐式模式的JavaScript示例，以GitHub OAuth为例：

<syntaxhighlight lang="javascript">
// 重定向用户到GitHub授权页面
function initiateOAuth() {
    const clientId = 'YOUR_CLIENT_ID';
    const redirectUri = encodeURIComponent('https://your-app.com/callback');
    const scope = 'user:email';
    const authUrl = `https://github.com/login/oauth/authorize?client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scope}&response_type=token`;
    window.location.href = authUrl;
}

// 从URL片段中解析access_token（回调后执行）
function handleCallback() {
    const hash = window.location.hash.substring(1);
    const params = new URLSearchParams(hash);
    const accessToken = params.get('access_token');

    if (accessToken) {
        fetch('https://api.github.com/user', {
            headers: { 'Authorization': `Bearer ${accessToken}` }
        })
        .then(response => response.json())
        .then(data => console.log('User data:', data));
    }
}
</syntaxhighlight>

'''输入/输出说明'''：  
- 用户被重定向到GitHub，登录后返回包含<code>access_token</code>的URL片段（如<code>https://your-app.com/callback#access_token=xyz</code>）。  
- <code>handleCallback</code>解析令牌并请求GitHub API，返回用户数据（如ID、邮箱等）。

== 授权码模式（PKCE扩展） ==  
为提高安全性，推荐使用授权码模式 + '''PKCE'''（Proof Key for Code Exchange）。以下是关键步骤：  

1. 生成随机<code>code_verifier</code>和其哈希值<code>code_challenge</code>。  
2. 重定向用户时传递<code>code_challenge</code>。  
3. 回调后，用<code>code_verifier</code>交换令牌。  

<syntaxhighlight lang="javascript">
// 生成PKCE参数
async function generatePKCE() {
    const verifier = generateRandomString(64);
    const challenge = await sha256(verifier);
    return { verifier, challenge };
}

// 重定向到授权端点
function startPKCEFlow() {
    const { verifier, challenge } = await generatePKCE();
    localStorage.setItem('pkce_verifier', verifier);
    const authUrl = `https://auth-server.com/authorize?client_id=CLIENT_ID&code_challenge=${challenge}&code_challenge_method=S256`;
    window.location.href = authUrl;
}

// 交换令牌
async function exchangeCodeForToken(code) {
    const verifier = localStorage.getItem('pkce_verifier');
    const response = await fetch('https://auth-server.com/token', {
        method: 'POST',
        body: new URLSearchParams({
            client_id: 'CLIENT_ID',
            code,
            code_verifier: verifier,
            grant_type: 'authorization_code'
        })
    });
    return response.json(); // 返回 { access_token, refresh_token }
}
</syntaxhighlight>

== 安全注意事项 ==  
* '''令牌存储'''：避免<code>localStorage</code>存储敏感令牌（易受XSS攻击），可改用<code>HttpOnly</code> Cookie。  
* '''重定向URI验证'''：确保服务端校验<code>redirect_uri</code>，防止开放重定向攻击。  
* '''PKCE'''：始终用于公共客户端（如SPA），防止授权码截获。  

== 实际案例：Google登录集成 ==  
以下是通过Google OAuth 2.0实现登录的流程：  

<mermaid>
sequenceDiagram
    participant User
    participant App as JavaScript App
    participant Google as Google Auth Server
    User->>App: 点击“Google登录”
    App->>Google: 重定向到/auth?client_id=ID&redirect_uri=...
    Google->>User: 登录并授权
    User->>App: 返回包含code的URL
    App->>Google: POST /token (带code和client_secret)
    Google->>App: 返回access_token
    App->>Google: GET /userinfo
    Google->>App: 返回用户数据
</mermaid>

== 数学基础：PKCE的code_challenge生成 ==  
PKCE的<code>code_challenge</code>是<code>code_verifier</code>的SHA-256哈希值，再进行Base64编码：  
<math>
\text{code\_challenge} = \text{base64url}(\text{SHA-256}(\text{code\_verifier}))
</math>

== 总结 ==  
JavaScript中的OAuth认证需根据场景选择模式，优先使用PKCE增强安全性。隐式模式适用于简单SPA，而授权码模式更适合需要高安全性的应用。始终遵循最佳实践以保护用户数据。

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript安全]]