Last active
February 21, 2024 09:27
-
-
Save hrchu/d88efb56e72534a1233d16f36eb3e3e9 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/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@startuml | |
skinparam handwritten true | |
"You/Browser" -> slack.com: 1. I would like to access my files on Google Drive via your interface. | |
slack.com -> "You/Browser": 2. You should apply the "Authorization Code" from Google for me first. | |
"You/Browser" -> account.google.com: 3. I would like to permit slack.com to access my files. | |
account.google.com -> "You/Browser": 4. Are you sure? | |
"You/Browser" -> account.google.com: 5. [Y] | |
account.google.com -> "You/Browser": 6. Okay. Here is the "Authorization Code." Plz give it back to slack.com now. | |
"You/Browser" -> slack.com: 7. You can do what I asked now (with the Authorization Code which is just received from Google.) | |
slack.com -> account.google.com: 8. I would like to exchange the "Authorization Code" for the "Access Token." | |
account.google.com -> slack.com: 9. Your Access Token here. | |
slack.com -> drive.google.com: 10. I would like to read files which belong to one of my customers. Here is the Access Token. | |
drive.google.com -> slack.com: 11. Hmmm...the Access Token is vaild. Here is list of files you asked. | |
slack.com -> "You/Browser": 12. Grant succeed. You can see your files stored in Google Drive from my interface now! | |
@enduml |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@startuml | |
skinparam handwritten true | |
"ResourceOwner/User-Agent" -> Client: 1. I would like to access my resources on Resource Server via your interface. | |
Client -> "ResourceOwner/User-Agent": 2. You should apply the "Authorization Code" from Authorization Server for me first. | |
"ResourceOwner/User-Agent" -> AuthorizationServer: 3. I would like to permit the Client to access my resources. | |
AuthorizationServer -> "ResourceOwner/User-Agent": 4. Are you sure? | |
"ResourceOwner/User-Agent" -> AuthorizationServer: 5. [Y] | |
AuthorizationServer -> "ResourceOwner/User-Agent": 6. Okay. Here is the "Authorization Code." Plz give it back to Client now. | |
"ResourceOwner/User-Agent" -> Client: 7. You can do what I asked now. (With the Authorization Code which is just received from the Authorization Server) | |
Client -> AuthorizationServer: 8. I would like to exchange the "Authorization Code" for the "Access Token." | |
AuthorizationServer -> Client: 9. Your Access Token here. | |
Client -> ResourceServer: 10. I would like to access resources which belong to the Resource Owner. Here is the Access Token. | |
ResourceServer -> Client: 11. Hmmm...the Access Token is vaild. Here are resources you asked. | |
Client -> "ResourceOwner/User-Agent": 12. Grant succeed. You can access your resources located in Resource Server from me now! | |
@enduml |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@startuml | |
skinparam handwritten true | |
"ResourceOwner/User-Agent" -> Client: 1. (Start the procedure by calling the client specific request.) | |
Client -> "ResourceOwner/User-Agent": 2. HTTP 302: Redirect to the "Authorization Code Request" URL with parameters:\n scope=[specific_scope]&redirect_uri=[client_callback]&client_id=[client_id]&response_type=code&state=foobar | |
"ResourceOwner/User-Agent" -> AuthorizationServer: 3. Call "Authorization Request" URL with parameters listed above. | |
AuthorizationServer -> "ResourceOwner/User-Agent": 4. Whould you like to permit [specific_scope] for [client]? | |
"ResourceOwner/User-Agent" -> AuthorizationServer: 5. [Y] | |
AuthorizationServer -> "ResourceOwner/User-Agent": 6. HTTP 302: Redirect to the [client_callback] URL with parameters: code=[authorization_code]&state=foobar | |
"ResourceOwner/User-Agent" -> Client: 7. Call [client_callback] URL with parameters listed above. | |
Client -> AuthorizationServer: 8. Call "Access Token Request" URL with parameters:\n code=[authorization_code]&client_id=[client_id]&client_secret=[client_secret]&grant_type=authorization_code | |
AuthorizationServer -> Client: 9. HTTP 200 with the [access_token] | |
Client -> ResourceServer: 10. Call rsource specific API with the header: {Authorization: Bearer [access_token]} | |
ResourceServer -> Client: 11. HTTP 200 with protected resources | |
Client -> "ResourceOwner/User-Agent": 12. (Show grant succeed and protected resources.) | |
@enduml |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@startuml | |
skinparam handwritten true | |
"ResourceOwner/User-Agent" -> Client: 1. (Start the procedure by calling the client specific request.) | |
Client -> "ResourceOwner/User-Agent": 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 | |
"ResourceOwner/User-Agent" -> AuthorizationServer: 3. Call "Authorization Request" URL with parameters listed above. | |
AuthorizationServer -> "ResourceOwner/User-Agent": 4. Whould you like to permit "<color:red>openid</color>, profile" for [client]? | |
"ResourceOwner/User-Agent" -> AuthorizationServer: 5. [Y] | |
AuthorizationServer -> "ResourceOwner/User-Agent": 6. HTTP 302: Redirect to the [client_callback] URL with parameters: code=[authorization_code]&state=foobar | |
"ResourceOwner/User-Agent" -> Client: 7. Call [client_callback] URL with parameters listed above. | |
Client -> AuthorizationServer: 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 | |
AuthorizationServer -> Client: 9. HTTP 200 with the [access_token, <color:red>id_token</color>] | |
Client -> ResourceServer: <color:red>10. Call userInfo endpoint with the header: {Authorization: Bearer [access_token]} | |
ResourceServer -> Client: <color:red>11. HTTP 200 with more detailed user information. | |
Client -> "ResourceOwner/User-Agent": <color:red>12. (Login succeed.) | |
@enduml |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
here my version, which is a little more compact (and has a more neutral corporate style)
https://gist.github.com/adaptive-shield-matrix/1ffd07f3dfa446b8d4a09bd991766126