Autenticar usando Apple com JavaScript

Você pode permitir que seus usuários se autentiquem com o Firebase usando o ID Apple usando o SDK do Firebase para realizar o fluxo de login do OAuth 2.0 de ponta a ponta.

Antes de você começar

Para fazer login de usuários que usam a Apple, primeiro configure Sign In with Apple no site do desenvolvedor da Apple e, em seguida, ative a Apple como provedor de login para seu projeto do Firebase.

Participe do Programa de Desenvolvedores Apple

O Sign In with Apple só pode ser configurado por membros do Apple Developer Program .

Configurar login com Apple

No site do desenvolvedor Apple , faça o seguinte:

  1. Associe seu site ao seu aplicativo conforme descrito na primeira seção de Configurar login com a Apple para a web . Quando solicitado, registre o seguinte URL como URL de retorno:

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

    Você pode obter o ID do projeto do Firebase na página de configurações do console do Firebase .

    Quando terminar, anote seu novo ID de serviço, que você precisará na próxima seção.

  2. Crie uma chave privada de login com Apple . Você precisará de sua nova chave privada e ID de chave na próxima seção.

  3. Se você usar algum dos recursos do Firebase Authentication que enviam e-mails aos usuários, incluindo login com link de e-mail, verificação de endereço de e-mail, revogação de alteração de conta e outros, configure o serviço de retransmissão de e-mail privado da Apple e registre-se noreply@ YOUR_FIREBASE_PROJECT_ID .firebaseapp.com (ou seu domínio de modelo de e-mail personalizado) para que a Apple possa retransmitir e-mails enviados pelo Firebase Authentication para endereços de e-mail anônimos da Apple.

Habilite a Apple como provedor de login

  1. Adicione o Firebase ao seu projeto .
  2. No console do Firebase , abra a seção Auth . Na guia Método de login , habilite o provedor Apple . Especifique o ID do serviço que você criou na seção anterior. Além disso, na seção de configuração do fluxo de código OAuth , especifique seu Apple Team ID e a chave privada e o ID de chave que você criou na seção anterior.

Cumpra os requisitos de dados anonimizados da Apple

Sign In with Apple oferece aos usuários a opção de anonimizar seus dados, incluindo seu endereço de e-mail, ao fazer login. Os usuários que escolhem esta opção possuem endereços de e-mail com o domínio privaterelay.appleid.com . Ao usar o Sign In with Apple em seu aplicativo, você deve cumprir quaisquer políticas ou termos de desenvolvedor aplicáveis ​​da Apple em relação a esses IDs Apple anônimos.

Isso inclui obter qualquer consentimento necessário do usuário antes de associar qualquer informação pessoal de identificação direta a um ID Apple anônimo. Ao usar o Firebase Authentication, isso pode incluir as seguintes ações:

  • Vincule um endereço de e-mail a um ID Apple anônimo ou vice-versa.
  • Vincule um número de telefone a um ID Apple anônimo ou vice-versa
  • Vincule uma credencial social não anônima (Facebook, Google, etc.) a um ID Apple anônimo ou vice-versa.

A lista acima não é exaustiva. Consulte o Contrato de licença do Apple Developer Program na seção Assinatura da sua conta de desenvolvedor para garantir que seu aplicativo atenda aos requisitos da Apple.

Lidar com o fluxo de login com o SDK do Firebase

Se você estiver criando um aplicativo da Web, a maneira mais fácil de autenticar seus usuários no Firebase usando suas contas Apple é lidar com todo o fluxo de login com o SDK JavaScript do Firebase.

