为什么换令牌要在后端做？

换令牌需要应用密钥，密钥放在浏览器里会泄露。后端保管密钥并完成交换，前端只拿到会话。

单点登录的图也这样画吗？

基于 OpenID Connect 的单点登录流程很接近，把「获取用户信息」换成「校验 ID 令牌」即可。

各平台的接口都一样吗？

大体流程一致，参数和地址各不相同，请以对应平台的官方文档为准。

OAuth 第三方登录时序图模板

预览用的是「渐变」主题，打开编辑器后可以换

适用场景

接入第三方账号登录、给团队讲 OAuth 授权码模式、写安全评审材料时使用。图上强调两点：换令牌发生在后端，密钥不经过浏览器；回调时要校验 state，防止跨站请求伪造。

怎么改成你的

把「授权服务器」换成你接入的平台名称，参与者名字用 as 后面的文字改。
用了 PKCE 的移动端或单页应用，在跳转时加「携带 code challenge」，换令牌时加「携带 code verifier」。
需要刷新令牌的流程，可以在最后加一段用刷新令牌换新令牌的消息。

Mermaid 代码

oauth-login-sequence.mmd

sequenceDiagram
    actor U as 用户
    participant F as 应用前端
    participant B as 应用后端
    participant A as 授权服务器
    participant R as 资源服务器
    U->>F: 点击第三方登录
    F->>B: 请求登录地址
    B-->>F: 授权地址与 state
    F->>A: 跳转到授权页
    A->>U: 展示登录与授权确认
    U->>A: 登录并同意授权
    A-->>F: 重定向并带回授权码与 state
    F->>B: 提交授权码与 state
    B->>B: 校验 state
    B->>A: 用授权码和密钥换令牌
    A-->>B: 访问令牌
    B->>R: 用令牌获取用户信息
    R-->>B: 用户标识与昵称
    B->>B: 查找或创建本地账号
    B-->>F: 建立会话
    F-->>U: 登录完成

让 AI 按这个结构生成一份

把下面这段发给豆包、DeepSeek、Kimi 或元宝，再把它的回复整段粘贴到编辑器，会自动识别其中的代码。

prompt.txt

请用 Mermaid 的 sequenceDiagram 语法画一张 OAuth 2.0 授权码模式时序图：参与者有用户、应用前端、应用后端、授权服务器、资源服务器；用户点击第三方登录，前端向后端取授权地址与 state，跳转到授权页，用户登录并同意，授权服务器重定向带回授权码与 state，前端提交给后端，后端校验 state，用授权码和密钥换取访问令牌，再用令牌向资源服务器获取用户信息，查找或创建本地账号，建立会话。只输出 mermaid 代码块。