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

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

ライブプレビュー 機能を使用して、サインイン体験の設定を便利にテストできます。

ライブプレビュー​

Console > Sign-in experience に移動し、右上の「ライブプレビュー」ボタンをクリックすると、Logto の機能を完全に体験できるデモが新しいブラウザタブで開きます。このデモは、サインインおよびサインアップフローの体験設計アプローチを示しており、高度にカスタマイズ可能で、アプリケーションにシームレスに統合できます。

注記:

このプレビューでは、体験をテストするために最初にアカウントを作成する必要があります。このアカウントは後で Console > User management で管理できます。

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

開発パネル​

Logto のライブプレビューを使用してサインインに成功すると、次の 2 つの主要なアクションを含むダッシュボードに移動します：

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

開発パネルは、OIDC 統合のトラブルシューティング、トークンとクレームの検査、高度なアイデンティティシナリオのテストのためのリアルタイムの洞察を提供します。

Logto Config​

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

注記:

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

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

リフレッシュトークン付与​

このセクションでは、さまざまなアクセスタイプの リフレッシュトークン の方法を詳しく説明します：

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

Resource と Organization ID の両方が提供されている場合、リフレッシュリクエストは 組織テンプレートを使用した API リソース保護 をサポートするアクセス トークンを返します。

注記:

offline_access のプロンプトパラメータに consent を含めてください。プロンプトに consent が含まれている場合にのみ、リフレッシュトークン が発行されます。

ユーザー情報​

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

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

Chrome の開発者ツール（F12 → Console）を使用して、ネットワークリクエストを検査し、トークンとクレームを確認してください。