Para lidar com o fluxo de login com o SDK JavaScript do Firebase, siga estas etapas:

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

    Web modular API

    import { OAuthProvider } from "firebase/auth";

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

    Web namespaced API

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

  2. Opcional: Especifique escopos adicionais do OAuth 2.0 além do padrão que você deseja solicitar do provedor de autenticação.

    Web modular API

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

    Web namespaced API

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

    Por padrão, quando Uma conta por endereço de e-mail está ativada, o Firebase solicita escopos de e-mail e nome. Se você alterar essa configuração para Várias contas por endereço de e-mail , o Firebase não solicitará escopos da Apple, a menos que você os especifique.

  3. Opcional: se desejar exibir a tela de login da Apple em um idioma diferente do inglês, defina o parâmetro locale . Consulte os documentos Sign In with Apple para obter as localidades suportadas.

    Web modular API

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

    Web namespaced API

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

  4. Autentique-se com o Firebase usando o objeto do provedor OAuth. Você pode solicitar que seus usuários façam login com suas contas Apple abrindo uma janela pop-up ou redirecionando para a página de login. O método de redirecionamento é preferido em dispositivos móveis.

    • Para fazer login com uma janela pop-up, chame signInWithPopup() :

      Web modular API

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

      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 fazer login redirecionando para a página de login, chame signInWithRedirect() :

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

    Web modular API

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

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

    Web namespaced API

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

    Depois que o usuário concluir o login e retornar à página, você poderá obter o resultado do login chamando getRedirectResult() :

    Web modular API

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

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

    É aqui também que você pode detectar e tratar erros. Para obter uma lista de códigos de erro, consulte a referência da API .

    Ao contrário de outros provedores suportados pelo Firebase Auth, a Apple não fornece um URL de foto.

    Além disso, quando o usuário opta por não compartilhar seu e-mail com o aplicativo, a Apple fornece um endereço de e-mail exclusivo para esse usuário (no formato xyz@privaterelay.appleid.com ), que ele compartilha com seu aplicativo. Se você configurou o serviço de retransmissão de e-mail privado, a Apple encaminha 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, como o nome de exibição, com os aplicativos na primeira vez que um usuário faz login. Normalmente, o Firebase armazena o nome de exibição na primeira vez que um usuário faz login na Apple, que você pode obter com firebase.auth().currentUser.displayName . No entanto, se você usou anteriormente a Apple para fazer login de um usuário no aplicativo sem usar o Firebase, a Apple não fornecerá ao Firebase o nome de exibição do usuário.

Reautenticação e vinculação de conta

O mesmo padrão pode ser usado com reauthenticateWithPopup() e reauthenticateWithRedirect() , que você pode usar para recuperar uma nova credencial para operações confidenciais que exigem login recente:

Web modular API

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

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

E você pode usar linkWithPopup() e linkWithRedirect() , para vincular diferentes provedores de identidade a contas existentes.

Observe que a Apple exige que você obtenha o consentimento explícito dos usuários antes de vincular suas contas Apple a outros dados.

Por exemplo, para vincular uma conta do Facebook à conta atual do Firebase, use o token de acesso obtido ao fazer login do usuário no Facebook:

Web modular API

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

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

Autenticar com Firebase em uma extensão do Chrome

Se você estiver criando um aplicativo de extensão do Chrome, consulte o guia Documentos fora da tela .

Observe que você ainda deve verificar o domínio personalizado com a Apple de forma semelhante ao domínio firebaseapp.com padrão:

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

Revogação de token

A Apple exige que os aplicativos que oferecem suporte à criação de contas permitam que os usuários iniciem a exclusão de suas contas no aplicativo, conforme descrito nas Diretrizes de revisão da App Store

Para atender a esse requisito, implemente as seguintes etapas:

  1. Certifique-se de preencher a seção de configuração de ID de serviços e fluxo de código OAuth da configuração do provedor Sign in with Apple, conforme descrito na seção Configurar Sign in with Apple .

  2. Como o Firebase não armazena tokens de usuário quando os usuários são criados com Sign in with Apple, você deve pedir ao usuário que faça login novamente antes de revogar o token e excluir a conta.

    Em seguida, obtenha o token de acesso Apple OAuth de OAuthCredential e use-o para chamar revokeAccessToken(auth, token) para revogar o token de acesso Apple OAuth.

    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. Por fim, exclua a conta do usuário (e todos os dados associados).

Avançado: autenticar com Firebase em Node.js

Para autenticar com o Firebase em um aplicativo Node.js:

  1. Faça login do usuário com sua conta Apple e obtenha o token Apple ID do usuário. Você pode fazer isso de várias maneiras. Por exemplo, se seu aplicativo Node.js tiver um front-end de navegador:

    1. No seu back-end, gere uma string aleatória (um "nonce") e calcule seu hash SHA256. O nonce é um valor de uso único que você usa para validar uma única viagem de ida e volta entre seu back-end e os servidores de autenticação da Apple.

      Web modular API

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

      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. Na página de login, especifique o nonce com hash na configuração do Sign In with 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. Obtenha o token Apple ID do servidor de resposta de autenticação POST:

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

    Consulte também Configurando sua página da Web para fazer login com a Apple .

  2. Depois de obter o token Apple ID do usuário, use-o para criar um objeto Credential e, em seguida, faça login do usuário com a credencial:

    Web modular API

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

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

Depois que um usuário faz login pela primeira vez, uma nova conta de usuário é criada e vinculada às credenciais (ou seja, nome de usuário e senha, número de telefone ou informações do provedor de autenticação) com as quais o usuário fez login. Essa nova conta é armazenada como parte do seu projeto do Firebase e pode ser usada para identificar um usuário em todos os aplicativos do seu projeto, independentemente de como o usuário faz login.

  • Em seus aplicativos, a maneira recomendada de saber o status de autenticação do seu usuário é definir um observador no objeto Auth . Você pode então obter as informações básicas do perfil do usuário no objeto User . Consulte Gerenciar usuários .

  • Nas regras de segurança do Firebase Realtime Database e do Cloud Storage , você pode obter o ID de usuário exclusivo do usuário conectado na variável auth e usá-lo para controlar quais dados um usuário pode acessar.

Você pode permitir que os usuários façam login no seu aplicativo usando vários provedores de autenticação vinculando as credenciais do provedor de autenticação a uma conta de usuário existente.

Para desconectar um usuário, chame signOut :

Web modular API

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

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

Você pode permitir que seus usuários se autentiquem com o Firebase usando o ID Apple usando o SDK do Firebase para realizar o fluxo de login do OAuth 2.0 de ponta a ponta.

Antes de você começar

Para fazer login de usuários que usam a Apple, primeiro configure Sign In with Apple no site do desenvolvedor da Apple e, em seguida, ative a Apple como provedor de login para seu projeto do Firebase.

Participe do Programa de Desenvolvedores Apple

O Sign In with Apple só pode ser configurado por membros do Apple Developer Program .

Configurar login com Apple

No site do desenvolvedor Apple , faça o seguinte:

  1. Associe seu site ao seu aplicativo conforme descrito na primeira seção de Configurar login com a Apple para a web . Quando solicitado, registre o seguinte URL como URL de retorno:

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

    Você pode obter o ID do projeto do Firebase na página de configurações do console do Firebase .

    Quando terminar, anote seu novo ID de serviço, que você precisará na próxima seção.

  2. Crie uma chave privada de login com Apple . Você precisará de sua nova chave privada e ID de chave na próxima seção.

  3. Se você usar algum dos recursos do Firebase Authentication que enviam e-mails aos usuários, incluindo login com link de e-mail, verificação de endereço de e-mail, revogação de alteração de conta e outros, configure o serviço de retransmissão de e-mail privado da Apple e registre-se noreply@ YOUR_FIREBASE_PROJECT_ID .firebaseapp.com (ou seu domínio de modelo de e-mail personalizado) para que a Apple possa retransmitir e-mails enviados pelo Firebase Authentication para endereços de e-mail anônimos da Apple.

Habilite a Apple como provedor de login

  1. Adicione o Firebase ao seu projeto .
  2. No console do Firebase , abra a seção Auth . Na guia Método de login , habilite o provedor Apple . Especifique o ID do serviço que você criou na seção anterior. Além disso, na seção de configuração do fluxo de código OAuth , especifique seu Apple Team ID e a chave privada e o ID de chave que você criou na seção anterior.

