OAuth 2.1 概念图解

OAuth 2.1 授权
1

文档

图解

sequenceDiagram
    title OAuth 2.1 Protocol Flow
    autonumber
    participant Client
    participant ResourceOwner as Resource Owner
    participant AuthorizationServer as Authorization Server
    participant ResourceServer as Resource Server
    Client ->> ResourceOwner: (1) Authorization Request
    ResourceOwner -->> Client: (2) Authorization Grant
    Client ->> AuthorizationServer: (3) Authorization Grant
    AuthorizationServer -->> Client: (4) Access Token
    Client ->> ResourceServer: (5) Access Token
    ResourceServer -->> Client: (6) Protected Resource

sequenceDiagram
    title OAuth 2.1 Protocol Flow
    autonumber
    participant Client
    participant ResourceOwner as Resource Owner
    participant AuthorizationServer as Authorization Server
    participant ResourceServer as Resource Server
    Note over Client, ResourceOwner: Authorization Flow
    Client ->> ResourceOwner: (1) Authorization Request
    ResourceOwner -->> Client: (2) Authorization Grant
    Note over Client, AuthorizationServer: Token Acquisition
    Client ->> AuthorizationServer: (3) Authorization Grant
    AuthorizationServer -->> Client: (4) Access Token
    Note over Client, ResourceServer: Resource Access
    Client ->> ResourceServer: (5) Access Token
    ResourceServer -->> Client: (6) Protected Resource

sequenceDiagram
    title OAuth 2.1 协议流程
    autonumber
    participant Client as 客户端
    participant ResourceOwner as 资源所有者
    participant AuthorizationServer as 授权服务器
    participant ResourceServer as 资源服务器
    Note over Client, ResourceOwner: 授权流程
    Client ->> ResourceOwner: (1) 授权请求
    ResourceOwner -->> Client: (2) 授权授予
    Note over Client, AuthorizationServer: 令牌获取
    Client ->> AuthorizationServer: (3) 授权授予
    AuthorizationServer -->> Client: (4) 访问令牌
    Note over Client, ResourceServer: 资源访问
    Client ->> ResourceServer: (5) 访问令牌
    ResourceServer -->> Client: (6) 受保护资源

OAuth 2.1 授权码流程

sequenceDiagram
    participant ResourceOwner as Resource Owner
    participant UserAgent as User Agent
    participant Client as Client
    participant AuthorizationServer as Authorization Server
    UserAgent ->> ResourceOwner: Displays client application interface
    ResourceOwner ->> UserAgent: Clicks login/authorize button
    UserAgent ->> AuthorizationServer: (1) Client Identifier & Redirect URI
    UserAgent ->> AuthorizationServer: (2) User authenticates (provides credentials)
    AuthorizationServer -->> UserAgent: (3) Authorization Code (via redirect to Redirect URI)
    UserAgent -->> Client: Authorization Code (extracted from redirect)
    Client ->> AuthorizationServer: (4) Authorization Code & Redirect URI & Client Secret
    AuthorizationServer -->> Client: (5) Access Token (w/ Optional Refresh Token)

sequenceDiagram
    participant ResourceOwner as Resource Owner
    participant UserAgent as User Agent
    participant Client as Client
    participant AuthorizationServer as Authorization Server
    Note over ResourceOwner, UserAgent: 1. User visits client application
    UserAgent ->> ResourceOwner: Displays client application interface
    ResourceOwner ->> UserAgent: Clicks login/authorize button
    Note over UserAgent, AuthorizationServer: 2. Authorization Request
    UserAgent ->> AuthorizationServer: (1) Client Identifier & Redirect URI
    Note over AuthorizationServer: 3. User Authentication
    UserAgent ->> AuthorizationServer: (2) User authenticates (provides credentials)
    Note over AuthorizationServer, UserAgent: 4. Authorization Grant
    AuthorizationServer -->> UserAgent: (3) Authorization Code (via redirect to Redirect URI)
    Note over UserAgent, Client: 5. Code Exchange
    UserAgent -->> Client: Authorization Code (extracted from redirect)
    Note over Client, AuthorizationServer: 6. Token Request
    Client ->> AuthorizationServer: (4) Authorization Code & Redirect URI & Client Secret
    Note over AuthorizationServer, Client: 7. Token Response
    AuthorizationServer -->> Client: (5) Access Token (w/ Optional Refresh Token)

