Cordova で OAuth プロバイダを使用して認証する

Firebase JS SDK を使用して、Firebase ユーザーが認証に Cordova 環境でサポートされている任意の OAuth プロバイダを使用できるようにすることができます。サポートされている OAuth プロバイダを統合するには、Firebase SDK を使用してログインフローを実行するか、または OAuth フローを手動で行って、取得した OAuth 認証情報を Firebase に渡します。

Cordova の Firebase 認証を設定する

  1. Firebase を JavaScript プロジェクトに追加します。Firebase スニペットを追加するときに、authDomain 構成変数をメモしてください。my-app.firebaseapp.com のようになります。Firebase でプロビジョニングされた firebaseapp.com ドメインの代わりにカスタム ドメインを使用する場合は、そのカスタム ドメインを使用する必要があります。

  2. Android アプリを設定する場合は、Android アプリを Firebase コンソールに追加し、アプリの詳細を入力します。生成された google-services.json は必要ありません。

  3. iOS アプリを設定する場合は、iOS アプリケーションを作成し、Firebase コンソールに追加します。後でカスタム URL スキームのプラグインをインストールするときに、iOS バンドル ID を追加する必要があります。

  4. Firebase Dynamic Links を有効にします。

    1. Firebase コンソールで [Dynamic Links] セクションを開きます。
    2. Dynamic Links の利用規約をまだ受け入れておらず、また Dynamic Links のドメインをまだ作成していない場合は、この時点でその作業を行います。

      Dynamic Links のドメインが作成済みである場合は、それをメモしておきます。Dynamic Links のドメインは、通常、次の例のようになります。

      example.page.link

      受信リンクをインターセプトするように iOS または Android アプリを構成するときに、この値が必要になります。

  5. Firebase コンソールで Google ログインを有効にします。

    1. Firebase コンソールで [Auth] セクションを開きます。
    2. [ログイン方法] タブで [Google] ログイン方法を有効にし、[保存] をクリックします。
  6. Cordova プロジェクトに必要なプラグインをインストールします。

    # Plugin to pass application build info (app name, ID, etc) to the OAuth widget.
    cordova plugin add cordova-plugin-buildinfo --save
    # Plugin to handle Universal Links (Android app link redirects)
    cordova plugin add cordova-universal-links-plugin --save
    # Plugin to handle opening secure browser views on iOS/Android mobile devices
    cordova plugin add cordova-plugin-browsertab --save
    # Plugin to handle opening a browser view in older versions of iOS and Android
    cordova plugin add cordova-plugin-inappbrowser --save
    # Plugin to handle deep linking through Custom Scheme for iOS
    # Substitute *com.firebase.cordova* with the iOS bundle ID of your app.
    cordova plugin add cordova-plugin-customurlscheme --variable \
        URL_SCHEME=com.firebase.cordova --save
    
  7. 次の構成を Cordova の config.xml ファイルに追加します。ここで、AUTH_DOMAIN はステップ 1 のドメイン、DYNAMIC_LINK_DOMAIN はステップ 3c のドメインです。

    <universal-links>
        <host name="DYNAMIC_LINK_DOMAIN" scheme="https" />
        <host name="AUTH_DOMAIN" scheme="https">
            <path url="/__/auth/callback"/>
        </host>
    </universal-links>
    

    構成例は次のようになります。

    <universal-links>
        <host name="example.page.link" scheme="https" />
        <host name="example-app.firebaseapp.com" scheme="https">
            <path url="/__/auth/callback"/>
        </host>
    </universal-links>
    

    カスタム ドメイン auth.custom.domain.com が使用されている場合は、my-app.firebaseapp.com に置き換えます。

    Android アプリの場合、singleTasklaunchMode に使用されます。

    <preference name="AndroidLaunchMode" value="singleTask" />
    

Firebase SDK を使用してログインフローを処理する

  1. Firebase Auth は、現在の Cordova 環境を正しく判断するために deviceReady イベントに依存します。そのイベントがトリガされた後、Firebase アプリのインスタンスが初期化されていることを確認します。

  2. Google プロバイダ オブジェクトのインスタンスを作成します。

    var provider = new firebase.auth.GoogleAuthProvider();
    
  3. signInWithRedirect を使用して Google プロバイダ オブジェクトで Firebase 認証を行います。signInWithPopup は Cordova ではサポートされていません。

    firebase.auth().signInWithRedirect(provider).then(function() {
      return firebase.auth().getRedirectResult();
    }).then(function(result) {
      // This gives you a Google Access Token.
      // You can use it to access the Google API.
      var token = result.credential.accessToken;
      // The signed-in user info.
      var user = result.user;
      // ...
    }).catch(function(error) {
      // Handle Errors here.
      var errorCode = error.code;
      var errorMessage = error.message;
    });
    
  4. ログイン操作が完了する前にアプリのアクティビティが破棄されるケースを処理するには、アプリが読み込まれるときに getRedirectResult を呼び出します。

    firebase.auth().getRedirectResult().then(function(result) {
      if (result.credential) {
        // This gives you a Google Access Token.
        // You can use it to access the Google API.
        var token = result.credential.accessToken;
        // The signed-in user info.
        var user = result.user;
        // ...
      }
    }).catch(function(error) {
      // Handle Errors here.
      var errorCode = error.code;
      var errorMessage = error.message;
    });
    

    同じメカニズムを使用して、新しいプロバイダを linkWithRedirect 経由でリンクするか、reauthenticateWithRedirect を使用して既存のプロバイダで再認証できます。

フィードバックを送信...

ご不明な点がありましたら、Google のサポートページをご覧ください。