Autentica mediante Apple con JavaScript

Puedes permitir que los usuarios se autentiquen con Firebase mediante su ID de Apple usando el SDK de Firebase para completar el flujo de acceso de OAuth 2.0 de extremo a extremo.

Antes de comenzar

Para que los usuarios accedan con Apple, primero configura la función Iniciar sesión con Apple en el sitio para desarrolladores de Apple y habilita Apple como proveedor de acceso para tu proyecto de Firebase.

Únete al Programa para desarrolladores de Apple

Solo los miembros del Programa para desarrolladores de Apple pueden configurar la función Iniciar Sesión con Apple.

Configura la función de acceso con Apple

En el sitio de desarrolladores de Apple, haz lo siguiente:

  1. Asocia tu sitio web a tu app como se describe en la primera sección de la página sobre cómo configurar el acceso con Apple para la Web. Registra la siguiente URL como una URL de retorno cuando se te solicite que lo hagas:

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

    Puedes obtener el ID de tu proyecto de Firebase en la página de configuración de Firebase console.

    Cuando hayas terminado, toma nota de tu ID de servicio nuevo, ya que lo necesitarás en la siguiente sección.

  2. Crea una clave privada para acceder con Apple. Necesitarás tu ID de clave y tu clave privada nueva en la siguiente sección.

  3. Si usas alguna de las funciones de Firebase Authentication que envía correos electrónicos a los usuarios (como el acceso con vínculo por correo electrónico, la verificación de dirección de correo electrónico o la revocación de cambio de cuenta), configura el servicio privado de retransmisión de correo electrónico de Apple y registra noreply@YOUR_FIREBASE_PROJECT_ID.firebaseapp.com (o tu dominio de plantilla de correo electrónico personalizado) para que Apple pueda transmitir los correos electrónicos que envía Firebase Authentication a direcciones de correo electrónico anonimizadas de Apple.

Habilita Apple como proveedor de acceso

  1. Agrega Firebase a tu proyecto.
  2. En Firebase console, abre la sección Auth. En la pestaña Método de acceso, habilita el proveedor Apple. Especifica el ID de servicio que creaste en la sección anterior. Además, en la sección de configuración de flujo de código OAuth, especifica tu ID de equipo de Apple junto con la clave privada y el ID de clave que creaste en la sección anterior.

Cumple con los requisitos de datos anonimizados de Apple

La función Iniciar sesión con Apple les ofrece a los usuarios la opción de anonimizar sus datos, incluida su dirección de correo electrónico, durante el acceso. Los usuarios que eligen esta opción tienen direcciones de correo electrónico con el dominio privaterelay.appleid.com. Cuando usas Iniciar sesión con Apple en tu app, debes tratar estos IDs de Apple anonimizados según las políticas para desarrolladores o las condiciones de Apple aplicables.

Esto incluye obtener los consentimientos del usuario correspondientes antes de asociar cualquier información personal que lo identifique directamente con un ID de Apple anonimizado. Cuando usas Firebase Authentication, es posible que se incluyan las siguientes acciones:

  • Vincular una dirección de correo electrónico a un ID de Apple anonimizado o viceversa
  • Vincular un número de teléfono a un ID de Apple anonimizado o viceversa
  • Vincular una credencial de redes sociales no anónima (Facebook, Google, etc.) a un ID de Apple anonimizado o viceversa

Esta lista no es exhaustiva. Consulta el Contrato de licencia del Programa para desarrolladores de Apple en la sección Membresía de tu cuenta de desarrollador para asegurarte de que tu app cumpla con los requisitos de Apple.

Maneja el flujo de acceso con el SDK de Firebase

Si estás compilando una app web, la manera más sencilla de autenticar a tus usuarios con Firebase mediante sus cuentas de Apple es controlar todo el flujo de acceso con el SDK de Firebase JavaScript.

Para manejar el flujo de acceso con el SDK de Firebase JavaScript, sigue estos pasos:

  1. Crea una instancia de un OAuthProvider mediante el ID de proveedor apple.com correspondiente.

    API modular web

    import { OAuthProvider } from "firebase/auth";

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

    API con espacio de nombres web

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

  2. Opcional: Especifica permisos de OAuth 2.0 adicionales aparte del valor predeterminado que deseas solicitar al proveedor de autenticación.

    API modular web

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

    API con espacio de nombres web

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

    De manera predeterminada, cuando habilitas Una cuenta por dirección de correo electrónico, Firebase solicita los permisos de nombre y correo electrónico. Si cambias esta configuración a Varias cuentas por dirección de correo electrónico, Firebase no solicita ningún permiso de Apple, a menos que lo especifiques.

  3. Opcional: Si deseas mostrar la pantalla de acceso de Apple en un idioma que no sea inglés, establece el parámetro locale. Consulta la documentación sobre el acceso con Apple para conocer las configuraciones regionales que se admiten.

    API modular web

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

    API con espacio de nombres web

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

  4. Autentica con Firebase usando el objeto del proveedor de OAuth. Puedes pedirles a los usuarios que accedan con sus cuentas de Apple a través de una ventana emergente o mediante el redireccionamiento a la página de acceso. En dispositivos móviles, se prefiere el método de redireccionamiento.

    • Para acceder con una ventana emergente, llama a signInWithPopup():

      API modular 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

      API con espacio de nombres 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

    • Para acceder mediante el redireccionamiento a la página de acceso, llama a signInWithRedirect() como se indica a continuación:

    Sigue las prácticas recomendadas cuando uses signInWithRedirect, linkWithRedirect o reauthenticateWithRedirect.

    API modular web

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

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

    API con espacio de nombres web

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

    Después de que el usuario termine de acceder y vuelva a la página, puedes llamar a getRedirectResult() para obtener el resultado:

    API modular 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

    API con espacio de nombres 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

    Aquí también puedes detectar y resolver errores. Para ver una lista de los códigos de error, consulta la referencia de la API.

    A diferencia de otros proveedores compatibles con Firebase Auth, Apple no proporciona una URL de foto.

    Además, cuando el usuario elige no compartir su correo electrónico con la app, Apple aprovisiona una dirección de correo electrónico única para ese usuario (con formato xyz@privaterelay.appleid.com), que comparte con tu app. Si configuraste el servicio privado de retransmisión de correo electrónico, Apple reenvía a la dirección de correo real del usuario los correos electrónicos enviados a la dirección anonimizada.

    Apple solo comparte información del usuario como el nombre visible con las apps a las que el usuario accede por primera vez. Por lo general, Firebase almacena el nombre visible la primera vez que un usuario accede con Apple, y puedes obtenerlo con firebase.auth().currentUser.displayName. Sin embargo, si usaste anteriormente Apple para que un usuario acceda a la app sin usar Firebase, Apple no le proporcionará a Firebase el nombre visible del usuario.

