Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save adaptive-shield-matrix/1ffd07f3dfa446b8d4a09bd991766126 to your computer and use it in GitHub Desktop.
Save adaptive-shield-matrix/1ffd07f3dfa446b8d4a09bd991766126 to your computer and use it in GitHub Desktop.
OAuth 2.0 / OpenID Connect flow diagrams. Build it by http://www.plantuml.com/plantuml/uml/
@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
@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
@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
@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
@acro5piano
Copy link

This is awesome.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment