Como fazer login dos usuários com a Apple

Neste documento, você verá como usar o Identity Platform para adicionar o Login com Apple ao app da Web.

Antes de começar

Como configurar seu aplicativo com a Apple

No site do desenvolvedor da Apple:

  1. Siga as etapas em Configurar o login com a Apple para a Web. Isso inclui:

    1. Registre um URL de retorno como este:

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

    2. Hospede temporariamente um arquivo no seguinte URL para verificar seu domínio:

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

    Além disso, anote o ID dos serviços e o ID da equipe da Apple. Eles serão necessários na próxima seção.

  2. Use uma chave privada da Apple para criar um login. Você precisará do key e do ID na próxima seção.

  3. Se você usa o Identity Platform para enviar e-mails aos seus usuários, configure seu projeto com o serviço de redirecionamento de e-mail particular da Apple usando o seguinte e-mail:

    noreply@project-id.firebaseapp.com

    Você também pode usar um modelo de e-mail personalizado, se o app tiver um.

Conformidade com os requisitos de dados anônimos da Apple

A Apple oferece aos usuários a opção de tornar anônimos os dados, inclusive o endereço de e-mail. A Apple atribui aos usuários que selecionam essa opção um endereço de e-mail ofuscado com o domínio privaterelay.appleid.com.

Seu app precisa obedecer a quaisquer políticas ou termos de desenvolvedor aplicáveis da Apple referentes aos IDs da Apple anônimos. Isso inclui solicitar o consentimento do usuário antes de associar informações de identificação pessoal (PII, na sigla em inglês) a um ID Apple anônimo. As ações que envolvem PII incluem, entre outras:

  • Vincular um endereço de e-mail a um ID Apple anônimo ou vice-versa.
  • Vincular um número de telefone a um ID Apple anônimo ou vice-versa
  • Vincular uma credencial social não anônima, como Facebook ou Google, ao ID anônimo da Apple ou vice-versa.

Para mais informações, consulte o Contrato de Licença do Programa para desenvolvedores da Apple da sua conta de desenvolvedor da Apple.

Como configurar a Apple como um provedor

Para configurar a Apple como um provedor de identidade:

  1. Acesse a página Provedores de identidade no console do Google Cloud.

    Acessar a página "Provedores de identidade"

  2. Clique em Adicionar um provedor.

  3. Selecione Apple na lista.

  4. Em Plataforma, selecione Web.

  5. Insira o ID dos Serviços, o ID da equipe da Apple, o ID da chave e a Chave privada.

  6. Registre os domínios do seu aplicativo clicando em Adicionar domínio em Domínios autorizados. Para fins de desenvolvimento, localhost já está ativado por padrão.

  7. Em Configurar seu aplicativo, clique em Detalhes de configuração. Copie o snippet no código do aplicativo para inicializar o SDK do cliente do Identity Platform.

  8. Clique em Salvar.

Como conectar usuários com o SDK do cliente

Para fazer login de um usuário:

  1. Crie uma instância do objeto de provedor OAuthProvider usando o ID apple.com:

    Versão 9 para a Web

    import { OAuthProvider } from "firebase/auth";

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

    Versão 8 para a Web

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

  2. Opcional: adicione escopos do OAuth. Os escopos especificam quais dados você está solicitando da Apple. Dados mais confidenciais podem exigir escopos específicos. Por padrão, quando Uma conta por endereço de e-mail é ativada, o Identity Platform solicita os escopos email e name.

    Versão 9 para a Web

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

    Versão 8 para a Web

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

  3. Opcional: localize o fluxo de autenticação. Você pode especificar um idioma ou usar o padrão do dispositivo. Consulte os documentos do recurso Fazer login com a Apple para saber quais são as localidades aceitas.

    Versão 9 para a Web

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

    Versão 8 para a Web

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

  4. Use o objeto do provedor para fazer login do usuário. Você pode abrir uma janela pop-up ou redirecionar a página atual. O redirecionamento é mais fácil para usuários de dispositivos móveis.

    Para mostrar um pop-up, chame signInWithPopup():

    Versão 9 para a 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

    Versão 8 para a 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 redirecionar a página, primeiro chame signInWithRedirect():

    Siga as práticas recomendadas ao usar signInWithRedirect, linkWithRedirect ou reauthenticateWithRedirect.

    Versão 9 para a Web

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

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

    Versão 8 para a Web

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

    Em seguida, chame getRedirectResult() para recuperar o token da Apple quando sua página for carregada:

    Versão 9 para a 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

    Versão 8 para a 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

    Também é aqui que você identifica e corrige erros. Para conferir uma lista de códigos de erro, consulte a Referência da API.

Diferentemente de muitos outros provedores de identidade, a Apple não fornece um URL de foto.

Se um usuário optar por não compartilhar seus e-mails reais com seu app, a Apple provisionará um endereço de e-mail exclusivo para ele. Este e-mail assume a forma xyz@privaterelay.appleid.com. Se você tiver configurado o serviço de retransmissão de e-mail privado, a Apple encaminhará os e-mails enviados para o endereço anônimo para o endereço de e-mail real do usuário.

A Apple só compartilha informações do usuário com os apps, como nomes de exibição, na primeira vez que um usuário faz login. Na maioria dos casos, o Identity Platform armazena esses dados, o que permite buscá-los usando firebase.auth().currentUser.displayName durante sessões futuras. No entanto, se você permitiu que os usuários fizessem login no seu aplicativo usando a Apple antes da integração com o Identity Platform, as informações do usuário não estavam disponíveis.

A seguir