Mit JavaScript über Apple authentifizieren

Sie können Ihren Nutzern die Authentifizierung mit Firebase über ihre Apple-ID ermöglichen, indem Sie das Firebase SDK verwenden, um den End-to-End-OAuth 2.0-Anmeldevorgang durchzuführen.

Hinweis

Wenn Sie Nutzer mit Apple anmelden möchten, müssen Sie zuerst „Mit Apple anmelden“ auf der Entwicklerwebsite von Apple konfigurieren und dann Apple als Anmeldeanbieter für Ihr Firebase-Projekt aktivieren.

Am Apple-Programm für Entwickler teilnehmen

„Über Apple anmelden“ kann nur von Mitgliedern des Apple-Programms für Entwickler konfiguriert werden.

Über Apple anmelden konfigurieren

Führen Sie auf der Apple Developer-Website die folgenden Schritte aus:

  1. Verknüpfen Sie Ihre Website mit Ihrer App, wie im ersten Abschnitt von Mit Apple im Web anmelden beschrieben. Registrieren Sie die folgende URL als Return-URL, wenn Sie dazu aufgefordert werden:

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

    Sie finden Ihre Firebase-Projekt-ID in der Firebase Console auf der Seite „Einstellungen“.

    Notieren Sie sich nach Abschluss die neue Dienst-ID, die Sie im nächsten Abschnitt benötigen.

  2. Erstellen Sie einen privaten Schlüssel für „Mit Apple anmelden“. Sie benötigen Ihren neuen privaten Schlüssel und die Schlüssel-ID im nächsten Abschnitt.

  3. Wenn Sie Funktionen von Firebase Authentication verwenden, mit denen E‑Mails an Nutzer gesendet werden, z. B. die Anmeldung per E‑Mail-Link, die Bestätigung der E‑Mail-Adresse oder den Widerruf von Kontoänderungen, müssen Sie den privaten E‑Mail-Relay-Dienst von Apple konfigurieren und noreply@YOUR_FIREBASE_PROJECT_ID.firebaseapp.com (oder Ihre benutzerdefinierte E‑Mail-Vorlagendomain) registrieren, damit Apple E‑Mails, die von Firebase Authentication an anonymisierte Apple-E‑Mail-Adressen gesendet werden, weiterleiten kann.

Apple als Anmeldeanbieter aktivieren

  1. Fügen Sie Ihrem Projekt Firebase hinzu.
  2. Öffnen Sie in der Firebase-Konsole den Bereich Auth (Authentifizierung). Aktivieren Sie auf dem Tab Anmeldemethode den Anbieter Apple. Geben Sie die Dienst-ID an, die Sie im vorherigen Abschnitt erstellt haben. Geben Sie außerdem im Abschnitt „OAuth-Code-Ablauf konfigurieren“ Ihre Apple-Team-ID sowie den privaten Schlüssel und die Schlüssel-ID an, die Sie im vorherigen Abschnitt erstellt haben.

Anforderungen von Apple für anonymisierte Daten einhalten

Mit „Mit Apple anmelden“ haben Nutzer die Möglichkeit, ihre Daten, einschließlich ihrer E-Mail-Adresse, bei der Anmeldung zu anonymisieren. Nutzer, die diese Option auswählen, haben E-Mail-Adressen mit der Domain privaterelay.appleid.com. Wenn Sie „Mit Apple anmelden“ in Ihrer App verwenden, müssen Sie alle anwendbaren Entwicklerrichtlinien oder ‑bedingungen von Apple bezüglich dieser anonymisierten Apple-IDs einhalten.

Außerdem müssen Sie die erforderliche Einwilligung des Nutzers einholen, bevor Sie direkt identifizierbare personenbezogene Daten mit einer anonymisierten Apple-ID verknüpfen. Wenn Sie die Firebase-Authentifizierung verwenden, kann dies die folgenden Aktionen umfassen:

  • Eine E‑Mail-Adresse mit einer anonymisierten Apple‑ID verknüpfen und umgekehrt
  • Telefonnummer mit einer anonymisierten Apple‑ID verknüpfen und umgekehrt
  • Nicht-anonyme Anmeldedaten für soziale Medien (Facebook, Google usw.) mit einer anonymisierten Apple-ID verknüpfen und umgekehrt

