Microsoft でのユーザーのログイン

このドキュメントでは、Identity Platform を使用して Microsoft でユーザーのログインを行う方法について説明します。個人用の Microsoft アカウントと Azure Active Directory（Azure AD）アカウントの両方がサポートされています。

始める前に

このチュートリアルは、すでに Identity Platform が有効であり、HTML と JavaScript を使用して作成された基本的なウェブアプリがあることを前提としています。その方法については、クイックスタートをご覧ください。

Microsoft をプロバイダとして構成する

Microsoft を ID プロバイダとして構成するには:

  1. Google Cloud コンソールで [ID プロバイダ] ページに移動します。

    [ID プロバイダ] ページに移動

  2. [プロバイダを追加] をクリックします。

  3. リストから [Microsoft] を選択します。

  4. Microsoft アプリ ID とアプリ シークレット を入力します。ID とシークレットをまだ持っていない場合は、クイックスタート: Azure AD v2.0 エンドポイントでアプリを登録するの手順に沿って取得してください。

    このエンドポイントは、個人用の Microsoft アカウントと Azure AD の両方のアカウントをサポートしています。Azure AD の詳細については、Microsoft ID プラットフォーム（v2.0）の概要をご覧ください。

  5. [Microsoft の構成] に表示されている URI を、Microsoft アプリケーションの有効な OAuth リダイレクト URI として構成します。 Identity Platform でカスタム ドメインを構成した場合は、デフォルト ドメインではなくカスタム ドメインを使用するように Microsoft アプリの構成のリダイレクト URI を更新します。たとえば、https://myproject.firebaseapp.com/__/auth/handler を https://auth.myownpersonaldomain.com/__/auth/handler に変更します。

  6. [承認済みドメイン] で [ドメインを追加] をクリックして、アプリのドメインを登録します。開発目的の場合は、localhost はデフォルトですでに有効になっています。

  7. [アプリケーションの構成] で [設定の詳細] をクリックします。このスニペットをアプリのコードにコピーして、Identity Platform Client SDK を初期化します。

  8. [保存] をクリックします。

Client SDK を使用したユーザーのログイン

  1. プロバイダ ID として microsoft.com を渡して、OAuthProvider オブジェクトのインスタンスを作成します。

    JavaScript 

    var provider = new firebase.auth.OAuthProvider('microsoft.com');
    microsoft-oauth.js

  2. 省略可: OAuth スコープを追加します。スコープでは、Microsoft からどんなデータを要求するかを指定します。より機密性の高いデータには、特定のスコープが必要になる場合があります。Microsoft のドキュメントを参照して、アプリに必要なスコープを判断してください。

    JavaScript 

    provider.addScope('mail.read');
provider.addScope('calendars.read');

  3. 省略可: その他のカスタム OAuth パラメータを指定します。これは Microsoft 特有であり、通常は認証エクスペリエンスのカスタマイズに使用されます。

    JavaScript 

    provider.setCustomParameters({
  // Force re-consent.
  prompt: 'consent',
  // Target specific email with login hint.
  login_hint: 'user@firstadd.onmicrosoft.com'
});

    mkt パラメータを使用して、認証フローの言語をカスタマイズできます。次に例を示します。

    provider.setCustomParameters({
  mkt: 'fr'
});

    tenant プロパティを使用すると、特定の Azure AD ドメイン外のユーザーへのアクセスを制限できます。テナントのわかりやすいドメイン名または GUID 識別子を指定します。このドメインに属していないユーザーはログインできません。次に例を示します。

    provider.setCustomParameters({
  // Optional "tenant" parameter in case you are using an Azure AD tenant.
  // eg. '8eaef023-2b34-4da1-9baa-8bc8c9d6a490' or 'contoso.onmicrosoft.com'
  // or "common" for tenant-independent tokens.
  // The default value is "common".
  tenant: 'TENANT_ID'
});

    Microsoft がサポートするパラメータの完全なリストについては、Microsoft OAuth のドキュメントをご覧ください。OAuth または Identity Platform で予約されているパラメータを渡すことはできません。

  4. OAuthProvider オブジェクトを使用して、ユーザーのログインを行います。ポップアップ ウィンドウを開く、または現在のページをリダイレクトできます。モバイル デバイスでは、リダイレクトの方がユーザーにとってより簡単な方法です。

    ポップアップを表示するには、signInWithPopup() を呼び出します。

    JavaScript 

    firebase.auth().signInWithPopup(provider)
  .then((result) => {
    // IdP data available in result.additionalUserInfo.profile.
    // ...

    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // OAuth access and id tokens can also be retrieved:
    var accessToken = credential.accessToken;
    var idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });
    microsoft-oauth.js

    ページをリダイレクトするには、まず signInWithRedirect() を呼び出します。

    signInWithRedirect、linkWithRedirect、reauthenticateWithRedirect を使用する場合は、ベスト プラクティスに従ってください。

    JavaScript 

    firebase.auth().signInWithRedirect(provider);
    microsoft-oauth.js

    次に、ページの読み込み時に getRedirectResult() を呼び出して Microsoft トークンを取得します。

    JavaScript 

    firebase.auth().getRedirectResult()
  .then((result) => {
    // IdP data available in result.additionalUserInfo.profile.
    // ...

    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // OAuth access and id tokens can also be retrieved:
    var accessToken = credential.accessToken;
    var idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });
    microsoft-oauth.js

アクセス トークンを取得したら、それを使用して Microsoft Graph API を呼び出すことができます。次に例を示します。

REST 

curl -i -H "Authorization: Bearer [ACCESS_TOKEN]" https://graph.microsoft.com/v1.0/me

Identity Platform でサポートされている他のプロバイダとは異なり、Microsoft ではユーザーに写真の URL を提供しません。代わりに、写真のバイナリデータをリクエストするには Graph API を使用する必要があります。

アクセス トークンに加えて、ユーザーの Microsoft ID トークンも取得できます。このトークンの oid クレームには、ユーザーの一意の ID が含まれます。これは user.providerData[0].uid にある ID と比較できます。ユーザーが Azure AD テナントを使用してログインしている場合、これらのフィールドは完全に一致します。Azure AD テナントを使用してログインしていない場合は、そのフィールドは 0 でパディングされます（たとえば、連携 ID 4b2eabcdefghijkl は 00000000-0000-0000-4b2e-abcdefghijkl と表示されます）。

ユーザー ID の比較には sub クレームを使用しないでください。sub クレームはアプリ固有のものであり、Microsoft で使用される ID と一致しません。

手動でのユーザーのログイン

Google、Facebook、Twitter などの他の Identity Platform プロバイダでは、signInWithCredential() を呼び出して手動でのユーザーのログインが可能です。

この機能は Microsoft 向けにはサポートされていません。Identity Platform では、Microsoft OAuth アクセス トークンのオーディエンスを確認できません。これは重要なセキュリティ要件です。

Identity Platform Client SDK を使用したユーザーのログインができない場合、Microsoft で認証を行うためには、サードパーティの OAuth ライブラリを使用する必要があります。その後、カスタム認証を使用して、Microsoft の認証情報をカスタム トークンと交換できます。

次のステップ