OAuth 2.0 / OpenID Connect flow diagrams. Build it by http://www.plantuml.com/plantuml/uml/

1. basic flow with auth code and access token

@startuml OAuth basic flow with auth code and access token
skinparam monochrome true
skinparam defaultFontSize 14
' plantuml: https://plantuml.com/sequence-diagram
' source: https://gist.github.com/hrchu/d88efb56e72534a1233d16f36eb3e3e9

title OAuth basic flow with auth code and access token

actor "You/Browser" as b
participant "slack.com" as s
participant "account.google.com" as a
participant "drive.google.com" as d

b -> s: 1. I would like to access my files on Google Drive via your interface.
s -> b: 2. You should apply the "Authorization Code" from Google for me first.
b -> a: 3. I would like to permit slack.com to access my files.
a -> b: 4. Are you sure?
b -> a: 5. [Y]
a -> b: 6. Okay. Here is the "Authorization Code." Plz give it back to slack.com now.
b -> s: 7. You can do what I asked now \n(with the Authorization Code which is just received from Google.)
s -> a: 8. I would like to exchange the "Authorization Code" for the "Access Token."
a -> s: 9. Your Access Token here.
s -> d: 10. I would like to read files which belong to one of my customers. Here is the Access Token.
d -> s: 11. Hmmm...the Access Token is vaild. Here is list of files you asked.
s -> b: 12. Grant succeed. You can see your files stored in Google Drive!

@enduml

2. introduce roles

@startuml OAuth introduce roles
skinparam monochrome true
skinparam defaultFontSize 14
' plantuml: https://plantuml.com/sequence-diagram
' source: https://gist.github.com/hrchu/d88efb56e72534a1233d16f36eb3e3e9

title OAuth introduce roles

actor "ResourceOwner/User-Agent" as r
participant Client as c
participant AuthorizationServer as a
participant ResourceServer as s

r -> c: 1. I would like to access my resources on Resource Server via your interface.
c -> r: 2. You should apply the "Authorization Code" from Authorization Server for me first.
r -> a: 3. I would like to permit the Client to access my resources.
a -> r: 4. Are you sure?
r -> a: 5. [Y]
a -> r: 6. Okay. Here is the "Authorization Code." Plz give it back to Client now.
r -> c: 7. You can do what I asked now. (With the Authorization Code which is just received from the Authorization Server)
c -> a: 8. I would like to exchange the "Authorization Code" for the "Access Token."
a -> c: 9. Your Access Token here.
c -> s: 10. I would like to access resources which belong to the Resource Owner. Here is the Access Token.
s -> c: 11. Hmmm...the Access Token is vaild. Here are resources you asked.
c -> r: 12. Grant succeed. You can access your resources located in Resource Server from me now!

@enduml

3. introduce protocol messages

@startuml OAuth introduce protocol messages
skinparam monochrome true
skinparam defaultFontSize 14
' plantuml: https://plantuml.com/sequence-diagram
' source: https://gist.github.com/hrchu/d88efb56e72534a1233d16f36eb3e3e9

title OAuth introduce protocol messages

actor "ResourceOwner/User-Agent" as r
participant Client as c
participant AuthorizationServer as a
participant ResourceServer as s

r -> c: 1. (Start the procedure by calling the client specific request.)
c -> r: 2. HTTP 302: Redirect to the "Authorization Code Request"\n scope=[specific_scope]&redirect_uri=[client_callback]\n&client_id=[client_id]&response_type=code&state=foobar
r -> a: 3. Call "Authorization Request" URL with parameters listed above.
a -> r: 4. Whould you like to permit [specific_scope] for [client]?
r -> a: 5. [Y]
a -> r: 6. HTTP 302: Redirect to the [client_callback] URL with parameters: code=[authorization_code]&state=foobar
r -> c: 7. Call [client_callback] URL with parameters listed above.
c -> a: 8. Call "Access Token Request" URL with parameters:\n code=[authorization_code]&client_id=[client_id]\n&client_secret=[client_secret]&grant_type=authorization_code
a -> c: 9. HTTP 200 with the [access_token]
c -> s: 10. Call resource specific API with the header: {Authorization: Bearer [access_token]}
s -> c: 11. HTTP 200 with protected resources
c -> r: 12. (Show grant succeed and protected resources.)

@enduml

4. introduce openid connect

@startuml OAuth introduce openid connect
skinparam monochrome true
skinparam defaultFontSize 14
' plantuml: https://plantuml.com/sequence-diagram
' source: https://gist.github.com/hrchu/d88efb56e72534a1233d16f36eb3e3e9

title OAuth introduce openid connect

actor "ResourceOwner/User-Agent" as r
participant AuthorizationServer as a
participant Client as c
participant ResourceServer as s

r -> c: 1. (Start the procedure by calling the client specific request.)
c -> r: 2. HTTP 302: Redirect to the "Authorization Code Request" URL with parameters:\n scope="profile <color:red>openid</color>"&redirect_uri=[client_callback]&client_id=[client_id]&response_type=code&state=foobar
r -> a: 3. Call "Authorization Request" URL with parameters listed above.
a -> r: 4. Whould you like to permit "<color:red>openid</color>, profile" for [client]?
r -> a: 5. [Y]
a -> r: 6. HTTP 302: Redirect to the [client_callback] URL with parameters: code=[authorization_code]&state=foobar
r -> c: 7. Call [client_callback] URL with parameters listed above.
c -> a: 8. Call <color:red>"Access Token / ID Token Request"</color> URL with parameters:\n code=[authorization_code]&client_id=[client_id]&client_secret=[client_secret]&grant_type=authorization_code
a -> c: 9. HTTP 200 with the [access_token, <color:red>id_token</color>]
c -> s: <color:red>10. Call userInfo endpoint with the header: {Authorization: Bearer [access_token]}
s -> c: <color:red>11. HTTP 200 with more detailed user information.
c -> r: <color:red>12. (Login succeed.)
@enduml

readme.md

Pro Tip

• use vscode (IDE): https://code.visualstudio.com/
• install vscode plantuml plugin: https://github.com/qjebbs/vscode-plantuml

This is awesome.