Die obige Liste ist nicht vollständig. In der Lizenzvereinbarung des Apple-Entwicklerprogramms im Mitgliedschaftsbereich Ihres Entwicklerkontos finden Sie Informationen dazu, ob Ihre App die Anforderungen von Apple erfüllt.

Anmeldevorgang mit dem Firebase SDK abwickeln

Wenn Sie eine Web-App entwickeln, ist es am einfachsten, Ihre Nutzer mit Firebase über ihre Apple-Konten zu authentifizieren, indem Sie den gesamten Anmeldevorgang mit dem Firebase JavaScript SDK abwickeln.

So verarbeiten Sie den Anmeldevorgang mit dem Firebase JavaScript SDK:

  1. Erstellen Sie eine Instanz von OAuthProvider mit der entsprechenden Anbieter-ID apple.com.

    Web

    import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('apple.com');
    auth_apple_provider_create.js

    Web

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

  2. Optional:Geben Sie zusätzliche OAuth 2.0-Bereiche an, die Sie vom Authentifizierungsanbieter anfordern möchten.

    Web

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

    Web

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

    Wenn Ein Konto pro E-Mail-Adresse aktiviert ist, fordert Firebase standardmäßig die Bereiche „E-Mail-Adresse“ und „Name“ an. Wenn Sie diese Einstellung in Mehrere Konten pro E-Mail-Adresse ändern, werden in Firebase keine Bereiche von Apple angefordert, sofern Sie sie nicht angeben.

  3. Optional:Wenn Sie den Anmeldebildschirm von Apple in einer anderen Sprache als Englisch anzeigen möchten, legen Sie den Parameter locale fest. Eine Liste der unterstützten Sprachen finden Sie in der Dokumentation zu „Mit Apple anmelden“.

    Web

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

    Web

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

  4. Mit Firebase über das OAuth-Anbieterobjekt authentifizieren Sie können Ihre Nutzer auffordern, sich mit ihren Apple-Konten anzumelden. Dazu können Sie entweder ein Pop-up-Fenster öffnen oder zur Anmeldeseite weiterleiten. Die Weiterleitungsmethode wird auf Mobilgeräten bevorzugt.

    • Rufen Sie signInWithPopup() auf, um sich über ein Pop-up-Fenster anzumelden:

      Web

      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;

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

    // ...
  });
      auth_apple_signin_popup.js

      Web

      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;

    // IdP data available using getAdditionalUserInfo(result)
  // ...
  })
  .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;

    // ...
  });
      apple.js

    • Rufen Sie signInWithRedirect() auf, um sich anzumelden, indem Sie auf die Anmeldeseite weitergeleitet werden:

    Halten Sie sich an die Best Practices, wenn Sie signInWithRedirect, linkWithRedirect oder reauthenticateWithRedirect verwenden.

    Web

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