Cumpra os requisitos de dados anonimizados da Apple

Sign In with Apple oferece aos usuários a opção de anonimizar seus dados, incluindo seu endereço de e-mail, ao fazer login. Os usuários que escolhem esta opção possuem endereços de e-mail com o domínio privaterelay.appleid.com . Ao usar o Sign In with Apple em seu aplicativo, você deve cumprir quaisquer políticas ou termos de desenvolvedor aplicáveis ​​da Apple em relação a esses IDs Apple anônimos.

Isso inclui obter qualquer consentimento necessário do usuário antes de associar qualquer informação pessoal de identificação direta a um ID Apple anônimo. Ao usar o Firebase Authentication, isso pode incluir as seguintes ações:

  • Vincule um endereço de e-mail a um ID Apple anônimo ou vice-versa.
  • Vincule um número de telefone a um ID Apple anônimo ou vice-versa
  • Vincule uma credencial social não anônima (Facebook, Google, etc.) a um ID Apple anônimo ou vice-versa.

A lista acima não é exaustiva. Consulte o Contrato de licença do Apple Developer Program na seção Assinatura da sua conta de desenvolvedor para garantir que seu aplicativo atenda aos requisitos da Apple.

Lidar com o fluxo de login com o SDK do Firebase

Se você estiver criando um aplicativo da Web, a maneira mais fácil de autenticar seus usuários no Firebase usando suas contas Apple é lidar com todo o fluxo de login com o SDK JavaScript do Firebase.

Para lidar com o fluxo de login com o SDK JavaScript do Firebase, siga estas etapas:

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

    Web modular API

    import { OAuthProvider } from "firebase/auth";

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

    Web namespaced API

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

  2. Opcional: Especifique escopos adicionais do OAuth 2.0 além do padrão que você deseja solicitar do provedor de autenticação.

    Web modular API

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

    Web namespaced API

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

    Por padrão, quando Uma conta por endereço de e-mail está ativada, o Firebase solicita escopos de e-mail e nome. Se você alterar essa configuração para Várias contas por endereço de e-mail , o Firebase não solicitará escopos da Apple, a menos que você os especifique.

  3. Opcional: se desejar exibir a tela de login da Apple em um idioma diferente do inglês, defina o parâmetro locale . Consulte os documentos Sign In with Apple para obter as localidades suportadas.

    Web modular API

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

    Web namespaced API

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

  4. Autentique-se com o Firebase usando o objeto do provedor OAuth. Você pode solicitar que seus usuários façam login com suas contas Apple abrindo uma janela pop-up ou redirecionando para a página de login. O método de redirecionamento é preferido em dispositivos móveis.

    • Para fazer login com uma janela pop-up, chame signInWithPopup() :

      Web modular API

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

      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 fazer login redirecionando para a página de login, chame signInWithRedirect() :

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

    Web modular API

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

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

    Web namespaced API

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

    Depois que o usuário concluir o login e retornar à página, você poderá obter o resultado do login chamando getRedirectResult() :

    Web modular API

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

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

    É aqui também que você pode detectar e tratar erros. Para obter uma lista de códigos de erro, consulte a referência da API .

    Ao contrário de outros provedores suportados pelo Firebase Auth, a Apple não fornece um URL de foto.

    Além disso, quando o usuário opta por não compartilhar seu e-mail com o aplicativo, a Apple fornece um endereço de e-mail exclusivo para esse usuário (no formato xyz@privaterelay.appleid.com ), que ele compartilha com seu aplicativo. Se você configurou o serviço de retransmissão de e-mail privado, a Apple encaminha 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, como o nome de exibição, com os aplicativos na primeira vez que um usuário faz login. Normalmente, o Firebase armazena o nome de exibição na primeira vez que um usuário faz login na Apple, que você pode obter com firebase.auth().currentUser.displayName . No entanto, se você usou anteriormente a Apple para fazer login de um usuário no aplicativo sem usar o Firebase, a Apple não fornecerá ao Firebase o nome de exibição do usuário.

