OIDC 登录演示（真实流程）

下面是一个真实可点的 OpenID Connect 登录演示,后端是本站的 Mock OIDC OP。点击按钮后:

浏览器生成 PKCE（code_verifier / code_challenge）与 state、nonce,跳转到 Mock OP 的授权端点;
在 Mock OP 选择一个测试用户（alice / bob）——它没有密码,点谁就是谁;
Mock OP 带 code 回跳到本页;
本页自动用 code（+ code_verifier）向 token 端点换取 id_token / access_token,再调 userinfo,并展示每一步的解析结果与校验。

这演示了什么

Authorization Code Flow + PKCE:授权码通过浏览器回跳传递,code_verifier 只在 token 请求中出示,即使授权码泄漏也无法被换成令牌。
state 校验:回跳时比对 state,防 CSRF。
nonce 校验:比对 ID Token 里的 nonce 与发起时的值,防止 ID Token 重放。
aud 校验:确认 ID Token 的 aud 是本客户端。
令牌与身份分离:access_token 用于调 userinfo,id_token 用于确认"用户是谁"。

想手动逐步操作、或在自己的应用里接入,见 OIDC Mock 端点与调用顺序;想解析任意 JWT,用 JWT 解析器。