Uwierzytelnianie przy użyciu dostawców protokołu OAuth z Cordova

Dzięki pakietowi Firebase JS SDK możesz zezwolić użytkownikom Firebase na uwierzytelnianie przy użyciu obsługiwanego dostawcy OAuth w środowisku Cordova. Możesz zintegrować dowolnego obsługiwanego dostawcy OAuth. Możesz to zrobić za pomocą pakietu SDK Firebase. lub przez ręczne przeprowadzenie procesu OAuth i przekazanie danych logowania OAuth do Firebase.

Konfigurowanie uwierzytelniania Firebase na potrzeby Cordova

  1. Dodaj Firebase do projektu JavaScript. Podczas dodawania Fragment kodu Firebase. Zwróć uwagę na zmienną konfiguracji authDomain, który powinien wyglądać tak: my-app.firebaseapp.com. Jeśli używana jest domena niestandardowa zamiast domeny firebaseapp.com udostępnionej przez Firebase, niestandardowe zamiast domeny.

  2. Aby skonfigurować aplikację na Androida, dodaj ją do konsoli Firebase. i wpisać informacje o aplikacji. Nie potrzebujesz wygenerowanego google-services.json.

  3. Aby skonfigurować aplikację na iOS, utwórz aplikację na iOS i dodaj ją do Konsola Firebase. Będziesz potrzebować identyfikatora pakietu na iOS, aby dodać go później instalując wtyczkę schematu niestandardowego schematu URL.

  4. Włącz Linki dynamiczne Firebase:

    1. W konsoli Firebase otwórz sekcję Połączenia dynamiczne.

    2. Jeśli nie zaakceptujesz jeszcze warunków korzystania z Linków dynamicznych ani nie masz utworzonych Linków dynamicznych domeny, zrób to teraz.

      Jeśli masz już utworzoną domenę Linki dynamiczne, zanotuj ją. Link dynamiczny domena zwykle wygląda tak:

      example.page.link

      Ta wartość będzie potrzebna podczas konfigurowania aplikacji na Apple lub Androida przechwytywać link przychodzący.

  5. Włącz Logowanie przez Google w konsoli Firebase:

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

  6. Zainstaluj wymagane wtyczki w 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 poniższą konfigurację do pliku Cordova config.xml, gdzie AUTH_DOMAIN to domena z kroku 1, a DYNAMIC_LINK_DOMAIN to domena domeny 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ć tak:

    <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 ją my-app.firebaseapp.com.

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

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

Zarejestruj się za pomocą pakietu SDK Firebase

  1. Uwierzytelnianie Firebase wymaga zdarzenia deviceReady, aby określić obecne środowisko Cordova. Sprawdź, czy instancja aplikacji Firebase jest zainicjowany po wywołaniu tego zdarzenia.

  2. Utwórz instancję obiektu dostawcy 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. Uwierzytelnij za pomocą Firebase za pomocą obiektu dostawcy Google za pomocą: signInWithRedirect Zwróć uwagę, że signInWithPopup to nie jest obsługiwany w Kordowie.

    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. Obsługa przypadku, w którym aktywność w aplikacji zostaje zniszczona przed zalogowaniem się operacja zostanie zakończona, wywołaj getRedirectResult po zakończeniu aplikacji .

    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

    Tego samego mechanizmu można użyć do połączenia nowego dostawcy za pomocą linkWithRedirect lub ponowne uwierzytelnienie u obecnego dostawcy za pomocą: reauthenticateWithRedirect.