Microsoft Graph Toolkit のログイン コンポーネント

  • [アーティクル]

ログイン コンポーネントは Microsoft ID プラットフォーム認証を容易にするボタンとポップアップ コントロールです。 これは次の 2 つの状態を提供します:

  • ユーザーがサインインしていない場合、コントロールはサインイン プロセスを開始するためのシンプルなボタンです。
  • ユーザーがサインインすると、コントロールには現在サインインしているユーザー名、プロフィール画像、およびメールアドレスが表示されます。 クリックすると、サインアウトするコマンドでポップアップが開きます。

複数のアカウントでのサインインを許可することもできます。 これにより、サインインしているすべてのアカウントが一覧表示され、他の新しいアカウントでサインインするオプションが表示されます。

例

次の例は、サインインしたユーザーを持つmgt-loginコンポーネントを表示しています。

認証プロバイダーなしでコントロールを使用する

このコンポーネントは、プロバイダーおよび Microsoft Graph ですぐに使用できます。 ただし、独自のロジックと認証を提供する場合は、userDetails プロパティを使用して、サインインしたユーザーの詳細を設定できます。

属性 プロパティ 説明
login-view Loginview ログインしているユーザーに適用するビュー スタイルを決定します。 オプションは 'full'、'compact'、'avatar'、既定値は 'full' です
show-presence showPresence コントロール上の現在のユーザーのプレゼンス インジケーターを認証されたユーザーと共に mgt-person 表示するかどうかを決定します。 既定値は false です。
user-details userDetails コンポーネントが表示するユーザー オブジェクトの詳細を設定できます。

次の例では、人物の詳細を設定します。

let loginControl = document.getElementById("myLoginControl");
loginControl.userDetails = {
  displayName: "Nikola Metulev",
  mail: "nikola@contoso.com",
  personImage: "url to the image",
};

を にnull設定userDetailsすると、サインアウト状態になります。

CSS カスタム プロパティ

mgt-login コンポーネントは、以下の CSS カスタム プロパティを定義します。

<mgt-login class="login"></mgt-login>

.login {
  --login-signed-out-button-background: red;
  --login-signed-out-button-hover-background: orange;
  --login-signed-out-button-text-color: purple;
  --login-signed-in-background: red;
  --login-signed-in-hover-background: green;
  --login-button-padding: 5px;
  --login-popup-background-color: blue;
  --login-popup-text-color: brown;
  --login-popup-command-button-background-color: orange;
  --login-popup-padding: 8px;
  --login-add-account-button-text-color: yellow;
  --login-add-account-button-background-color: red;
  --login-add-account-button-hover-background-color: purple;
  --login-command-button-background-color: orange;
  --login-command-button-hover-background-color: purple;
  --login-command-button-text-color: black;
  --login-person-avatar-size: 60px;

  /** person component tokens **/
  --person-line1-text-color: whitesmoke;
  --person-line2-text-color: white;
  --person-background-color: blue;
}

詳細については、「コンポーネントのスタイリング」を参照してください。

イベント

制御から次のイベントが発生します。

イベント いつ出力されるか カスタム データ キャンセル 泡 カスタム テンプレートを使用する
loginInitiated ユーザーがサインイン ボタンをクリックしてログイン プロセスを開始しました なし はい いいえ はい
loginCompleted ログイン プロセスが成功し、ユーザーがサインインしました なし いいえ いいえ はい
loginFailed ユーザーがログイン プロセスをキャンセルしたか、サインインできませんでした なし いいえ いいえ はい
logoutInitiated ユーザーがログアウトを開始しました なし はい いいえ はい
logoutCompleted ユーザーがサインアウトした なし いいえ いいえ はい

サインインとサインアウトを処理するには、loginInitiatedおよびlogoutInitiatedイベントを使用します。

イベントの処理の詳細については、「 イベント」を参照してください。

テンプレート

mgt-login コンポーネントは、いくつかの テンプレート をサポートしており、コンポーネントの特定の部分を置き換えることができます。 テンプレートを指定するには、コンポーネントの内部に <template> 要素を含め、data-type の値を次の表にリストされている値のいずれかに設定します。

データ型 データ コンテキスト 説明
signed-in-button-content personDetails: person オブジェクト、 personImage: person image string ユーザーがサインインしたときにボタンのコンテンツをレンダリングするために使用されるテンプレート。
signed-out-button-content null ユーザーがサインインしていないときにボタンのコンテンツをレンダリングするために使用されるテンプレート。
flyout-commands handleSignOut: サインアウト関数 ポップアップでコマンドをレンダリングするために使用されるテンプレート
flyout-person-details personDetails: person オブジェクト、personImage: person image string ポップアップで人物の詳細をレンダリングするために使用されるテンプレート。

Microsoft Graph のアクセス許可

このコンポーネントでは、次の Microsoft Graph API が使用されます。 API 要求ごとに、一覧表示されているいずれかのアクセス許可が必要です。

構成 アクセス許可 API
default User.Read、User.ReadWrite、User.ReadBasic.All、User.Read.All、Directory.Read.All、User.ReadWrite.All、Directory.ReadWrite.All /users/me/
default User.Read、User.ReadWrite、User.ReadBasic.All、User.Read.All、User.ReadWrite.All /users/me//photo/$value

サブコンポーネント

コンポーネントは mgt-login 1 つ以上のサブコンポーネントで構成され、前に一覧に示した権限以外のアクセス許可が必要な場合があります。 詳細については、各サブコンポーネントのドキュメント mgt-person を参照してください。

認証

このログイン制御は、認証ドキュメント に記述されているグローバル認証プロバイダーを使用します。

キャッシュ

このコンポーネントは 、Person コンポーネント を使用してユーザーを表示し、そこからすべてのキャッシュ構成を継承します。

より制御を行うために拡張する

より複雑なシナリオや真にカスタムな UX のために、このコンポーネントは、コンポーネント拡張でオーバーライドするためのいくつかのprotected render* メソッドを公開しています。

メソッド 説明
renderButton ボタンのクロムをレンダリングします。
renderButtonContent ボタンの内容をレンダリングします。
renderSignedInButtonContent ユーザーがサインインしたときにボタンの内容をレンダリングします。
renderSignedOutButtonContent ユーザーがサインインしていない場合は、ボタンのコンテンツをレンダリングします。
renderFlyout ポップアップ Chrome を表示します。
renderFlyoutContent ポップアップ コンテンツをレンダリングします。
renderFlyoutPersonDetails ポップアップする人物の詳細をレンダリングします。
renderFlyoutCommands ポップアップ コマンドをレンダリングします。

自分自身のポップアップを持参する

renderFlyout() メソッドをオーバーライドして新しいポップアップを提供することにより、組み込みコンポーネントの代わりに独自のポップアップ コンポーネントを使用することができます。

この場合、protectedポップアップ表示メソッドをオーバーライドして代替ポップアップの可視性を更新することにより、ログインコンポーネントが引き続き期待どおりに機能することを確認します。

メソッド 説明
hideFlyout ポップアップを閉じます。
showFlyout ポップアップを表示します。
toggleFlyout ポップアップの状態を取得します。

ローカリゼーション

コントロールは、ローカライズできる次の変数を公開します。 詳細については、「 コンポーネントのローカライズ」を参照してください。

文字列名 既定値
signInLinkSubtitle Sign In
signOutLinkSubtitle Sign Out
signInWithADifferentAccount Sign in with a different account