const auth = getAuth();
signInWithRedirect(auth, provider);
    auth_apple_signin_redirect.js

    Web

    firebase.auth().signInWithRedirect(provider);
    apple.js

    Nachdem der Nutzer die Anmeldung abgeschlossen hat und zur Seite zurückkehrt, können Sie das Anmeldeergebnis durch Aufrufen von getRedirectResult() abrufen:

    Web

    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.customData.email;
    // The credential that was used.
    const credential = OAuthProvider.credentialFromError(error);

    // ...
  });
    auth_apple_signin_redirect_result.js

    Web

    // 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;

      // IdP data available in result.additionalUserInfo.profile.
      // ...
    }
    // 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;

    // ...
  });
    apple.js

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

    Anders als andere von Firebase Auth unterstützte Anbieter stellt Apple keine Foto-URL bereit.

    Wenn der Nutzer seine E-Mail-Adresse nicht mit der App teilen möchte, stellt Apple eine eindeutige E-Mail-Adresse für diesen Nutzer bereit (im Format xyz@privaterelay.appleid.com), die mit Ihrer App geteilt wird. Wenn Sie den privaten E-Mail-Relay-Dienst konfiguriert haben, leitet Apple alle an die anonymisierte Adresse gesendeten E-Mails an die reale E-Mail-Adresse des Nutzers weiter.

    Apple gibt Nutzerinformationen wie den Anzeigenamen nur dann an Apps weiter, wenn sich ein Nutzer zum ersten Mal anmeldet. Normalerweise speichert Firebase den Anzeigenamen, wenn sich ein Nutzer zum ersten Mal mit Apple anmeldet. Sie können ihn mit firebase.auth().currentUser.displayName abrufen. Wenn Sie Apple jedoch zuvor verwendet haben, um einen Nutzer ohne Firebase in der App anzumelden, stellt Apple Firebase den Anzeigenamen des Nutzers nicht zur Verfügung.

Reauthentifizierung und Kontoverknüpfung

Dasselbe Muster kann mit reauthenticateWithPopup() und reauthenticateWithRedirect() verwendet werden, um ein neues Anmeldedatenobjekt für vertrauliche Vorgänge abzurufen, die eine aktuelle Anmeldung erfordern:

Web

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.customData.email;
    // The credential that was used.
    const credential = OAuthProvider.credentialFromError(error);

    // ...
  });
auth_apple_reauthenticate_popup.js

Web

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;

    // IdP data available in result.additionalUserInfo.profile.
      // ...
  })
  .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;

    // ...
  });
apple.js

Mit linkWithPopup() und linkWithRedirect() können Sie verschiedene Identitätsanbieter mit vorhandenen Konten verknüpfen.

Hinweis: Apple setzt voraus, dass Sie die ausdrückliche Einwilligung der Nutzer einholen, bevor Sie ihre Apple-Konten mit anderen Daten verknüpfen.

Wenn Sie beispielsweise ein Facebook-Konto mit dem aktuellen Firebase-Konto verknüpfen möchten, verwenden Sie das Zugriffstoken, das Sie beim Anmelden des Nutzers bei Facebook erhalten haben:

Web

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.
    });
auth_apple_link_facebook.js

Web

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.
    });
apple.js

Mit Firebase in einer Chrome-Erweiterung authentifizieren

Wenn Sie eine Chrome-Erweiterungs-App entwickeln, lesen Sie die Anleitung zu Offscreen-Dokumenten.

Sie müssen die benutzerdefinierte Domain weiterhin bei Apple bestätigen, ähnlich wie bei der Standarddomain „firebaseapp.com“:

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

Tokenwiderruf

Apple verlangt, dass Nutzer in Apps, in denen Konten erstellt werden können, das Löschen ihres Kontos innerhalb der App initiieren können. Dies wird in den App Store Review Guidelines beschrieben.

Führen Sie dazu die folgenden Schritte aus:

  1. Achten Sie darauf, dass Sie den Abschnitt Services-ID und OAuth-Codeflusskonfiguration der Anbieterkonfiguration für die Anmeldung mit Apple ausgefüllt haben, wie im Abschnitt Anmeldung mit Apple konfigurieren beschrieben.

  2. Da Firebase keine Nutzer-Tokens speichert, wenn Nutzer mit „Mit Apple anmelden“ erstellt werden, müssen Sie den Nutzer bitten, sich noch einmal anzumelden, bevor Sie sein Token widerrufen und das Konto löschen.

    Rufen Sie dann das Apple-OAuth-Zugriffstoken über OAuthCredential ab und verwenden Sie es, um revokeAccessToken(auth, token) aufzurufen und das Apple-OAuth-Zugriffstoken zu widerrufen.

    const provider = new OAuthProvider('apple.com');
provider.addScope('email');
provider.addScope('name');

