Catch up on everthing we announced at this year's Firebase Summit. Learn more

Authentifizierung mit Apple mit JavaScript

Sie können Ihren Benutzern ermöglichen, sich mit ihrer Apple-ID bei Firebase zu authentifizieren, indem Sie das Firebase SDK verwenden, um den End-to-End-OAuth 2.0-Anmeldevorgang durchzuführen.

Bevor Sie beginnen

Um Benutzer mit Apple anzumelden, konfigurieren Sie zuerst "Mit Apple anmelden" auf der Entwickler-Site von Apple und aktivieren Sie dann Apple als Anmeldeanbieter für Ihr Firebase-Projekt.

Treten Sie dem Apple-Entwicklerprogramm bei

Einloggen mit Apple kann nur von Mitgliedern des so konfiguriert werden , von Apple Developer Program .

Anmeldung mit Apple konfigurieren

Auf der Apple Developer Website, gehen Sie wie folgt:

  1. Verknüpfen Sie Ihre Website zu Ihrer App , wie im ersten Abschnitt beschrieben konfigurieren Einloggen mit Apple für das Web . Registrieren Sie die folgende URL als Rückgabe-URL, wenn Sie dazu aufgefordert werden:

    https://YOUR_FIREBASE_PROJECT_ID.firebaseapp.com/__/auth/handler

    Sie können Ihr Projekt Firebase - ID auf die bekommen Firebase Konsoleneinstellungen Seite .

    Wenn Sie fertig sind, notieren Sie sich Ihre neue Service-ID, die Sie im nächsten Abschnitt benötigen.

  2. Erstellen Sie ein Einloggen mit Apple privaten Schlüssel . Sie benötigen Ihren neuen privaten Schlüssel und Ihre Schlüssel-ID im nächsten Abschnitt.
  3. Wenn Sie eine beliebige Funktionen von Firebase - Authentifizierung ist , dass E - Mails an die Benutzer senden, einschließlich E - Mail - Link-Anmeldung, E - Mail - Adresse Überprüfung, Kontoänderung Widerruf und andere, configure das Apple private E - noreply@ YOUR_FIREBASE_PROJECT_ID .firebaseapp.com Mail - Relay - Dienst und registrieren noreply@ YOUR_FIREBASE_PROJECT_ID .firebaseapp.com (oder Ihre benutzerdefinierte E-Mail-Vorlagendomäne), damit Apple von Firebase Authentication gesendete E-Mails an anonymisierte Apple-E-Mail-Adressen weiterleiten kann.

Apple als Anmeldeanbieter aktivieren

  1. In Firebase zu einem Projekt .
  2. In der Firebase Konsole , öffnen Sie den Abschnitt Auth. Auf dem Anmelden Methode Registerkarte, aktivieren Sie den Apple - Provider. Geben Sie die Service-ID an, die Sie im vorherigen Abschnitt erstellt haben. Auch in der OAuth - Code Strömungskonfiguration Abschnitt geben Sie Ihre Apple - Team ID und der private Schlüssel und Schlüssel - ID Sie im vorherigen Abschnitt erstellt haben .

Erfülle die Anforderungen für anonymisierte Daten von Apple

Einloggen mit Apple gibt den Benutzern die Möglichkeit , ihre Daten zu anonymisieren, einschließlich ihrer E - Mail - Adresse, bei der Anmeldung. Benutzer , die diese Option wählen , haben E - Mail - Adressen mit der Domain privaterelay.appleid.com . Wenn Sie „Mit Apple anmelden“ in Ihrer App verwenden, müssen Sie alle geltenden Entwicklerrichtlinien oder Bedingungen von Apple in Bezug auf diese anonymisierten Apple-IDs einhalten.

