コンソールへ移動

JavaScript による Microsoft を使用した認証

Firebase SDK を使用して汎用の OAuth ログインをアプリに統合し、エンドツーエンドのログインフローを実行することで、ユーザーが Firebase での認証に Microsoft Azure Active Directory などの OAuth プロバイダを使用できるようになります。

始める前に

Microsoft アカウント(Azure Active Directory アカウントや Microsoft の個人アカウント)を使用してユーザーをログインさせるには、まず Firebase プロジェクトのログイン プロバイダとして Microsoft を有効にする必要があります。

  1. Firebase を JavaScript プロジェクトに追加します
  2. Firebase コンソールで [Authentication] セクションを開きます。
  3. [ログイン方法] タブで、[Microsoft] プロバイダを有効にします。
  4. そのプロバイダのデベロッパー コンソールで取得したクライアント IDクライアント シークレットをプロバイダ構成に追加します。
    1. Microsoft OAuth クライアントを登録するには、クイックスタート: Azure Active Directory v2.0 エンドポイントを使用してアプリを登録するの手順を実施してください。このエンドポイントは、Azure Active Directory アカウントだけでなく、Microsoft の個人アカウントを使用したログインもサポートしています。 Azure Active Directory v2.0 に関する詳細をご確認ください。
    2. こうしたプロバイダにアプリを登録するときは、必ずプロジェクトの *.firebaseapp.com ドメインをアプリのリダイレクト ドメインとして登録してください。
  5. [保存] をクリックします。

Firebase SDK を使用したログインフローの処理

ウェブアプリをビルドする場合、Microsoft アカウントを使用して Firebase でユーザーを認証する最も簡単な方法は、Firebase JavaScript SDK でログインフロー全体を処理することです。

Firebase JavaScript SDK でログインフローを処理する手順は次のとおりです。

  1. プロバイダ ID microsoft.com を使用して、OAuthProvider のインスタンスを作成します。

    var provider = new firebase.auth.OAuthProvider('microsoft.com');
    
  2. 省略可: OAuth リクエストと一緒に送信したい追加のカスタム OAuth パラメータを指定します。

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

    Microsoft がサポートするパラメータについては、Microsoft の OAuth に関するドキュメントをご覧ください。setCustomParameters() で Firebase の必須のパラメータを渡すことはできません。該当するパラメータは、client_idresponse_typeredirect_uristatescoperesponse_mode です。

    特定の Azure AD テナントのユーザーのみがアプリケーションにログインできるようにするには、Azure AD テナントのフレンド リドメイン名またはテナントの GUID 識別子を使用できます。これは、カスタム パラメータ オブジェクトの「tenant」フィールドを指定することによって実行できます。

    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'
    });
    
  3. 省略可: 認証プロバイダにリクエストする、基本的なプロフィール以外の追加の OAuth 2.0 スコープを指定します。

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

    詳しくは、Microsoft のアクセス許可と同意に関するドキュメントをご覧ください。

  4. OAuth プロバイダ オブジェクトを使用して Firebase での認証を行います。ユーザーに Microsoft アカウントでログインするよう促すために、ポップアップ ウィンドウを表示するか、ログインページにリダイレクトします。モバイル デバイスではリダイレクトすることをおすすめします。

    • ポップアップ ウィンドウでログインを行う場合は、signInWithPopup を呼び出します。

      firebase.auth().signInWithPopup(provider)
        .then(function(result) {
          // User is signed in.
          // IdP data available in result.additionalUserInfo.profile.
          // OAuth access token can also be retrieved:
          // result.credential.accessToken
        })
        .catch(function(error) {
          // Handle error.
        });
      
    • ログインページにリダイレクトしてログインを行う場合は、signInWithRedirect を呼び出します。

      firebase.auth().signInWithRedirect(provider);
      

      ユーザーがログインを完了してページに戻ったら、getRedirectResult を呼び出してログイン結果を取得できます。

      firebase.auth().getRedirectResult()
        .then(function(result) {
          // User is signed in.
          // IdP data available in result.additionalUserInfo.profile.
          // OAuth access token can also be retrieved:
          // result.credential.accessToken
        })
        .catch(function(error) {
          // Handle error.
        });
      

    正常に完了すると、プロバイダに関連付けられている OAuth アクセス トークンを、返された firebase.auth.UserCredential オブジェクトから取得できます。

    OAuth アクセス トークンを使用して、Microsoft Graph API を呼び出せます。

    たとえば、基本的なプロフィール情報を取得するには、次の REST API を呼び出します。

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

    Firebase Auth でサポートされている他のプロバイダとは異なり、Microsoft では写真の URL が提供されないため、代わりにプロフィール写真のバイナリデータを Microsoft Graph API を介してリクエストする必要があります。

  5. 上記の例ではログインフローを中心に説明していますが、linkWithPopuplinkWithRedirect を使用して Microsoft プロバイダを既存のユーザーにリンクすることもできます。たとえば、複数のプロバイダを同じユーザーにリンクして、どれでもログインできるようにすることができます。

    var provider = new firebase.auth.OAuthProvider('microsoft.com');
    firebase.auth().currentUser.linkWithPopup(provider)
        .then(function(result) {
          // Microsoft credential is linked to the current user.
          // IdP data available in result.additionalUserInfo.profile.
          // OAuth access token can also be retrieved:
          // result.credential.accessToken
        })
        .catch(function(error) {
          // Handle error.
        });
    
  6. 同じパターンを reauthenticateWithPopupreauthenticateWithRedirect でも使用できます。これらは、ログインしてから短時間のうちに行うべき機密性の高い操作のために、最新の認証情報を取得するのに使われます。

    var provider = new firebase.auth.OAuthProvider('microsoft.com');
    firebase.auth().currentUser.reauthenticateWithPopup(provider)
        .then(function(result) {
          // User is re-authenticated with fresh tokens minted and
          // should be able to perform sensitive operations like account
          // deletion and email or password update.
          // IdP data available in result.additionalUserInfo.profile.
          // OAuth access token can also be retrieved:
          // result.credential.accessToken
        })
        .catch(function(error) {
          // Handle error.
        });
    