Reautenticação e vinculação de conta

O mesmo padrão pode ser usado com reauthenticateWithPopup() e reauthenticateWithRedirect() , que você pode usar para recuperar uma nova credencial para operações confidenciais que exigem login recente:

Web modular API

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

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

E você pode usar linkWithPopup() e linkWithRedirect() , para vincular diferentes provedores de identidade a contas existentes.

Observe que a Apple exige que você obtenha o consentimento explícito dos usuários antes de vincular suas contas Apple a outros dados.

Por exemplo, para vincular uma conta do Facebook à conta atual do Firebase, use o token de acesso obtido ao fazer login do usuário no Facebook:

Web modular API

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

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

Autenticar com Firebase em uma extensão do Chrome

Se você estiver criando um aplicativo de extensão do Chrome, consulte o guia Documentos fora da tela .

Observe que você ainda deve verificar o domínio personalizado com a Apple de forma semelhante ao domínio firebaseapp.com padrão:

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

Revogação de token

A Apple exige que os aplicativos que oferecem suporte à criação de contas permitam que os usuários iniciem a exclusão de suas contas no aplicativo, conforme descrito nas Diretrizes de revisão da App Store

Para atender a esse requisito, implemente as seguintes etapas:

  1. Certifique-se de preencher a seção de configuração de ID de serviços e fluxo de código OAuth da configuração do provedor Sign in with Apple, conforme descrito na seção Configurar Sign in with Apple .

  2. Como o Firebase não armazena tokens de usuário quando os usuários são criados com Sign in with Apple, você deve pedir ao usuário que faça login novamente antes de revogar o token e excluir a conta.

    Em seguida, obtenha o token de acesso Apple OAuth de OAuthCredential e use-o para chamar revokeAccessToken(auth, token) para revogar o token de acesso Apple OAuth.

    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. Por fim, exclua a conta do usuário (e todos os dados associados).

Avançado: autenticar com Firebase em Node.js

Para autenticar com o Firebase em um aplicativo Node.js:

  1. Faça login do usuário com sua conta Apple e obtenha o token Apple ID do usuário. Você pode fazer isso de várias maneiras. Por exemplo, se seu aplicativo Node.js tiver um front-end de navegador:

    1. No seu back-end, gere uma string aleatória (um "nonce") e calcule seu hash SHA256. O nonce é um valor de uso único que você usa para validar uma única viagem de ida e volta entre seu back-end e os servidores de autenticação da Apple.

      Web modular API

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

      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. Na página de login, especifique o nonce com hash na configuração do Sign In with 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. Obtenha o token Apple ID do servidor de resposta de autenticação POST:

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

    Consulte também Configurando sua página da Web para fazer login com a Apple .

  2. Depois de obter o token Apple ID do usuário, use-o para criar um objeto Credential e, em seguida, faça login do usuário com a credencial:

    Web modular API

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

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

Depois que um usuário faz login pela primeira vez, uma nova conta de usuário é criada e vinculada às credenciais (ou seja, nome de usuário e senha, número de telefone ou informações do provedor de autenticação) com as quais o usuário fez login. Essa nova conta é armazenada como parte do seu projeto do Firebase e pode ser usada para identificar um usuário em todos os aplicativos do seu projeto, independentemente de como o usuário faz login.

  • Em seus aplicativos, a maneira recomendada de saber o status de autenticação do seu usuário é definir um observador no objeto Auth . Você pode então obter as informações básicas do perfil do usuário no objeto User . Consulte Gerenciar usuários .

  • Nas regras de segurança do Firebase Realtime Database e do Cloud Storage , você pode obter o ID de usuário exclusivo do usuário conectado na variável auth e usá-lo para controlar quais dados um usuário pode acessar.

Você pode permitir que os usuários façam login no seu aplicativo usando vários provedores de autenticação vinculando as credenciais do provedor de autenticação a uma conta de usuário existente.

Para desconectar um usuário, chame signOut :

Web modular API

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

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