const auth = getAuth();
signInWithPopup(auth, provider).then(result => {
  // Get the Apple OAuth access token.
  const credential = OAuthProvider.credentialFromResult(result);
  const accessToken = credential.accessToken;

  // Revoke the Apple OAuth access token.
  revokeAccessToken(auth, accessToken)
    .then(() => {
      // Token revoked.

      // Delete the user account.
      // ...
    })
    .catch(error => {
      // An error happened.
      // ...
    });
});

  3. Löschen Sie das Nutzerkonto und alle zugehörigen Daten.

Erweitert: Mit Firebase in Node.js authentifizieren

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

  1. Melden Sie den Nutzer mit seinem Apple-Konto an und rufen Sie das Apple-ID-Token des Nutzers ab. Dazu gibt es mehrere Möglichkeiten. Wenn Ihre Node.js-App beispielsweise ein Browser-Frontend hat:

    1. Generieren Sie in Ihrem Backend einen zufälligen String (eine „Nonce“) und berechnen Sie den SHA256-Hash. Die Nonce ist ein Einmalwert, den Sie verwenden, um einen einzelnen Roundtrip zwischen Ihrem Backend und den Authentifizierungsservern von Apple zu validieren.

      Web

      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.slice(0, length);
};

const unhashedNonce = generateNonce(10);

// SHA256-hashed nonce in hex
const hashedNonceHex = crypto.createHash('sha256')
  .update(unhashedNonce).digest().toString('hex');
      auth_apple_nonce_node.js

      Web

      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.slice(0, length);
};

const unhashedNonce = generateNonce(10);

// SHA256-hashed nonce in hex
const hashedNonceHex = crypto.createHash('sha256')
  .update(unhashedNonce).digest().toString('hex');
      apple.js

    2. Geben Sie auf Ihrer Anmeldeseite den gehashten Nonce in Ihrer „Mit Apple anmelden“-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. Apple-ID-Token serverseitig aus der per POST gesendeten Authentifizierungsantwort abrufen:

      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).
  }
});

    Weitere Informationen finden Sie unter Webseite für die Anmeldung mit Apple konfigurieren.

  2. Nachdem Sie das Apple-ID-Token des Nutzers erhalten haben, erstellen Sie damit ein Credential-Objekt und melden Sie den Nutzer dann mit den Anmeldedaten an:

    Web

    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);
  });
    auth_apple_signin_nonce.js

    Web

    // 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);
  });
    apple.js

Nächste Schritte

Wenn sich ein Nutzer zum ersten Mal anmeldet, wird ein neues Nutzerkonto erstellt und mit den Anmeldedaten verknüpft, mit denen sich der Nutzer angemeldet hat, also mit dem Nutzernamen und Passwort, der Telefonnummer oder den Informationen des Authentifizierungsanbieters. Dieses neue Konto wird als Teil Ihres Firebase-Projekts gespeichert und kann verwendet werden, um einen Nutzer in allen Apps Ihres Projekts zu identifizieren, unabhängig davon, wie sich der Nutzer anmeldet.

  • In Ihren Apps ist es am besten, den Authentifizierungsstatus des Nutzers zu ermitteln, indem Sie einen Observer für das Auth-Objekt festlegen. Anschließend können Sie die grundlegenden Profilinformationen des Nutzers aus dem User-Objekt abrufen. Weitere Informationen finden Sie unter Nutzer verwalten.

  • In Ihren Firebase Realtime Database- und Cloud Storage-Sicherheitsregeln können Sie die eindeutige Nutzer-ID des angemeldeten Nutzers aus der Variablen auth abrufen und damit steuern, auf welche Daten ein Nutzer zugreifen kann.

Sie können Nutzern erlauben, sich mit mehreren Authentifizierungsanbietern in Ihrer App anzumelden, indem Sie Anmeldedaten des Authentifizierungsanbieters mit einem vorhandenen Nutzerkonto verknüpfen.

Rufen Sie signOut auf, um einen Nutzer abzumelden:

Web

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

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

Web

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