Dazu gehört auch, die erforderliche Zustimmung des Benutzers einzuholen, bevor Sie direkt identifizierende personenbezogene Daten mit einer anonymisierten Apple-ID verknüpfen. Bei der Verwendung von Firebase Authentication kann dies die folgenden Aktionen umfassen:

  • Verknüpfen Sie eine E-Mail-Adresse mit einer anonymisierten Apple-ID oder umgekehrt.
  • Verknüpfen Sie eine Telefonnummer mit einer anonymisierten Apple-ID oder umgekehrt
  • Verknüpfen Sie einen nicht anonymen sozialen Zugang (Facebook, Google usw.) mit einer anonymisierten Apple-ID oder umgekehrt.

Die obige Liste ist nicht vollständig. Lesen Sie die Lizenzvereinbarung für das Apple-Entwicklerprogramm im Abschnitt „Mitgliedschaft“ Ihres Entwicklerkontos, um sicherzustellen, dass Ihre App die Anforderungen von Apple erfüllt.

Verwalten Sie den Anmeldevorgang mit dem Firebase SDK

Wenn Sie eine Web-App erstellen, können Sie Ihre Benutzer am einfachsten über ihre Apple-Konten bei Firebase authentifizieren, indem Sie den gesamten Anmeldevorgang mit dem Firebase JavaScript SDK abwickeln.