sequenceDiagram
    participant ResourceOwner as 资源所有者
    participant UserAgent as 用户代理
    participant Client as 客户端
    participant AuthorizationServer as 授权服务器
    Note over ResourceOwner, UserAgent: 1. 用户访问客户端应用
    UserAgent ->> ResourceOwner: 显示客户端应用界面
    ResourceOwner ->> UserAgent: 点击登录/授权按钮
    Note over UserAgent, AuthorizationServer: 2. 授权请求
    UserAgent ->> AuthorizationServer: (1) 客户端标识符与重定向URI
    Note over AuthorizationServer: 3. 用户认证
    UserAgent ->> AuthorizationServer: (2) 用户认证（提供凭据）
    Note over AuthorizationServer, UserAgent: 4. 授权许可
    AuthorizationServer -->> UserAgent: (3) 授权码（通过重定向至回调URI）
    Note over UserAgent, Client: 5. 代码交换
    UserAgent -->> Client: 授权码（从重定向中提取）
    Note over Client, AuthorizationServer: 6. 令牌请求
    Client ->> AuthorizationServer: (4) 授权码、重定向URI及客户端密钥
    Note over AuthorizationServer, Client: 7. 令牌响应
    AuthorizationServer -->> Client: (5) 访问令牌（可包含刷新令牌）

OAuth 2.1 客户端认证流程

sequenceDiagram
    participant Client
    participant Authorization Server
    Client ->> Authorization Server: (1) Client Authentication
    Authorization Server -->> Client: (2) Access Token

sequenceDiagram
    participant 客户端
    participant 授权服务器
    客户端 ->> 授权服务器: (1) 客户端认证
    授权服务器 -->> 客户端: (2) 访问令牌
3

公共客户端 PKCE 图解

sequenceDiagram
    participant User as 用户
    participant Client as 客户端 (SPA/移动应用)
    participant AS as 授权服务器
    participant RS as 资源服务器
    Note over Client: 开始 PKCE 流程

    rect rgba(200, 220, 255, 0.2)
        Note over Client: 步骤 1: 生成 PKCE 参数
        Client ->> Client: 生成 code_verifier (随机字符串)
        Client ->> Client: 计算 code_challenge = SHA256(code_verifier)
    end

    User ->> Client: 访问应用，触发登录

    rect rgba(220, 200, 255, 0.2)
        Note over Client: 步骤 2: 授权请求
        Client ->>+ AS: 1. 授权请求 (GET /authorize)<br/>client_id={id}<br/>redirect_uri={uri}<br/>code_challenge={challenge}<br/>code_challenge_method=S256
        AS -->>- User: 2. 显示登录/授权页面
        User ->>+ AS: 3. 输入凭据并授权
        AS -->>- Client: 4. 重定向到 redirect_uri<br/>并附带授权码 code={authCode}
    end

    rect rgba(200, 255, 220, 0.2)
        Note over Client: 步骤 3: 令牌交换
        Client ->>+ AS: 5. 令牌请求 (POST /token)<br/>grant_type=authorization_code<br/>code={authCode}<br/>code_verifier={verifier}

        rect rgba(255, 200, 200, 0.2)
            Note over AS: 验证 PKCE
            AS ->> AS: 计算 SHA256(code_verifier)
            AS ->> AS: 比较结果是否等于<br/>之前接收的 code_challenge
            Note right of AS: 验证通过 ✓
        end

        AS -->>- Client: 6. 返回访问令牌<br/>{access_token}
    end

    rect rgba(255, 255, 200, 0.2)
        Note over Client: 步骤 4: 访问受保护资源
        Client ->>+ RS: 7. 访问 API<br/>Authorization: Bearer {access_token}
        RS -->>- Client: 8. 返回受保护数据
    end

    Note over Client, AS: PKCE 完成