Mit OAuth-Anbietern bei Cordova authentifizieren

Mit dem Firebase JS SDK können Sie Ihre Firebase-Nutzer in einer Cordova-Umgebung über jeden unterstützten OAuth-Anbieter authentifizieren. Sie können jeden unterstützten OAuth-Anbieter integrieren, indem Sie entweder das Firebase SDK verwenden, um den Anmeldevorgang auszuführen, oder den OAuth-Vorgang manuell ausführen und die resultierenden OAuth-Anmeldedaten an Firebase übergeben.

Firebase Authentication für Cordova einrichten

  1. Fügen Sie Ihrem JavaScript-Projekt Firebase hinzu. Achten Sie beim Hinzufügen des Firebase-Snippets auf die Konfigurationsvariable authDomain, die in etwa so aussehen sollte: my-app.firebaseapp.com. Wenn anstelle der von Firebase bereitgestellten firebaseapp.com-Domain eine benutzerdefinierte Domain verwendet wird, sollte stattdessen die benutzerdefinierte Domain verwendet werden.

  2. Wenn Sie eine Android-App einrichten möchten, fügen Sie sie der Firebase-Konsole hinzu und geben Sie die App-Details ein. Sie benötigen die generierte google-services.json nicht.

  3. Wenn Sie eine iOS-App einrichten möchten, 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 Plug-ins für benutzerdefinierte URL-Schemas hinzuzufügen.

  4. Aktivieren Sie Firebase Dynamic Links:

    1. Öffnen Sie in der Firebase Console den Bereich Dynamic Links.

    2. Wenn Sie die Dynamic Links-Nutzungsbedingungen noch nicht akzeptiert und keine Dynamic Links-Domain erstellt haben, tun Sie dies jetzt.

      Wenn Sie bereits eine Dynamic Links-Domain erstellt haben, notieren Sie sich diese. Eine Dynamic Links-Domain sieht in der Regel so aus:

      example.page.link

      Sie benötigen diesen Wert, wenn Sie Ihre Apple- oder Android-App so konfigurieren, dass der eingehende Link abgefangen wird.

  5. Aktivieren Sie Google Log-in in der Firebase-Konsole:

    1. Öffnen Sie in der Firebase Console den Bereich Auth.
    2. Aktivieren Sie auf dem Tab Anmeldemethode die Methode Google-Anmeldung und klicken Sie auf Speichern.

  6. Installieren Sie die erforderlichen Plug-ins 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 Ihrer Cordova-config.xml-Datei die folgende Konfiguration hinzu. Dabei ist AUTH_DOMAIN die Domain aus Schritt 1 und DYNAMIC_LINK_DOMAIN die Domain aus Schritt 3c.

    <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 so 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 Domain 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" />

Anmeldevorgang mit dem Firebase SDK abwickeln

  1. Firebase Auth benötigt das Ereignis deviceReady, um die aktuelle Cordova-Umgebung korrekt zu ermitteln. Die Firebase App-Instanz muss nach dem Auslösen dieses Ereignisses initialisiert werden.

  2. Erstellen Sie eine Instanz des Google-Anbieter-Objekts:

    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. Authentifizieren Sie sich mit Firebase über das Google-Anbieterobjekt mit signInWithRedirect. signInWithPopup wird in Cordova nicht unterstützt.

    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. Wenn die App-Aktivitäten gelöscht werden, bevor der Anmeldevorgang abgeschlossen ist, rufe getRedirectResult beim Laden deiner App auf.

    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

    Mit demselben Mechanismus können Sie einen neuen Anbieter über linkWithRedirect verknüpfen oder sich mit einem vorhandenen Anbieter über reauthenticateWithRedirect noch einmal authentifizieren.