sequenceDiagram
participant User
participant Client as Client (Browser)
participant Backend
participant Transmit Security
opt ユーザを新規作成する場合
User->>Client: 1. Root(/)へ接続
Client->>Backend:
Backend->>Client: /pages/signup.html へHTTP Redirect
User->>Client: 2. Email([email protected])を入力
Client->>Backend: 3. ユーザ(Email)を新規作成 (POST /create-user)
Backend->>Transmit Security: 4. AccessToken取得(POST /oidc/token)
Transmit Security->>Backend: AccessTokenを応答
Backend->>Transmit Security: 5. ユーザの新規作成 (POST /users)
Transmit Security->>Backend: 新規作成結果送信
Backend->>Client: 新規作成結果送信
end
User->>Client: 6. Login(/pages/email-otp.html)へ接続
User->>Client: 7. Email([email protected])を入力
Client->>Backend: 8. EmailへOTP送信(POST /send-email-otp)
Backend->>Transmit Security: 9. AccessToken取得(POST /oidc/token)
Transmit Security->>Backend: AccessTokenを応答
Backend->>Transmit Security: 10. Email OTP送信 (POST /auth/otp/send)
Transmit Security->>Backend: OTP送信結果
Backend->>Client: OTP送信結果を表示
Transmit Security-->>User: 11. OTPをメールで送信
User->>Client: 12. OTPを入力
Client->>Backend: 13. OTP送信 (POST /authenticate)
Backend->>Transmit Security: 14. OTP評価 (POST /auth/otp/authenticate)
Transmit Security->>Backend: OTP評価結果・User Access Tokenの応答
opt User Access Tokenの検証
Backend->>Transmit Security: 15. JWKSの取得 (GET /oidc/jwks)
Transmit Security->>Backend: 取得したJWKSでUser Access Tokenを検証
end
Backend->>Client: OTP評価結果を表示
Client->>User: 16. OTP評価結果を表示
- 14以前(4,9)でAccess Token取得済みのため、14ではそのAccessTokenを利用するため新規取得を行いません
| STEP | 役割 | API |
|---|---|---|
| 4、9 | APIに利用するAccessTokenの取得 | Get client access token |
| 5 | ユーザの作成 | Create User |
| 10 | 対象メールアドレスへOTPの送信 | Backend Send OTP |
| 14 | OTPの認証 | Backend Authenticate OTP |
- 本ドキュメントではサンプルアプリケーションの利用に関する手順を示します
- サンプルアプリケーションをローカル環境で実行した際の手順を示しています。試される環境に合わせて適宜アクセスするURLなど変更して操作ください
- EmailでOTPを通知します。あらかじめEmail設定を完了してください
- 本ドキュメントでは以下が必要となります
- インターネットに接続可能な端末
- ブラウザ
- 送受信可能なメールアドレス
- 手順に応じた簡易なCLI操作・ファイル編集
SAMPLE=login-with-be-email yarn start
- ブラウザでサンプルアプリケーション(http://localhost:8080)に接続
-
初期画面がユーザー新規作成画面となります
作成済みのユーザーでログインする場合には画面下部のLoginをクリックし、以降はOTP Loginを参照してください- アプリケーションの画面に、
(Platform上にアカウントが作成されていない)有効なメールアドレスを入力し、下に表示されたボタンをクリック
-
ユーザ作成が完了し、以下の画面が表示されます
-
ユーザ作成完了の
Login、または初期画面のLoginボタンをクリックすると、メールアドレス入力画面が表示されます。有効なアカウントのメールアドレスを入力し、ボタンをクリックしてください
-
有効なメールアドレスの受信ボックスを開き、通知されたOTPの内容を確認します
-
アプリケーションの画面がOTP入力画面に遷移していることを確認し、先ほどメールで確認した
OTPを入力します
-
OTPが正しいことが確認でき、画面が遷移します
