OAuth2 流程构建

生成 OAuth 2.0 授权 URL：response_type、client_id、redirect_uri、scope、state、nonce 与 PKCE（code_challenge / S256）一应俱全，附授权码、隐式、客户端凭证三种流程说明与示例代码。

浏览器本地运行所有计算都在你的浏览器里完成，数据不会离开本机。

授权流程

只在本地拼接参数与示例代码，不会发起任何授权或 token 请求；SHA-256 用浏览器的 WebCrypto 计算，verifier 不会离开页面。

授权流程client_id授权端点Token 端点redirect_uriscopestate随机字符串，用于防 CSRF，建议 16 位以上nonce（OIDC 可选）code_challengecode_challenge_method

授权 URL

拼好的授权链接

https://auth.example.com/authorize?response_type=code&client_id=unikit-demo&redirect_uri=https%3A%2F%2Funikit.cc%2Foauth%2Fcallback&scope=openid%20profile%20email&state=f8a1c2d3e4b5a6978877665544332211&nonce=n-0S6_WzA2Mj&code_challenge=E9Melhoa2OwvFrEMTJguCHaoeK1t8URWbuGJSstw-cM&code_challenge_method=S256

查询参数

response_typecode

client_idunikit-demo

redirect_urihttps://unikit.cc/oauth/callback

scopeopenid profile email

statef8a1c2d3e4b5a6978877665544332211

noncen-0S6_WzA2Mj

code_challengeE9Melhoa2OwvFrEMTJguCHaoeK1t8URWbuGJSstw-cM

code_challenge_methodS256

流程说明

客户端生成 code_verifier 与 code_challenge，把浏览器跳到授权端点（response_type=code）。
用户在授权服务器登录并同意授权，浏览器带着 code 回到 redirect_uri。
服务端用 code + code_verifier 调用 token 端点，换回 access_token 与 refresh_token。
access_token 放进 Authorization: Bearer 头访问资源，refresh_token 用于续期。

参数检查

参数齐全，PKCE 与 state 都符合规范。

示例代码

// 授权码 + PKCE：verifier 只保存在本地，challenge 才发给授权服务器
const verifier = 'YOUR_CODE_VERIFIER';
const digest = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(verifier));
const codeChallenge = base64UrlEncode(new Uint8Array(digest));
// code_challenge=E9Melhoa2OwvFrEMTJguCHaoeK1t8URWbuGJSstw-cM (S256)
window.location.href = 'https://auth.example.com/authorize?response_type=code&client_id=unikit-demo&redirect_uri=https%3A%2F%2Funikit.cc%2Foauth%2Fcallback&scope=openid%20profile%20email&state=f8a1c2d3e4b5a6978877665544332211&nonce=n-0S6_WzA2Mj&code_challenge=E9Melhoa2OwvFrEMTJguCHaoeK1t8URWbuGJSstw-cM&code_challenge_method=S256';
// 回调拿到 code 后，在服务端用 code + verifier 换 token
// POST https://auth.example.com/token  grant_type=authorization_code

换取 token 的 curl

curl -X POST 'https://auth.example.com/token' \ \
  -H 'content-type: application/x-www-form-urlencoded' \ \
  -d 'grant_type=authorization_code&code=$CODE&redirect_uri=https://unikit.cc/oauth/callback' \ \
  -d 'client_id=unikit-demo' \
  -d 'code_verifier=$VERIFIER'

这个工具能做什么

接第三方登录时先生成一条授权链接，确认 response_type、scope、state 与 redirect_uri 都写对了再贴进代码。
要上 PKCE：点一下生成 code_verifier 与 S256 的 code_challenge，verifier 留在本地，challenge 才发给授权服务器。
对比三种流程：授权码（服务端换 token）、隐式（已不推荐）、客户端凭证（无用户参与），每种都给出步骤说明与 curl 示例。

示例

输入

流程 授权码；授权端点 https://auth.example.com/authorize；client_id unikit-demo；redirect_uri https://unikit.cc/oauth/callback；scope openid profile email；state f8a1c2d3e4b5a6978877665544332211；nonce n-0S6_WzA2Mj；code_challenge_method S256

输出

https://auth.example.com/authorize?response_type=code&client_id=unikit-demo&redirect_uri=https%3A%2F%2Funikit.cc%2Foauth%2Fcallback&scope=openid%20profile%20email&state=f8a1c2d3e4b5a6978877665544332211&nonce=n-0S6_WzA2Mj&code_challenge=...&code_challenge_method=S256

参数顺序固定为 response_type → client_id → redirect_uri → scope → state → nonce → code_challenge，空格编成 %20。

常见问题

S256 的 code_challenge 是怎么算出来的？

先生成 43–128 个 unreserved 字符的 code_verifier，再做 base64url(SHA-256(verifier))。工具用浏览器的 WebCrypto 算摘要，纯逻辑部分只做 base64url 编码，因此单测里可以用 RFC 7636 附录 B 的公开向量（verifier dBjftJeZ… → challenge E9Melhoa2Ow…）交叉验证。

state 到底防的是什么？

防 CSRF：把随机 state 存进会话，回调时比对，攻击者伪造的授权响应就会因为 state 不匹配被拒。建议 16 位以上随机字符，不要用可预测的时间戳或用户 ID。

隐式流程还能用吗？

能跑，但不建议。token 直接出现在 URL 片段里，容易泄漏到浏览器历史与日志，且没有 refresh_token；OAuth 2.1 已移除该流程，新项目请用授权码 + PKCE。

客户端凭证流程为什么没有授权 URL？

因为它没有用户参与授权，客户端直接用自己的凭据向 token 端点换取 token。client_secret 只能在服务端保存，任何出现在前端代码里的 secret 都等同于公开。

工具会去请求授权服务器吗？

不会。工具只拼参数、生成示例代码并做规则检查，不发起任何授权或 token 请求，也不会把你填的 client_id 发送到任何地方。

关键词：oauth2oauth2 flowauthorization urlpkcecode challengeauthorization codeOAuth2 流程授权链接生成PKCE 生成授权码模式client credentialsstate nonce

这个工具能做什么

示例

常见问题

同类工具