Inicio de sesión de usuarios con Apple

En este documento se explica cómo usar Identity Platform para añadir la opción Iniciar sesión con Apple a tu aplicación web.

Antes de empezar

Configurar tu aplicación con Apple

En el sitio para desarrolladores de Apple:

  1. Sigue los pasos que se indican en el artículo Configurar la función Iniciar sesión con Apple para la Web. Entre los datos que recoge se incluyen los siguientes:

    1. Registrar una URL de retorno, que tiene este aspecto:

      https://project-id.firebaseapp.com/__/auth/handler

    2. Alojamiento temporal de un archivo en la siguiente URL para verificar tu dominio:

      https://project-id.firebaseapp.com/.well-known/apple-developer-domain-association.txt

    Además, anota tu ID de servicios y tu ID de equipo de Apple, ya que los necesitarás en la siguiente sección.

  2. Usa una clave privada de Apple para crear un inicio de sesión. Necesitarás la clave y su ID en la siguiente sección.

  3. Si usas Identity Platform para enviar correos a tus usuarios, configura tu proyecto con el servicio de retransmisión de correo privado de Apple con la siguiente dirección de correo:

    noreply@project-id.firebaseapp.com

    También puedes usar una plantilla de correo personalizada, si tu aplicación tiene una.

Cumplir los requisitos de Apple sobre datos anonimizados

Apple ofrece a los usuarios la opción de anonimizar sus datos, incluida su dirección de correo electrónico. Apple asigna a los usuarios que seleccionan esta opción una dirección de correo ofuscada con el dominio privaterelay.appleid.com.

Tu aplicación debe cumplir las políticas o los términos para desarrolladores aplicables de Apple en relación con los IDs de Apple anonimizados. Esto incluye obtener el consentimiento del usuario antes de asociar cualquier información personal identificable (IPI) con un ID de Apple anonimizado. Entre las acciones que implican IPI, se incluyen las siguientes:

  • Vincular una dirección de correo 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 social no anónima, como Facebook o Google, a un ID de Apple anonimizado, o viceversa.

Para obtener más información, consulta el Acuerdo de Licencia del Programa para Desarrolladores de Apple de tu cuenta de desarrollador de Apple.

Configurar Apple como proveedor

Para configurar Apple como proveedor de identidades, sigue estos pasos:

  1. Ve a la página Proveedores de identidades de la consola de Google Cloud .

    Ir a la página Proveedores de identidades

  2. Haz clic en Add A Provider (Añadir proveedor).

  3. Selecciona Apple en la lista.

  4. En Plataforma, selecciona Web.

  5. Introduce tu ID de servicios, ID de equipo de Apple, ID de clave y clave privada.

  6. Para registrar los dominios de tu aplicación, haz clic en Añadir dominio en Dominios autorizados. Para las actividades de desarrollo, localhost ya está habilitado de forma predeterminada.

  7. En Configura tu aplicación, haz clic en Detalles de la configuración. Copia el fragmento en el código de tu aplicación para inicializar el SDK de cliente de Identity Platform.

  8. Haz clic en Guardar.

Inicio de sesión de usuarios con el SDK de cliente

Para iniciar la sesión de un usuario, sigue estos pasos:

  1. Crea una instancia del objeto proveedor OAuthProvider con el ID apple.com:

    Versión web 9

    import { OAuthProvider } from "firebase/auth";

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

    Versión web 8

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

  2. Opcional: Añade permisos de OAuth. Los permisos especifican los datos que solicitas a Apple. Es posible que los datos más sensibles requieran ámbitos específicos. De forma predeterminada, cuando la opción Una cuenta por dirección de correo electrónico está habilitada, Identity Platform solicita los ámbitos email y name.

    Versión web 9

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

    Versión web 8

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

  3. Opcional: Localiza el flujo de autenticación. Puedes especificar un idioma o usar el idioma predeterminado del dispositivo. Consulta los documentos de Inicio de sesión con Apple para ver las configuraciones regionales admitidas.

    Versión web 9

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

    Versión web 8

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

  4. Usa el objeto de proveedor para iniciar la sesión del usuario. Puedes abrir una ventana emergente o redirigir la página actual. La redirección es más sencilla para los usuarios de dispositivos móviles.

    Para mostrar una ventana emergente, llama a signInWithPopup():

    Versión web 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;

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

    Versión web 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;

    // 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 redirigir la página, primero llama a signInWithRedirect():

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

    Versión web 9

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

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

    Versión web 8

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

    A continuación, llama a getRedirectResult() para recuperar el token de Apple cuando se cargue tu página:

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

    // ...
  });
    auth_apple_signin_redirect_result.js

    Versión web 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;

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

    También puedes detectar y gestionar errores. Para ver una lista de códigos de error, consulta la referencia de la API.

A diferencia de muchos otros proveedores de identidad, Apple no proporciona una URL de foto.

Si un usuario decide no compartir su correo real con tu aplicación, Apple le proporcionará una dirección de correo única para que la comparta. Este correo tiene el siguiente formato: xyz@privaterelay.appleid.com. Si has configurado el servicio de retransmisión de correo privado, Apple reenvía los correos enviados a la dirección anonimizada a la dirección de correo real del usuario.

Apple solo comparte información de los usuarios, como los nombres visibles, con las aplicaciones la primera vez que inician sesión. En la mayoría de los casos, Identity Platform almacena estos datos, lo que le permite obtenerlos mediante firebase.auth().currentUser.displayName en sesiones futuras. Sin embargo, si permitiste que los usuarios iniciaran sesión en tu aplicación con Apple antes de integrar Identity Platform, la información de los usuarios no estará disponible.

Siguientes pasos