OAuth2.0 フロー図を書いてみた Part1

目的

・VSCodeでPlantUmlを使った図を書く練習。
・最近OAuth2.0を使ったシステムに携わっているのでそのあたりのフロー図を書いてみた。

環境

・Visual Studio Code にPlantumlの拡張機能を追加して使用。

詳細

※参考にさせていただいた記事、書籍
https://pdf.plantuml.net/PlantUML_Language_Reference_Guide_ja.pdf
https://qiita.com/TakahikoKawasaki/items/200951e5b5929f840a1f
https://qiita.com/TakahikoKawasaki/items/e37caf50776e00e733be
https://www.amazon.co.jp/dp/B07L5M7DXS/

Aauthフロー1.pu

@startuml

' 見た目の設定
skinparam sequence {
    ArrowColor Black
    ActorBorderColor Black
    LifeLineBorderColor Black    
    ParticipantBorderColor Black
    ParticipantFontSize 9
'    ActorBackgroundColor aqua
'    ActorFontColor DeepSkyBlue
    ActorFontSize 10
'    ActorFontName Aapex
}


actor "ユーザ\n(画面表示/入力)" as User
participant "クライアント\n(アプリ/ブラウザ等)" as Client #87cefa  
box "認可サーバ" #White
participant "認可サーバ\n認可エンドポイント" as AuthserverNinka #99FF99
participant "認可サーバ\nトークンエンドポイント" as AuthserverToken #99FF99
end box
participant "認証システム" as AuthSystem #99FF99
participant "APIサーバ" as APIserver #99FF99
database "保護リソース" as DataBase  #99FF99

title Oauth フロー図１

autonumber 1 1 "(00)"
User -> Client: 機能使いたい
Client -> User: 別システムと連携必要なので\nリダイレクトします
User -> AuthserverNinka: リダイレクト
AuthserverNinka --> User: 利用許可しますか？\nID/PW入力して
User -> AuthserverNinka: 許可します\nID/PW 入力
AuthserverNinka -> AuthSystem: ID/PW 認証
AuthSystem --> AuthserverNinka: 認証OK
AuthserverNinka --> Client: 許可されたので\n認可コード発行します
Client -> AuthserverToken: 認可コード渡すので\nアクセストークン下さい
AuthserverToken --> Client: アクセストークン発行します
Client -> APIserver: アクセストークン渡すので\nリソース下さい
APIserver -> DataBase: リソース取得
APIserver --> Client: リソースどうぞ
Client -> User: 機能使えます

@enduml

感想

Plantumlはすごく良いです。以前はPlantuml単体で使ってたけど、VSCode上で使う事でプレビューしながら作業できて、捗りました。
勉強がてらOAuthをもう少し掘り下げた図とかも、書いてみようと思います。