Mit OAuth-Anbietern bei Cordova authentifizieren

Mit dem Firebase JS SDK können Sie Ihren Firebase-Nutzern die Authentifizierung mit beliebigen unterstützter OAuth-Anbieter in einer Cordova-Umgebung. Sie können jeden unterstützten OAuth-Anbieter, entweder durch Verwendung des Firebase SDK zur Ausführung des oder durch manuelles Ausführen des OAuth-Vorgangs und Übergeben des OAuth-Anmeldedaten an Firebase übergeben.

Firebase Authentication für Cordova einrichten

  1. Fügen Sie Ihrem JavaScript-Projekt Firebase hinzu. Wenn Sie den Parameter Firebase-Snippet, notieren Sie sich die Konfigurationsvariable authDomain das 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 Ihre Android-App zur Firebase-Konsole hinzu und geben Sie die App-Details ein. Das generierte google-services.json

  3. Erstellen Sie zum Einrichten einer iOS-App eine iOS-App und fügen Sie sie der Firebase-Konsole. Sie benötigen die iOS-Paket-ID, um sie später hinzuzufügen, wenn das Plug-in für das benutzerdefinierte URL-Schema installiert.

  4. Aktivieren Sie Firebase Dynamic Links:

    1. Öffnen Sie in der Firebase-Konsole den Abschnitt Dynamic Links.

    2. Wenn Sie die Dynamic Links-Nutzungsbedingungen noch nicht akzeptiert und ein Dynamic Links erstellt haben holen Sie dies jetzt nach.

      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 den eingehenden Link abfangen.

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

    1. Öffnen Sie in der Firebase-Konsole den Abschnitt Auth.
    2. Aktivieren Sie auf dem Tab Anmeldemethode die Methode Google Log-in 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 die benutzerdefinierte Domain auth.custom.domain.com verwendet wird, ersetzen Sie sie durch damit my-app.firebaseapp.com.

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

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

Anmeldevorgang mit dem Firebase SDK durchführen

  1. Firebase Auth hängt vom deviceReady-Ereignis ab, um zu bestimmen, mit der aktuellen Cordova-Umgebung. Achten Sie darauf, dass die Firebase App-Instanz wird initialisiert, nachdem dieses Ereignis ausgelöst wurde.

  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 bei Firebase mithilfe des Google-Anbieterobjekts mithilfe von signInWithRedirect signInWithPopup ist 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. Für den Fall, dass die App-Aktivität vor der Anmeldung vernichtet wird Vorgang abgeschlossen ist, rufen Sie getRedirectResult auf, wenn Ihre App geladen wird.

    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

    Derselbe Mechanismus kann verwendet werden, um einen neuen Anbieter über linkWithRedirect oder zur erneuten Authentifizierung bei einem bestehenden Anbieter mit reauthenticateWithRedirect.