Аутентификация с использованием поставщиков OAuth с помощью Cordova

С помощью Firebase JS SDK вы можете разрешить пользователям Firebase проходить аутентификацию с использованием любого поддерживаемого поставщика OAuth в среде Cordova. Вы можете интегрировать любого поддерживаемого поставщика OAuth либо с помощью Firebase SDK для выполнения процесса входа, либо выполнив поток OAuth вручную и передав полученные учетные данные OAuth в Firebase.

Настройте аутентификацию Firebase для Кордовы

  1. Добавьте Firebase в свой проект JavaScript . При добавлении фрагмента Firebase обратите внимание на переменную конфигурации authDomain , которая должна выглядеть как my-app.firebaseapp.com . Если вместо домена firebaseapp.com , используется собственный домен, вместо него следует использовать собственный домен.

  2. Чтобы настроить приложение Android, добавьте свое приложение Android в консоль Firebase и введите данные своего приложения. Вам не нужен сгенерированный google-services.json .

  3. Чтобы настроить приложение iOS, создайте приложение iOS и добавьте его в консоль Firebase . Вам понадобится идентификатор пакета iOS, который нужно будет добавить позже при установке плагина пользовательской схемы URL-адресов.

  4. Включите динамические ссылки Firebase:

    1. В консоли Firebase откройте раздел «Динамические ссылки» .
    2. Если вы еще не приняли условия Dynamic Links и не создали домен Dynamic Links, сделайте это сейчас.

      Если вы уже создали домен динамических ссылок, обратите на это внимание. Домен динамических ссылок обычно выглядит следующим образом:

      example.page.link

      Это значение понадобится вам, когда вы настроите приложение Apple или Android для перехвата входящей ссылки.

  5. Включите вход в Google в консоли Firebase:

    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-fix --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. Добавьте следующую конфигурацию в файл config.xml Cordova, где 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 в качестве launchMode следует использовать singleTask .

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

Управляйте процессом входа в систему с помощью Firebase SDK

  1. Firebase Auth зависит от события deviceReady , чтобы правильно определить текущую среду Cordova. Убедитесь, что экземпляр приложения Firebase инициализирован после срабатывания этого события.

  2. Создайте экземпляр объекта провайдера Google:

    Web modular API

    import { GoogleAuthProvider } from "firebase/auth/cordova";
    
    const provider = new GoogleAuthProvider();

    Web namespaced API

    var provider = new firebase.auth.GoogleAuthProvider();
  3. Аутентификация в Firebase с использованием объекта провайдера Google с помощью signInWithRedirect . Обратите внимание, что signInWithPopup не поддерживается в Кордове.

    Web modular API

    import { getAuth, signInWithRedirect, getRedirectResult, GoogleAuthProvider } from "firebase/auth/cordova";
    
    const auth = getAuth();
    signInWithRedirect(auth, new GoogleAuthProvider())
      .then(() => {
        return getRedirectResult(auth);
      })
      .then((result) => {
        const credential = GoogleAuthProvider.credentialFromResult(result);
    
        // This gives you a Google Access Token.
        // You can use it to access the Google API.
        const token = credential.accessToken;
    
        // The signed-in user info.
        const user = result.user;
        // ...
      }).catch((error) => {
        // Handle Errors here.
        const errorCode = error.code;
        const errorMessage = error.message;
      });

    Web namespaced API

    firebase.auth().signInWithRedirect(provider).then(() => {
      return firebase.auth().getRedirectResult();
    }).then((result) => {
      /** @type {firebase.auth.OAuthCredential} */
      var credential = result.credential;
    
      // This gives you a Google Access Token.
      // You can use it to access the Google API.
      var token = credential.accessToken;
      // The signed-in user info.
      var user = result.user;
      // ...
    }).catch((error) => {
      // Handle Errors here.
      var errorCode = error.code;
      var errorMessage = error.message;
    });
  4. Чтобы обработать случай, когда активность приложения уничтожается до завершения операции входа, вызовите getRedirectResult при загрузке приложения.

    Web modular API

    import { getAuth, getRedirectResult, GoogleAuthProvider } from "firebase/auth/cordova";
    
    const auth = getAuth();
    getRedirectResult(auth)
      .then((result) => {
        const credential = GoogleAuthProvider.credentialFromResult(result);
        if (credential) {        
          // This gives you a Google Access Token.
          // You can use it to access the Google API.
          const token = credential.accessToken;
          // The signed-in user info.
          const user = result.user;
          // ...
        }
      })
      .catch((error) => {
        // Handle Errors here.
        const errorCode = error.code;
        const errorMessage = error.message;
      });

    Web namespaced API

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

    Тот же механизм можно использовать для связывания нового провайдера через linkWithRedirect или для повторной аутентификации с существующим провайдером с помощью reauthenticateWithRedirect .