Reautenticación y vinculación de cuentas

Se puede usar el mismo patrón con reauthenticateWithPopup() y reauthenticateWithRedirect(), que puedes emplear a fin de recuperar una credencial nueva para operaciones confidenciales que requieren un acceso reciente:

API modular 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

API con espacio de nombres 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

Además, puedes usar linkWithPopup() y linkWithRedirect() para vincular diferentes proveedores de identidad a cuentas existentes.

Ten en cuenta que Apple requiere que obtengas el consentimiento explícito de los usuarios antes de vincular sus cuentas de Apple a otros datos.

Por ejemplo, para vincular una cuenta de Facebook a la cuenta actual de Firebase, usa el token de acceso que obtuviste cuando hiciste que el usuario accediera a Facebook:

API modular 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

API con espacio de nombres 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

Autentica con Firebase en una extensión de Chrome

Si desarrollas una app de extensión de Chrome, debes agregar el ID de la extensión de Chrome:

  1. Abre tu proyecto en Firebase console.
  2. En la sección Authentication, abre la página Sign-in method.
  3. Agrega un URI como el siguiente a la lista de dominios autorizados: 
    chrome-extension://CHROME_EXTENSION_ID

Solo las operaciones con ventanas emergentes (signInWithPopup, linkWithPopup y reauthenticateWithPopup) están disponibles para las extensiones de Chrome, ya que estas no pueden usar redireccionamientos HTTP. Deberías llamar a estos métodos desde una página de secuencia de comandos en segundo plano en lugar de una ventana emergente de acción en el navegador, ya que la ventana emergente de autenticación cancela la de acción del navegador. Los métodos de ventana emergente solo se pueden usar en extensiones con Manifest V2. El Manifest V3 más reciente solo permite secuencias de comandos en segundo plano en forma de service workers, que no pueden realizar operaciones de ventana emergente.

En el archivo de manifiesto de tu extensión de Chrome, asegúrate de agregar la URL https://apis.google.com a la lista de entidades permitidas content_security_policy.

Ten en cuenta que de todas formas debes verificar el dominio personalizado con Apple de manera similar al dominio predeterminado de firebaseapp.com:

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

Avanzado: Autenticación con Firebase en Node.js

Para autenticar con Firebase en una aplicación de Node.js, haz lo siguiente:

  1. Haz que el usuario acceda con su cuenta de Apple y obtén su token de ID de Apple. Hay varias maneras de hacer esto. Por ejemplo, si tu app de Node.js tiene un frontend de navegador, haz lo siguiente:

    1. En tu backend, genera una string aleatoria (una "nonce") y procesa su hash SHA256. La nonce es un valor de un solo uso que utilizas para validar un único recorrido de ida y vuelta entre tu backend y los servidores de autenticación de Apple.

      API modular 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

      API con espacio de nombres 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. En tu página de acceso, especifica la nonce con hash en la configuración del Inicio de sesión con Apple:

      <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. Obtén el token del ID de Apple de la respuesta de autenticación POSTed en el servidor:

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

    Consulta también cómo configurar tu página web para el acceso con Apple.

  2. Después de obtener el token del ID de Apple del usuario, úsalo para crear un objeto de credencial y haz que el usuario acceda con él:

    API modular 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

    API con espacio de nombres 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

Próximos pasos

Cuando un usuario accede por primera vez, se crea una cuenta de usuario nueva y se la vincula con las credenciales (el nombre de usuario y la contraseña, el número de teléfono o la información del proveedor de autenticación) que el usuario utilizó para acceder. Esta cuenta nueva se almacena como parte de tu proyecto de Firebase y se puede usar para identificar a un usuario en todas las apps del proyecto, sin importar cómo acceda.

  • En tus apps, para conocer el estado de autenticación del usuario, te recomendamos configurar un observador en el objeto Auth. Luego podrás obtener la información de perfil básica del usuario a partir del objeto User. Consulta Administra usuarios en Firebase.

  • En tus reglas de seguridad de Firebase Realtime Database y Cloud Storage, a partir de la variable auth, puedes obtener el ID del usuario único que accedió y usarlo para controlar a qué datos podrá acceder.

Para permitir que los usuarios accedan a la app con varios proveedores de autenticación, puedes vincular las credenciales de estos proveedores con una cuenta de usuario existente.

Para hacer que un usuario salga de la sesión, llama a signOut de la siguiente manera:

API modular 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

API con espacio de nombres web

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