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

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

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

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

この例を mgt.dev で開きます。

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

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

属性 プロパティ 説明
user-details userDetails コントロールに表示されるユーザー オブジェクトを設定します。

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

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

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

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

CSS カスタム プロパティ

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

mgt-login {
  --font-size: 14px;
  --font-weight: 600;
  --weith: '100%';
  --height: '100%';
  --margin: 0;
  --padding: 12px 20px;
  --button-color: #201f1e;
  --button-color--hover: var(--theme-primary-color);
  --button-background-color: transparent;
  --button-background-color--hover: #edebe9;
  --popup-background-color: white;
  --popup-command-font-size: 12px;
  --popup-color: #201f1e;
}

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

イベント

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

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

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

テンプレート

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

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

Microsoft Graph のアクセス許可

このコンポーネントは、以下の Microsoft Graph API とアクセス許可を使用します。

構成 アクセス許可 API
default User.Read /users/me/

既定 signed-in-button-contentflyout-person-details テンプレートを使用する場合、このコンポーネントは Person コンポーネント を使用してユーザーを表示し、すべてのアクセス許可を継承します。

認証

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

キャッシュ

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

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

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

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

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

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

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

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