メインコンテンツまでスキップ

ライブプレビューでユーザー体験をテストする

ライブプレビュー 機能を利用すると、サインイン体験の設定を手軽にテストできます。

ライブプレビュー​

コンソール > サインイン体験 に移動し、右上の「ライブプレビュー」ボタンをクリックすると、Logto の機能をフルに体験できるデモが新しいブラウザタブで開きます。このデモでは、サインインおよびサインアップフローにおける Logto の体験設計アプローチを確認できます。高いカスタマイズ性があり、アプリケーションへシームレスに統合可能です。

注記:

このプレビューでは、まずアカウントを作成して体験をテストしてください。作成したアカウントは後で コンソール > ユーザー管理 で管理できます。

作成したユーザーアカウントでサインインを試し、問題なく成功した場合は、識別子や ID が表示される成功ページへリダイレクトされます。

開発者パネル​

Logto のライブプレビューでサインインに成功すると、ダッシュボードに遷移し、主に次の 2 つの操作が可能です：

  • ライブプレビューボタンでサインアウト：現在のセッションを終了します。
  • 開発者パネルを開くボタン：認証フローのデバッグツールを起動します。

開発者パネルでは、OIDC 統合のトラブルシューティング、トークンやクレームの確認、高度なアイデンティティシナリオのテストなど、リアルタイムのインサイトを提供します。

Logto 設定​

ライブプレビューは、デフォルトで統一されたサインイン体験を持つ非公開のデモアプリに依存しています。Logto 設定 セクションでは、認証リクエストに含める認証パラメーターを設定し、Logto OIDC エンドポイントに認証プロセスの処理方法を指示できます。これには、アプリ ID の指定、組織 ID の割り当て、特定のスコープのリクエストなどが含まれます。この設定は、LogtoProvider で LogtoClient を初期化し、アプリケーションの Logto コンテキストを確立するのと同様です。

注記:

設定変更を保存するのを忘れないでください。次回ライブプレビューでサインインする際に反映されます。

  • アプリ ID：一意のアプリ ID を指定します。アプリごとのサインイン体験 やリソース保護ポリシーのテストに必須です。
  • サインイン追加パラメーター：カスタムサインインプロセスをテストするために追加の 認証パラメーター を指定します。例：
  • Prompt：OIDC プロンプト値（スペース区切り）を追加し、認可サーバーがエンドユーザーに再認証や同意を求めるかどうかを指定します。定義済みの値は以下の通りです：
    • login：エンドユーザーに再認証を強制します。
    • consent：クライアントと情報を共有する前にユーザーの同意を要求します。
    • none：UI を表示しないことを示します。既存の認証や同意の有無を確認する際に使用します。
  • スコープ：クレームリクエスト用のスコープ（スペース区切り）を指定します。例：
    • ユーザーの組織情報をリクエストする場合は、urn:logto:scope:organizations urn:logto:scope:organization_roles の 2 つのスコープを使用します。
    • API 権限をリクエストする場合は、スコープ名 を スコープ 欄に、対応する API 識別子 を下の リソース 欄に入力します。
  • リソース：アプリケーションがアクセスする必要のある API リソース識別子（スペース区切り）を入力します。この欄で、必要なリソースアクセス トークンをリクエストできます。

リフレッシュトークングラント​

このセクションでは、さまざまなアクセス種別で リフレッシュトークン を取得する方法を説明します。

  • リソース：API リソースのアクセス トークンをリフレッシュする必要がある場合は、特定の API 識別子（スペース区切り）を入力します。
  • 組織 ID：組織トークンをリフレッシュする必要がある場合は、組織 ID（スペース区切り）を入力します。

リフレッシュトークングラントの利用方法については 認可 (Authorization) を参照してください。

注記:

offline_access の場合は prompt パラメーターに consent を含めてください。refresh token は prompt に consent が含まれている場合のみ発行されます。

ユーザー情報​

認証フローから取得したユーザーデータを確認できます：

  • ID トークンのクレーム取得：ID トークン に含まれるすべてのクレーム（at_hash、aud、auth_time、exp、iat、issu など）や追加のユーザープロファイルを取得します。トークンの検証や必要なユーザー情報の抽出に役立ちます。
  • ユーザー情報の取得：userinfo エンドポイントをクエリしてユーザープロファイル情報のみを取得します。
注記:

Chrome の開発者ツール（F12 → Console）を使ってネットワークリクエストやトークン、クレームを確認できます。