Authentifizieren Sie sich mithilfe von OAuth-Anbietern mit Cordova

Mit dem Firebase JS SDK können Sie Ihren Firebase-Benutzern die Authentifizierung mit jedem unterstützten OAuth-Anbieter in einer Cordova-Umgebung ermöglichen. Sie können jeden unterstützten OAuth-Anbieter integrieren, indem Sie entweder das Firebase SDK verwenden, um den Anmeldevorgang durchzuführen, oder indem Sie den OAuth-Ablauf manuell ausführen und die resultierenden OAuth-Anmeldeinformationen an Firebase übergeben.

Richten Sie die Firebase-Authentifizierung für Cordova ein

  1. Fügen Sie Firebase zu Ihrem JavaScript-Projekt hinzu . Beachten Sie beim Hinzufügen des Firebase-Snippets die Konfigurationsvariable authDomain , die wie folgt aussehen sollte my-app.firebaseapp.com . Wenn eine benutzerdefinierte Domäne anstelle der von Firebase bereitgestellten firebaseapp.com Domäne verwendet wird, sollte stattdessen die benutzerdefinierte Domäne verwendet werden.

  2. Um eine Android-App einzurichten, fügen Sie Ihre Android-App zur Firebase-Konsole hinzu und geben Sie Ihre App-Details ein. Sie benötigen die generierte Datei google-services.json nicht.

  3. Um eine iOS-App einzurichten, erstellen Sie eine iOS-Anwendung und fügen Sie sie der Firebase-Konsole hinzu. Sie benötigen die iOS-Bundle-ID, um sie später bei der Installation des benutzerdefinierten URL-Schema-Plugins hinzuzufügen.

  4. Aktivieren Sie dynamische Firebase-Links:

    1. Öffnen Sie in der Firebase-Konsole den Abschnitt „Dynamische Links“ .

    2. Wenn Sie die Dynamic Links-Bedingungen noch nicht akzeptiert und keine Dynamic Links-Domäne erstellt haben, tun Sie dies jetzt.

      Wenn Sie bereits eine Dynamic Links-Domäne erstellt haben, notieren Sie sich dies. Eine Dynamic Links-Domäne sieht normalerweise wie im folgenden Beispiel aus:

      example.page.link

      Sie benötigen diesen Wert, wenn Sie Ihre Apple- oder Android-App so konfigurieren, dass sie den eingehenden Link abfängt.

  5. Aktivieren Sie die Google-Anmeldung in der Firebase-Konsole:

    1. Öffnen Sie in der Firebase-Konsole den Abschnitt „Auth“ .
    2. Aktivieren Sie auf der Registerkarte Anmeldemethode die Google-Anmeldemethode und klicken Sie auf Speichern .

  6. Installieren Sie die erforderlichen Plugins in Ihrem Cordova-Projekt.

    # 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. Fügen Sie die folgende Konfiguration zu Ihrer Cordova-Datei config.xml hinzu, wobei AUTH_DOMAIN die Domäne aus Schritt (1) und DYNAMIC_LINK_DOMAIN die Domäne aus Schritt (3c) ist.

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

    Eine Beispielkonfiguration könnte wie folgt aussehen:

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

    Wenn eine benutzerdefinierte Domäne auth.custom.domain.com verwendet wird, ersetzen Sie my-app.firebaseapp.com durch diese.

    Für Android-Anwendungen sollte singleTask für launchMode verwendet werden.

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

Behandeln Sie den Anmeldevorgang mit dem Firebase SDK

  1. Firebase Auth ist auf das Ereignis deviceReady angewiesen, um die aktuelle Cordova-Umgebung korrekt zu ermitteln. Stellen Sie sicher, dass die Firebase-App-Instanz initialisiert wird, nachdem dieses Ereignis ausgelöst wurde.

  2. Erstellen Sie eine Instanz des Google-Providerobjekts:

    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. Authentifizieren Sie sich bei Firebase mithilfe des Google-Anbieterobjekts mithilfe von signInWithRedirect . Beachten Sie, dass signInWithPopup in Cordova nicht unterstützt wird.

    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. Um den Fall zu behandeln, dass die App-Aktivität zerstört wird, bevor der Anmeldevorgang abgeschlossen ist, rufen Sie getRedirectResult auf, wenn Ihre App geladen wird.

    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

    Der gleiche Mechanismus kann verwendet werden, um einen neuen Anbieter über linkWithRedirect zu verknüpfen oder sich mithilfe von reauthenticateWithRedirect erneut bei einem vorhandenen Anbieter zu authentifizieren.