Führen Sie die folgenden Schritte aus, um den Anmeldevorgang mit dem Firebase JavaScript SDK zu handhaben:

  1. Erstellen Sie eine Instanz eines OAuthProvider den entsprechenden Provider - ID mit apple.com.

    Webversion 9

    import { OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('apple.com');

    Webversion 8

    var provider = new firebase.auth.OAuthProvider('apple.com');
  2. Optional: Geben Sie zusätzliche OAuth 2.0 Bereiche jenseits der Standard , dass Sie auf Anfrage vom Authentifizierungs - Provider wollen.

    Webversion 9

    provider.addScope('email');
    provider.addScope('name');

    Webversion 8

    provider.addScope('email');
    provider.addScope('name');

    Standardmäßig , wenn ein Konto pro E - Mail - Adresse aktiviert ist, fordert Firebase E - Mail und den Namen Bereiche. Wenn Sie diese Einstellung auf mehrere Konten pro E - Mail Adresse ändern, wird Firebase keine Bereiche von Apple anfordern , wenn Sie sie angeben.

  3. Optional: Wenn Sie Apples Anmeldebildschirm in einer anderen Sprache als Englisch angezeigt werden sollen, setzen Sie die locale - Parameter. Siehe die Anmeldung mit Apple - docs für die unterstützten Sprachen.

    Webversion 9

    provider.setCustomParameters({
      // Localize the Apple authentication screen in French.
      locale: 'fr'
    });

    Webversion 8

    provider.setCustomParameters({
      // Localize the Apple authentication screen in French.
      locale: 'fr'
    });
  4. Authentifizieren Sie sich bei Firebase mithilfe des OAuth-Anbieterobjekts. Sie können Ihre Benutzer auffordern, sich mit ihren Apple-Konten anzumelden, indem Sie entweder ein Popup-Fenster öffnen oder zur Anmeldeseite umleiten. Die Umleitungsmethode wird auf mobilen Geräten bevorzugt.

    • So melden Sie sich mit einem Pop-up - Fenster, Call signInWithPopup() :

      Webversion 9

      import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      signInWithPopup(auth, provider)
        .then((result) => {
          // The signed-in user info.
          const user = result.user;
      
          // Apple credential
          const credential = OAuthProvider.credentialFromResult(result);
          const accessToken = credential.accessToken;
          const idToken = credential.idToken;
      
          // ...
        })
        .catch((error) => {
          // Handle Errors here.
          const errorCode = error.code;
          const errorMessage = error.message;
          // The email of the user's account used.
          const email = error.email;
          // The credential that was used.
          const credential = OAuthProvider.credentialFromError(error);
      
          // ...
        });

      Webversion 8

      firebase
        .auth()
        .signInWithPopup(provider)
        .then((result) => {
          /** @type {firebase.auth.OAuthCredential} */
          var credential = result.credential;
      
          // The signed-in user info.
          var user = result.user;
      
          // You can also get the Apple OAuth Access and ID Tokens.
          var accessToken = credential.accessToken;
          var idToken = credential.idToken;
      
          // ...
        })
        .catch((error) => {
          // Handle Errors here.
          var errorCode = error.code;
          var errorMessage = error.message;
          // The email of the user's account used.
          var email = error.email;
          // The firebase.auth.AuthCredential type that was used.
          var credential = error.credential;
      
          // ...
        });
    • Um sich anzumelden , indem auf die Anmeldeseite umgeleitet, rufen signInWithRedirect() :

      Webversion 9

      import { getAuth, signInWithRedirect } from "firebase/auth";
      
      const auth = getAuth();
      signInWithRedirect(auth, provider);

      Webversion 8

      firebase.auth().signInWithRedirect(provider);

      Nachdem der Benutzer abgeschlossen ist Anmelde- und kehrt zur Seite, können Sie das Anmelde-Ergebnis erhalten , indem Aufruf getRedirectResult() :

      Webversion 9

      import { getAuth, getRedirectResult, OAuthProvider } from "firebase/auth";
      
      // Result from Redirect auth flow.
      const auth = getAuth();
      getRedirectResult(auth)
        .then((result) => {
          const credential = OAuthProvider.credentialFromResult(result);
          if (credential) {
            // You can also get the Apple OAuth Access and ID Tokens.
            const accessToken = credential.accessToken;
            const idToken = credential.idToken;
          }
          // The signed-in user info.
          const user = result.user;
        })
        .catch((error) => {
          // Handle Errors here.
          const errorCode = error.code;
          const errorMessage = error.message;
          // The email of the user's account used.
          const email = error.email;
          // The credential that was used.
          const credential = OAuthProvider.credentialFromError(error);
      
          // ...
        });

      Webversion 8

      // Result from Redirect auth flow.
      firebase
        .auth()
        .getRedirectResult()
        .then((result) => {
          if (result.credential) {
            /** @type {firebase.auth.OAuthCredential} */
            var credential = result.credential;
      
            // You can get the Apple OAuth Access and ID Tokens.
            var accessToken = credential.accessToken;
            var idToken = credential.idToken;
      
            // ...
          }
          // The signed-in user info.
          var user = result.user;
        })
        .catch((error) => {
          // Handle Errors here.
          var errorCode = error.code;
          var errorMessage = error.message;
          // The email of the user's account used.
          var email = error.email;
          // The firebase.auth.AuthCredential type that was used.
          var credential = error.credential;
      
          // ...
        });

      Hier können Sie auch Fehler abfangen und behandeln. Eine Liste der Fehlercodes finden Sie in der API - Referenz .

    Im Gegensatz zu anderen von Firebase Auth unterstützten Anbietern stellt Apple keine Foto-URL bereit.

    Auch wenn der Benutzer wählt nicht ihre E - Mail mit der App von Apple Bestimmungen einer eindeutige E - Mail - Adresse für den Benutzer (der Form zu teilen xyz@privaterelay.appleid.com ), die es Aktien mit Ihrer App. Wenn Sie den privaten E-Mail-Relay-Dienst konfiguriert haben, leitet Apple an die anonymisierte Adresse gesendete E-Mails an die echte E-Mail-Adresse des Benutzers weiter.

    Apple - Aktien nur Benutzerinformationen wie der Anzeigename mit Apps zum ersten Mal ein Benutzer in. In der Regel speichert Firebase der Anzeigename das erste Mal ein Benutzer mit Apple, die Sie mit bekommen firebase.auth().currentUser.displayName . Wenn Sie jedoch zuvor Apple verwendet haben, um einen Benutzer bei der App anzumelden, ohne Firebase zu verwenden, stellt Apple Firebase den Anzeigenamen des Benutzers nicht zur Verfügung.

Erneute Authentifizierung und Kontoverknüpfung

Das gleiche Muster kann mit verwendet werden reauthenticateWithPopup() und reauthenticateWithRedirect() , mit dem Sie einen neuen Berechtigungsnachweis für sensible Vorgänge abrufen können , die kürzlich eine Anmeldung erforderlich:

Webversion 9

import { getAuth, reauthenticateWithPopup, OAuthProvider } from "firebase/auth";

// Result from Redirect auth flow.
const auth = getAuth();
const provider = new OAuthProvider('apple.com');

reauthenticateWithPopup(auth.currentUser, provider)
  .then((result) => {
    // User is re-authenticated with fresh tokens minted and can perform
    // sensitive operations like account deletion, or updating their email
    // address or password.

    // The signed-in user info.
    const user = result.user;

    // You can also get the Apple OAuth Access and ID Tokens.
    const credential = OAuthProvider.credentialFromResult(result);
    const accessToken = credential.accessToken;
    const idToken = credential.idToken;

    // ...
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.email;
    // The credential that was used.
    const credential = OAuthProvider.credentialFromError(error);

    // ...
  });

Webversion 8

const provider = new firebase.auth.OAuthProvider('apple.com');

firebase
  .auth()
  .currentUser
  .reauthenticateWithPopup(provider)
  .then((result) => {
    // User is re-authenticated with fresh tokens minted and can perform
    // sensitive operations like account deletion, or updating their email
    // address or password.
    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // The signed-in user info.
    var user = result.user;
     // You can also get the Apple OAuth Access and ID Tokens.
    var accessToken = credential.accessToken;
    var idToken = credential.idToken;

    // ...
  })
  .catch((error) => {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;

    // ...
  });

Und, können Sie linkWithPopup() und linkWithRedirect() , verschiedene Identity - Provider zu bestehenden Konten zu verknüpfen.

Beachten Sie, dass Sie bei Apple die ausdrückliche Zustimmung der Benutzer einholen müssen, bevor Sie deren Apple-Konten mit anderen Daten verknüpfen.

Um beispielsweise ein Facebook-Konto mit dem aktuellen Firebase-Konto zu verknüpfen, verwenden Sie das Zugriffstoken, das Sie durch die Anmeldung des Benutzers bei Facebook erhalten haben:

Webversion 9

import { getAuth, linkWithPopup, FacebookAuthProvider } from "firebase/auth";

const auth = getAuth();
const provider = new FacebookAuthProvider();
provider.addScope('user_birthday');

// Assuming the current user is an Apple user linking a Facebook provider.
linkWithPopup(auth.currentUser, provider)
    .then((result) => {
      // Facebook credential is linked to the current Apple user.
      // ...

      // The user can now sign in to the same account
      // with either Apple or Facebook.
    })
    .catch((error) => {
      // Handle error.
    });

Webversion 8

const provider = new firebase.auth.FacebookAuthProvider();
provider.addScope('user_birthday');

// Assuming the current user is an Apple user linking a Facebook provider.
firebase.auth().currentUser.linkWithPopup(provider)
    .then((result) => {
      // Facebook credential is linked to the current Apple user.
      // Facebook additional data available in result.additionalUserInfo.profile,

      // Additional Facebook OAuth access token can also be retrieved.
      // result.credential.accessToken

      // The user can now sign in to the same account
      // with either Apple or Facebook.
    })
    .catch((error) => {
      // Handle error.
    });

Mit Firebase in einer Chrome-Erweiterung authentifizieren

Wenn Sie eine Chrome-Erweiterungs-App erstellen, müssen Sie Ihre Chrome-Erweiterungs-ID hinzufügen:

  1. Öffnen Sie das Projekt in der Firebase Konsole .
  2. Im Abschnitt Authentifizierung, öffnen Sie das Anmelde-Verfahren Seite.
  3. Fügen Sie einen URI wie folgt aus der Liste der autorisierten Domains:
    chrome-extension://CHROME_EXTENSION_ID

Nur Popup - Operationen ( signInWithPopup , linkWithPopup und reauthenticateWithPopup ) sind auf Chrome - Erweiterungen zur Verfügung, da Chrome - Erweiterungen nicht HTTP - Redirects verwenden können. Sie sollten diese Methoden über ein Hintergrundseitenskript statt über ein Browseraktions-Popup aufrufen, da das Authentifizierungs-Popup das Browseraktions-Popup abbricht. Die Popup - Methoden können nur in Erweiterungen verwendet werden Manifest V2 . Das neuere Manifest V3 erlaubt nur Hintergrund - Skripte in Form von Service - Mitarbeitern, die nicht die Pop - up - Operationen überhaupt durchführen können.

In Ihrer Manifest - Datei macht die Chrome - Erweiterung sicher , dass Sie das Add https://apis.google.com URL zum content_security_policy AllowList.

Beachten Sie, dass Sie die benutzerdefinierte Domäne weiterhin ähnlich wie die Standarddomäne firebaseapp.com bei Apple verifizieren müssen:

http://auth.custom.example.com/.well-known/apple-developer-domain-association.txt

Erweitert: Authentifizierung mit Firebase in Node.js

So authentifizieren Sie sich bei Firebase in einer Node.js-Anwendung:

  1. Melden Sie den Benutzer mit seinem Apple-Konto an und rufen Sie das Apple-ID-Token des Benutzers ab. Sie können dies auf verschiedene Weise erreichen. Wenn Ihre Node.js-App beispielsweise über ein Browser-Front-End verfügt:

    1. Generieren Sie in Ihrem Backend eine zufällige Zeichenfolge (eine "Nonce") und berechnen Sie ihren SHA256-Hash. Die Nonce ist ein einmaliger Wert, den Sie verwenden, um einen einzelnen Roundtrip zwischen Ihrem Back-End und den Authentifizierungsservern von Apple zu validieren.

      Webversion 9

      const crypto = require("crypto");
      const string_decoder = require("string_decoder");
      
      // Generate a new random string for each sign-in
      const generateNonce = (length) => {
        const decoder = new string_decoder.StringDecoder("ascii");
        const buf = Buffer.alloc(length);
        let nonce = "";
        while (nonce.length < length) {
          crypto.randomFillSync(buf);
          nonce = decoder.write(buf);
        }
        return nonce.substr(0, length);
      };
      
      const unhashedNonce = generateNonce(10);
      
      // SHA256-hashed nonce in hex
      const hashedNonceHex = crypto.createHash('sha256')
        .update(unhashedNonce).digest().toString('hex');

      Webversion 8

      const crypto = require("crypto");
      const string_decoder = require("string_decoder");
      
      // Generate a new random string for each sign-in
      const generateNonce = function(length) {
        const decoder = new string_decoder.StringDecoder("ascii");
        const buf = Buffer.alloc(length);
        var nonce = "";
        while (nonce.length < length) {
          crypto.randomFillSync(buf);
          nonce = decoder.write(buf);
        }
        return nonce.substr(0, length);
      };
      
      const unhashedNonce = generateNonce(10);
      
      // SHA256-hashed nonce in hex
      const hashedNonceHex = crypto.createHash('sha256')
        .update(unhashedNonce).digest().toString('hex');
    2. Geben Sie auf Ihrer Anmeldeseite die gehashte Nonce in Ihrer Anmeldung mit Apple-Konfiguration an:

      <script src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
      <div id="appleid-signin" data-color="black" data-border="true" data-type="sign in"></div>
      <script>
          AppleID.auth.init({
              clientId: YOUR_APPLE_CLIENT_ID,
              scope: 'name email',
              redirectURI: URL_TO_YOUR_REDIRECT_HANDLER,  // See the next step.
              state: '[STATE]',  // Optional value that Apple will send back to you
                                 // so you can return users to the same context after
                                 // they sign in.
              nonce: HASHED_NONCE  // The hashed nonce you generated in the previous step.
          });
      </script>
      
    3. Rufen Sie das Apple-ID-Token von der serverseitigen POST-Authentifizierungsantwort ab:

      app.post('/redirect', (req, res) => {
        const savedState = req.cookies.__session;
        const code = req.body.code;
        const state = req.body.state;
        const appleIdToken = req.body.id_token;
        if (savedState !== state || !code) {
          res.status(403).send('403: Permission denied');
        } else {
          // Sign in with Firebase using appleIdToken. (See next step).
        }
      });
      

    Siehe auch Konfigurieren der Webseite für Einloggen mit Apple .

  2. Nachdem Sie das Apple-ID-Token des Benutzers erhalten haben, verwenden Sie es, um ein Credential-Objekt zu erstellen, und melden Sie den Benutzer dann mit den Credentials an:

    Webversion 9

    import { getAuth, signInWithCredential, OAuthProvider } from "firebase/auth";
    
    const auth = getAuth();
    
    // Build Firebase credential with the Apple ID token.
    const provider = new OAuthProvider('apple.com');
    const authCredential = provider.credential({
      idToken: appleIdToken,
      rawNonce: unhashedNonce,
    });
    
    // Sign in with credential form the Apple user.
    signInWithCredential(auth, authCredential)
      .then((result) => {
        // User signed in.
      })
      .catch((error) => {
        // An error occurred. If error.code == 'auth/missing-or-invalid-nonce',
        // make sure you're sending the SHA256-hashed nonce as a hex string
        // with your request to Apple.
        console.log(error);
      });

    Webversion 8

    // Build Firebase credential with the Apple ID token.
    const provider = new firebase.auth.OAuthProvider('apple.com');
    const authCredential = provider.credential({
      idToken: appleIdToken,
      rawNonce: unhashedNonce,
    });
    
    // Sign in with credential form the Apple user.
    firebase.auth().signInWithCredential(authCredential)
      .then((result) => {
        // User signed in.
      })
      .catch((error) => {
        // An error occurred. If error.code == 'auth/missing-or-invalid-nonce',
        // make sure you're sending the SHA256-hashed nonce as a hex string
        // with your request to Apple.
        console.log(error);
      });

Nächste Schritte

Nachdem sich ein Benutzer zum ersten Mal anmeldet, wird ein neues Benutzerkonto erstellt und mit den Anmeldeinformationen – d. h. Benutzername und Kennwort, Telefonnummer oder Authentifizierungsanbieterinformationen – verknüpft, mit denen sich der Benutzer angemeldet hat. Dieses neue Konto wird als Teil Ihres Firebase-Projekts gespeichert und kann verwendet werden, um einen Benutzer in jeder App in Ihrem Projekt zu identifizieren, unabhängig davon, wie sich der Benutzer anmeldet.

  • In Ihren Anwendungen, ist der empfohlene Weg , den Auth - Status Ihres Benutzers zu kennen , einen Beobachter auf dem einzustellen Auth Objekt. Sie können dann bekommen den grundlegenden Profilinformationen des Benutzers aus dem User Siehe Benutzer verwalten .

  • In Ihrer Datenbank und Firebase Realtime Cloud Storage Sicherheitsregeln , können Sie die angemeldeten Nutzer die eindeutige Benutzer - ID aus der bekommen auth Variable, und es verwenden , um steuern kann ein Benutzer Zugriff , welche Daten.

Sie können Benutzer erlauben , durch mehrere Authentifizierungsanbieter anmelden, um Ihre App Verknüpfung Auth - Provider - Anmeldeinformationen zu einem vorhandenen Benutzerkonto.

Um einen Benutzer abzumelden, rufen signOut :

Webversion 9

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});

Webversion 8

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});