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 |
フィードバック
以下は間もなく提供いたします。2024 年を通じて、コンテンツのフィードバック メカニズムとして GitHub の issue を段階的に廃止し、新しいフィードバック システムに置き換えます。 詳細については、「https://aka.ms/ContentUserFeedback」を参照してください。
フィードバックの送信と表示