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 のようになります。

  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 ダッシュボードに戻ります。
    3. ダイナミック リンク ドメインをメモしておきます。abc123.app.goo.gl のようになります。
  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="abc123.app.goo.gl" scheme="https" />
        <host name="my-app.firebaseapp.com" scheme="https">
            <path url="/__/auth/callback"/>
        </host>
    </universal-links>
    

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

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

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

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

    var provider = new firebase.auth.GoogleAuthProvider();
    

  2. 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;
    });
    

  3. ログイン操作が完了する前にアプリのアクティビティが破棄されるケースを処理するには、アプリが読み込まれるときに 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 のサポートページをご覧ください。