Chrome 拡張機能での Firebase 認証

Chrome 拡張アプリを作成する場合は、Chrome 拡張 ID をホワイトリストに登録する必要があります。

  1. Firebase コンソールでプロジェクトを開きます。
  2. [Authentication] セクションで、[ログイン方法] ページを開きます。
  3. 承認済みドメインのリストに URI を次のように追加します。
    chrome-extension://CHROME_EXTENSION_ID

Chrome 拡張機能では HTTP リダイレクトを使用できないため、Chrome 拡張機能ではポップアップ オペレーション(signInWithPopuplinkWithPopup)のみを使用できます。認証ポップアップはブラウザのアクション ポップアップをキャンセルするため、ブラウザのアクション ポップアップではなくバックグラウンド スクリプトからこれらのメソッドを呼び出す必要があります。

Chrome 拡張機能のマニフェスト ファイルで、https://apis.google.com URL を content_security_policy ホワイトリストに必ず追加してください。

次のステップ

ユーザーが初めてログインすると、新しいユーザー アカウントが作成され、ユーザーがログインに使用した認証情報(ユーザー名とパスワード、電話番号、または認証プロバイダ情報)にアカウントがリンクされます。この新しいアカウントは Firebase プロジェクトの一部として保存され、ユーザーのログイン方法にかかわらず、プロジェクトのすべてのアプリでユーザーを識別するために使用できます。

  • アプリでユーザーの認証ステータスを把握するには、Auth オブジェクトにオブザーバーを設定することをおすすめします。これによって、ユーザーの基本的なプロフィール情報を User オブジェクトから取得できます。ユーザーの管理についての記事をご覧ください。

  • Firebase Realtime Database と Cloud Storage のセキュリティ ルールでは、ログイン済みユーザーの一意のユーザー ID を auth 変数から取得し、それを使用して、ユーザーがアクセス可能なデータを制御できます。

既存のユーザー アカウントに認証プロバイダの認証情報をリンクすることで、ユーザーが複数の認証プロバイダを使用してアプリにログインできるようになります。

ユーザーのログアウトを行うには、signOut を呼び出します。

firebase.auth().signOut().then(function() {
  // Sign-out successful.
}).catch(function(error) {
  // An error happened.
});