Uwierzytelniaj się przy użyciu dostawców OAuth w Cordobie

Dzięki pakietowi SDK Firebase JS możesz pozwolić użytkownikom Firebase na uwierzytelnianie przy użyciu dowolnego obsługiwanego dostawcy OAuth w środowisku Cordova. Możesz zintegrować dowolnego obsługiwanego dostawcę OAuth, używając pakietu SDK Firebase do wykonania procesu logowania lub ręcznie przeprowadzając przepływ OAuth i przekazując uzyskane dane uwierzytelniające OAuth do Firebase.

Skonfiguruj uwierzytelnianie Firebase dla Cordova

1. Dodaj Firebase do swojego projektu JavaScript . Dodając fragment Firebase, zwróć uwagę na zmienną konfiguracyjną authDomain , która powinna wyglądać następująco my-app.firebaseapp.com . Jeśli zamiast domeny firebaseapp.com udostępnionej przez Firebase używana jest domena niestandardowa, zamiast niej należy użyć domeny niestandardowej.

2. Aby skonfigurować aplikację na Androida, dodaj ją do konsoli Firebase i wprowadź szczegóły aplikacji. Nie potrzebujesz wygenerowanego pliku google-services.json .

3. Aby skonfigurować aplikację na iOS, utwórz aplikację na iOS i dodaj ją do konsoli Firebase . Będziesz potrzebować identyfikatora pakietu iOS, aby dodać go później podczas instalowania wtyczki niestandardowego schematu adresu URL.

4. Włącz łącza dynamiczne Firebase:

   1. W konsoli Firebase otwórz sekcję Linki dynamiczne .

   2. Jeśli jeszcze nie zaakceptowałeś warunków Linków Dynamicznych i nie utworzyłeś domeny Dynamic Links, zrób to teraz.

      Jeśli masz już domenę Dynamic Links, zanotuj to. Domena Linków Dynamicznych zazwyczaj wygląda jak w poniższym przykładzie:

      example.page.link

      Ta wartość będzie Ci potrzebna podczas konfigurowania aplikacji na urządzenia Apple lub Android w celu przechwytywania łącza przychodzącego.

5. Włącz logowanie Google w konsoli Firebase:

   1. W konsoli Firebase otwórz sekcję Uwierzytelnianie .
   2. Na karcie Metoda logowania włącz metodę logowania Google i kliknij Zapisz .

6. Zainstaluj wymagane wtyczki w swoim projekcie 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. Dodaj następującą konfigurację do pliku config.xml Cordova, gdzie AUTH_DOMAIN to domena z kroku (1), a DYNAMIC_LINK_DOMAIN to domena z kroku (3c).

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

   Przykładowa konfiguracja może wyglądać następująco:

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

   Jeśli używana jest domena niestandardowa auth.custom.domain.com , zastąp nią my-app.firebaseapp.com .

   W przypadku aplikacji na Androida dla launchMode należy użyć singleTask .

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

Obsługuj proces logowania za pomocą pakietu SDK Firebase

1. Firebase Auth zależy od zdarzenia deviceReady w celu prawidłowego określenia bieżącego środowiska Cordova. Upewnij się, że instancja aplikacji Firebase została zainicjowana po wyzwoleniu tego zdarzenia.

2. Utwórz instancję obiektu dostawcy Google:

   Web modular API

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

   Web namespaced API

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

3. Uwierzytelnij się w Firebase przy użyciu obiektu dostawcy Google przy użyciu signInWithRedirect . Należy pamiętać, że signInWithPopup nie jest obsługiwana w Kordobie.

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

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

4. Aby obsłużyć przypadek, w którym aktywność aplikacji zostanie zniszczona przed zakończeniem operacji logowania, wywołaj getRedirectResult po załadowaniu aplikacji.

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

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

   Tego samego mechanizmu można użyć do połączenia nowego dostawcy za pomocą linkWithRedirect lub do ponownego uwierzytelnienia u istniejącego dostawcy za pomocą reauthenticateWithRedirect .