Аутентификация с использованием поставщиков 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 , предоставленного Firebase, используется собственный домен, вместо него следует использовать собственный домен.

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

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

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

   1. В консоли Firebase откройте раздел Dynamic Links .

   2. Если вы еще не приняли условия Dynamic Links и не создали домен Dynamic Links , сделайте это сейчас.

      Если вы уже создали домен 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

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

   Web

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

3. Аутентифицируйтесь в Firebase, используя объект провайдера Google, используя signInWithRedirect . Обратите внимание, что signInWithPopup не поддерживается в Кордове.

   Web

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

   Web

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

4. Чтобы обработать случай, когда активность приложения уничтожается до завершения операции входа, вызовите getRedirectResult при загрузке приложения.

   Web

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

   Web

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

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