Permitir que los usuarios accedan con Apple

En este documento, se muestra cómo usar Identity Platform a fin de agregar Acceder con Apple a tu aplicación web.

Antes de comenzar

Crea una aplicación web básica que use Identity Platform con HTML y JavaScript. Consulta la Guía de inicio rápido para aprender a hacerlo.
Únete al Programa para desarrolladores de Apple

Configura tu app con Apple

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

Sigue los pasos de la página Configura el acceso con Apple para la Web. Incluye lo siguiente:
1. Registra una URL de retorno, que se ve de la siguiente manera:
```
https://project-id.firebaseapp.com/__/auth/handler
```
2. Aloja un archivo temporal en la siguiente URL para verificar su dominio:
```
https://project-id.firebaseapp.com/.well-known/apple-developer-domain-association.txt
```
Además, toma nota del ID de servicios y el ID de equipo de Apple. Los necesitarás en la siguiente sección.
Usa una clave privada de Apple para crear un acceso. Necesitarás la clave y su ID en la siguiente sección.
Si usas Identity Platform para enviar correos electrónicos a tus usuarios, configura tu proyecto con el servicio privado de retransmisión de correo electrónico de Apple mediante el siguiente correo electrónico:
```
noreply@project-id.firebaseapp.com
```
También puedes usar una plantilla de correo electrónico personalizada, si tu app tiene una.

Cumple con los requisitos de datos anonimizados de Apple

Apple brinda 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 electrónico ofuscada con el dominio privaterelay.appleid.com.

Tu app debe cumplir con las condiciones o las políticas para desarrolladores aplicables de Apple con respecto a los ID de Apple anónimos. Esto incluye obtener el consentimiento del usuario antes de asociar cualquier información de identificación personal (PII) con un ID de Apple anonimizado. Entre las acciones que implican PII, se incluyen las siguientes:

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 social no anónima, como Facebook o Google, a ID de Apple anonimizado, o viceversa.

Para obtener más información, consulta el Contrato de licencia del Programa para desarrolladores de Apple de tu cuenta de desarrollador de Apple.

Configura Apple como proveedor

Para configurar Apple como proveedor de identidad, haz lo siguiente:

Ve a la página Proveedores de identidad en la consola de Google Cloud.

Ir a la página Proveedores de identidad
Haz clic en Agregar un proveedor.
Selecciona Apple en la lista.
En Plataforma, selecciona Web.
Ingresa tu ID de servicios, el ID de equipo de Apple, el ID de clave y la clave privada.
Para registrar los dominios de tu app, haz clic en Agregar dominio en Dominios autorizados. Para fines de desarrollo, localhost ya está habilitado de forma predeterminada.
En Configura tu aplicación, haz clic en Detalles de la configuración. Copia el fragmento en el código de tu app para inicializar el SDK de cliente de Identity Platform.
Haz clic en Guardar.

Acceso de los usuarios con el SDK de cliente

Para que un usuario acceda, haz lo siguiente:

Crea una instancia del objeto del proveedor OAuthProvider con el ID apple.com:
Web versión 9

Obtén más información sobre la API modular web que admite la eliminación de código no utilizado y realiza la actualización desde la API con espacio de nombres.
```
import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('apple.com');auth_apple_provider_create.js
```
Web versión 8
```
var provider = new firebase.auth.OAuthProvider('apple.com');apple.js
```
Opcional: Agrega permisos de OAuth. Los permisos especifican los datos que solicitas de Apple. Los datos más sensibles pueden requerir permisos específicos. De forma predeterminada, cuando Una cuenta por dirección de correo electrónico está habilitada, Identity Platform solicita los permisos email y name.
Web versión 9

Obtén más información sobre la API modular web que admite la eliminación de código no utilizado y realiza la actualización desde la API con espacio de nombres.
```
provider.addScope('email');
provider.addScope('name');auth_apple_provider_scopes.js
```
Web versión 8
```
provider.addScope('email');
provider.addScope('name');apple.js
```
Opcional: Localiza el flujo de autenticación. Puedes especificar un idioma o usar el idioma predeterminado del dispositivo. Consulta la documentación sobre el acceso con Apple para conocer los parámetros de configuración regional que se admiten.
Web versión 9

Obtén más información sobre la API modular web que admite la eliminación de código no utilizado y realiza la actualización desde la API con espacio de nombres.
```
provider.setCustomParameters({
  // Localize the Apple authentication screen in French.
  locale: 'fr'
});auth_apple_provider_params.js
```
Web versión 8
```
provider.setCustomParameters({
  // Localize the Apple authentication screen in French.
  locale: 'fr'
});apple.js
```

Usa el objeto del proveedor para permitir que el usuario acceda. Puedes abrir una ventana emergente o redireccionar la página actual. El redireccionamiento es más sencillo para los usuarios de dispositivos móviles.

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

Web versión 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

Web versión 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 redireccionar la página, primero llama a signInWithRedirect():

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

Web versión 9

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

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

Web versión 8

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

Luego, llama a getRedirectResult() para recuperar el token de Apple cuando se cargue la página:

Web versión 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

Web versión 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

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 muchos otros proveedores de identidad, Apple no proporciona una URL de foto.

Si un usuario elige no compartir su correo electrónico real con tu app, Apple aprovisiona una dirección de correo electrónico única para que ese usuario comparta en su lugar. Este correo electrónico tiene el formato xyz@privaterelay.appleid.com. 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 de usuarios, como nombres visibles, con apps la primera vez que el usuario accede. En la mayoría de los casos, Identity Platform almacena estos datos, lo que te permite recuperarlos mediante firebase.auth().currentUser.displayName durante las sesiones futuras. Sin embargo, si permitiste que los usuarios accedan a tu app con Apple antes de su integración con Identity Platform, esta información no estará disponible.

¿Qué sigue?

Obtén más información para vincular cuentas de Apple a otros proveedores. 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.
Obtén más información sobre los usuarios de Identity Platform.
Permite que los usuarios accedan con otros proveedores de identidad.