Microsoft Graph ツールキットのログインコンポーネントLogin component in the Microsoft Graph Toolkit

ログインコンポーネントは、Microsoft identity platform 認証を容易にするためのボタンとフライアウトのコントロールです。A Login component is a button and flyout control to facilitate Microsoft identity platform authentication. 2つの状態が提供されます。It provides two states:

  • ユーザーがサインインしていない場合、コントロールは、サインインプロセスを開始するための簡単なボタンです。When user is not signed in, the control is a simple button to initiate the sign in process.
  • ユーザーがサインインしている場合、コントロールには現在サインインしているユーザー名、プロファイル画像、電子メールが表示されます。When user is signed in, the control displays the current signed in user name, profile image, and email. このボタンをクリックすると、サインアウトするコマンドが表示されたフライアウトが開きます。When clicked, a flyout is opened with a command to sign out.

Example

次の例は、サインインしているユーザーのコンポーネントを示して mgt-login います。The following example shows the mgt-login component with a signed-in user.

この例は、次のようにしてください。Open this example in mgt.dev

認証プロバイダを使用しないコントロールの使用Using the control without an authentication provider

このコンポーネントは、プロバイダーと、ボックスからの Microsoft Graph を使用して動作します。The component works with a provider and Microsoft Graph out of the box. ただし、独自のロジックと認証を提供する場合は、プロパティを使用して、 userDetails サインインしているユーザーの詳細を設定できます。However, if you want to provide your own logic and authentication, you can use the userDetails property to set the signed in user's details.

属性Attribute プロパティProperty 説明Description
ユーザー-詳細user-details userDetailsuserDetails コントロールに表示されるユーザーオブジェクトを設定します。Set the user object that will be displayed on the control.

次の例では、個人情報を設定します。The following example sets the person details.

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

userDetailsに設定する null と、サインアウト済みの状態に進みます。Setting userDetails to null will go to the signed out state.

およびイベントを使用して、 loginInitiated logoutInitiated サインインおよびサインインを処理します。Use the loginInitiated and logoutInitiated events to handle signing in and out.

CSS カスタムプロパティCSS custom properties

mgt-loginコンポーネントは、次の CSS カスタムプロパティを定義します。The mgt-login component defines the following CSS custom properties.

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

詳細については、「スタイルコンポーネント」を参照してください。To learn more, see styling components.

イベントEvents

コントロールから、次のイベントが発生します。The following events are fired from the control.

イベントEvent 説明Description
loginInitiated ユーザーが [サインイン] ボタンをクリックして、ログイン処理を開始しました-キャンセル済み。The user clicked the sign in button to start the login process - cancelable.
loginCompleted ログインプロセスは正常に実行され、ユーザーはサインインしました。the login process was successful and the user is now signed in.
loginFailed ユーザーがログインプロセスをキャンセルしたか、サインインできませんでした。The user canceled the login process or was unable to sign in.
logoutInitiated ユーザーが取り消しを開始しました。The user started to logout - cancelable.
logoutCompleted ユーザーがサインアウトした。The user signed out.

テンプレートTemplates

コンポーネントは、 mgt-login コンポーネントの特定の部分を置き換えることができるいくつかのテンプレートをサポートしています。The mgt-login component supports several templates that allow you to replace certain parts of the component. テンプレートを指定するには、 <template> コンポーネントの内部に要素を含め、 data-type 値を次の表に示す値のいずれかに設定します。To specify a template, include a <template> element inside of a component and set the data-type value to one of the values listed in the following table.

データ型Data type データコンテキストData context DescriptionDescription
サインインボタンコンテンツsigned-in-button-content 個人情報: person オブジェクト、 personImage : person イメージ文字列personDetails: person object, personImage: person image string ユーザーがサインインしているときに、ボタンにコンテンツを表示するために使用されるテンプレート。The template used to render the content in the button when the user is signed in.
サインアウトボタン-コンテンツsigned-out-button-content nullnull ユーザーがサインインしていない場合に、ボタン内にコンテンツを表示するために使用されるテンプレート。The template used to render the content in the button when the user is not signed in.
ポップアップ-コマンドflyout-commands handleSignOut: サインアウト関数handleSignOut: sign out function ポップアップでコマンドをレンダリングするために使用されるテンプレートThe template used to render the commands in the flyout
ポップアップ-個人情報flyout-person-details 個人情報: person オブジェクト、個人画像: 人物画像文字列personDetails: person object, personImage: person image string ユーザーの詳細をポップアップで表示するために使用するテンプレート。The template used to render the person details in the flyout.

Microsoft Graph のアクセス許可Microsoft Graph permissions

このコンポーネントは、 Person コンポーネントを使用してユーザーを表示し、すべてのアクセス許可を継承します。This component uses the Person component to display the user and inherits all permissions.

認証Authentication

ログインコントロールは、認証のドキュメントで説明されているグローバル認証プロバイダを使用します。The login control uses the global authentication provider described in the authentication documentation.

拡張して制御するExtend for more control

より複雑なシナリオまたは厳密なカスタム UX の場合、このコンポーネントは protected render* コンポーネント拡張機能でオーバーライドするためのいくつかの方法を公開します。For more complex scenarios or a truly custom UX, this component exposes several protected render* methods for override in component extensions.

メソッドMethod 説明Description
renderButtonrenderButton ボタンクロムをレンダリングします。Renders the button chrome.
renderButtonContentrenderButtonContent ボタンの内容をレンダリングします。Renders the button content.
renderSignedInButtonContentrenderSignedInButtonContent ユーザーがサインインしているときにボタンの内容を表示します。Render the button content when the user is signed in.
renderSignedOutButtonContentrenderSignedOutButtonContent ユーザーがサインインしていないときにボタンの内容を表示します。Render the button content when the user is not signed in.
renderFlyout アウトrenderFlyout フライアウトクロムをレンダリングします。Renders the flyout chrome.
renderFlyoutContentrenderFlyoutContent フライアウトコンテンツをレンダリングします。Renders the flyout content.
renderFlyoutPersonDetailsrenderFlyoutPersonDetails フライアウトのユーザーの詳細を表示します。Render the flyout person details.
renderFlyoutCommandsrenderFlyoutCommands フライアウトコマンドをレンダリングします。Render the flyout commands.

独自のポップアップを表示するBring your own flyout

独自のポップアップコンポーネントは、メソッドをオーバーライドし、新しいフライアウトを提供することによって、組み込みのものの代わりに使用でき renderFlyout() ます。It is possible to use your own flyout component in place of the built-in one, by overriding the renderFlyout() method and providing the new flyout.

この場合は、 protected 代替ポップアップの表示を更新するために、フライアウトの表示方法を無効にして、ログインコンポーネントが期待どおりに動作することを確認してください。In this case, ensure the login component continues to work as expected by overriding the protected flyout display methods to update the visibility of your alternative flyout.

メソッドMethod 説明Description
hideFlyouthideFlyout フライアウトを閉じます。Dismisses the flyout.
showFlyout アウトshowFlyout フライアウトを表示します。Displays the flyout.
toggleFlyouttoggleFlyout フライアウトの状態を切り替えます。Toggles the state of the flyout.