Skip to content

Instantly share code, notes, and snippets.

@nojaja
Last active May 10, 2021 08:48
Show Gist options
  • Select an option

  • Save nojaja/4f194a67207174f43f68a46f98776e6b to your computer and use it in GitHub Desktop.

Select an option

Save nojaja/4f194a67207174f43f68a46f98776e6b to your computer and use it in GitHub Desktop.
PlantUML OAuth 2.0/OpenID Connect(Authorization Code Flow)

@startuml
title OAuth 2.0/OpenID Connect(Authorization Code Flow)

actor ユーザー as U
participant "ブラウザ" as B
participant "ネイティブアプリ" as C
participant "アプリBFF" as WEB
participant "認証画面" as AWEB
participant "認証/認可サーバ" as AUTH
participant "APIサーバ" as API

== 認証シーケンス ==
U -> C : 初回起動
activate C
C -> C : トークンチェック
C --> B : リダイレクト(302)
deactivate C
activate B
B -> AWEB: リダイレクトURL(認証画面)にアクセス
deactivate B
activate AWEB
AWEB -> AUTH: Authentication Request
activate AUTH
note right : ユーザID/パスワードなどで認証
AUTH -> AUTH: Authentication Codeを発行
AUTH --> AWEB: Authentication Code返却
deactivate AUTH
AWEB --> B : リダイレクト(Authentication Code返却)
deactivate AWEB
activate B

B --> C : Custom URL Scheme \n リダイレクトURLにアクセス\n (Authentication Code付き)
deactivate B
activate C
C -> WEB: リダイレクトURLにアクセス\n (Authentication Code付き)
deactivate C
activate WEB
WEB -> AUTH: Authentication Codeの検証とToken Request
activate AUTH
AUTH -> AUTH: アクセストークン、IDトークンの発行
AUTH --> WEB : トークンの返却
deactivate AUTH

WEB -> WEB : IDトークンの検証
opt
WEB -> AUTH: UserInfo Request(アクセストークンをキーに取得)
activate AUTH
AUTH --> WEB : ユーザ情報の返却
deactivate AUTH
end
WEB -> WEB : セッション情報を作成してログイン状態にする
WEB --> C : 認証結果を返す
deactivate WEB
activate C
C --> U : 認証後の画面を返す
deactivate C

== Webアプリの利用 ==
U -> C : 操作 activate C

C -> WEB : Webアプリの利用
activate WEB
WEB -> API : API呼び出し(アクセストークン付き)
activate API
API -> AUTH: Introspection Request(アクセストークン付き)
activate AUTH
AUTH -> AUTH: アクセストークンの検証
AUTH --> API : アクセストークン内容を返す
deactivate AUTH
API -> API : API処理
API --> WEB : API処理結果を返却
deactivate API
WEB --> C : Webアプリの処理結果を返却
deactivate WEB
C --> U : 操作結果
deactivate C

@enduml

@startuml
title OAuth 2.0/OpenID Connect(Authorization Code Flow)

actor ユーザー as U
participant "ブラウザ" as B
participant "Webアプリ" as WEB
participant "認証画面" as AWEB
participant "認証/認可サーバ" as AUTH
participant "APIサーバ" as API

== 認証シーケンス ==
U -> B : 初回アクセス
activate B
B -> WEB : 初回アクセス
activate WEB
WEB -> WEB : 認証済チェック判定
WEB --> B : リダイレクト(302)
deactivate WEB

B -> AWEB: リダイレクトURL(認証画面)にアクセス
deactivate B
activate AWEB
AWEB --> B : 認証画面表示
deactivate AWEB
activate B
B -> U : 認証
U -> B : ID/PWD入力
B -> AWEB: Authentication Request
deactivate B
activate AWEB
AWEB -> AUTH: Authentication Request
activate AUTH
note right : ユーザID/パスワードなどで認証
AUTH -> AUTH: Authentication Codeを発行
AUTH --> AWEB: Authentication Code返却
deactivate AUTH
AWEB --> B : リダイレクト(Authentication Code返却)
deactivate AWEB
activate B

B -> WEB : リダイレクトURLにアクセス\n (Authentication Code付き)
deactivate B
activate WEB
WEB -> AUTH: Authentication Codeの検証とToken Request
activate AUTH
AUTH -> AUTH: アクセストークン、IDトークンの発行
AUTH --> WEB : トークンの返却
deactivate AUTH

WEB -> WEB : IDトークンの検証
opt
WEB -> AUTH: UserInfo Request(アクセストークンをキーに取得)
activate AUTH
AUTH --> WEB : ユーザ情報の返却
deactivate AUTH
end
WEB -> WEB : セッション情報を作成してログイン状態にする
WEB --> B : 認証後の画面を返す
deactivate WEB
activate B
B -> U : 認証完了
deactivate B
== Webアプリの利用 ==
U -> B : 操作
activate B
B -> WEB : Webアプリの利用
activate WEB
WEB -> API : API呼び出し(アクセストークン付き)
activate API
API -> AUTH: Introspection Request(アクセストークン付き)
activate AUTH
AUTH -> AUTH: アクセストークンの検証
AUTH --> API : アクセストークン内容を返す
deactivate AUTH
API -> API : API処理
API --> WEB : API処理結果を返却
deactivate API
WEB --> B : Webアプリの処理結果を返却

deactivate WEB
B -> U : 操作完了
deactivate B

@enduml

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