認証フローの実装
サンプルアプリの認証機能を題材に、SaaSus Platform APIサーバ版での認証フローの実装方法を解説します。
備考
実装方式の比較や全体的な処理フローについては、サンプルアプリ概要をご参照ください。
フロントエンド実装
認証後遷移先画面(Callback)
SaaSus Platformが生成するログイン画面からログインを実施すると、認証後遷移先で設定したURLが呼び出されます。
本実装サンプルを使って動作確認を行うためには、
http://localhost:3000/callback と設定してください。

認証後遷移先にはクエリパラメータ(code=xxxxx)で、認証情報取得に必要な一時コードが渡される仕様となってます。一時コードを使ってJWTを取得、ローカルストレージに保存する実装を行ってください。
認証後の画面遷移ロジック
サンプルアプリでは、JWT取得後にユーザー情報を確認し、以下のロジックで適切な画面に遷移させています:
- テナント未所属の場合: セルフサインアップ画面へ遷移
- 複数テナント所属の場合: テ ナント一覧画面へ遷移
- 単一テナント所属の場合: ユーザー一覧画面(メイン画面)へ遷移
この遷移ロジックにより、ユーザーの状況に応じて最適な画面を表示できます。
セルフサインアップ画面
ユーザがログインしていることのチェックをする必要があるので、ユーザ情報取得のAPIをコールしログインしていることを確認します。
APIコール時にはローカルストレージに保存したJWTを利用します。
ユーザ情報が取得出来ることにより、ユーザがログイン状態であることを確認できます。
セルフサインアップの処理は、セルフサインアップの要否に合わせて実装します。
セルフサインアップを使わない場合、セルフサインアップ用の画面は不要となります。
セルフサインアップを使う場合、初回ログイン時のみサインアップ用の処理を実行することになります。
初回ログインかどうかの判断は、ログインユーザがテナントに紐づいているかで判断できます。