Autenticar usando a Microsoft com JavaScript

Permita que os usuários se autentiquem com o Firebase usando provedores OAuth, como o Microsoft Azure Active Directory. Basta integrar o login genérico do OAuth ao seu app usando o SDK do Firebase para realizar o fluxo de login completo.

Antes de começar

Para fazer login de usuários usando contas da Microsoft (Azure Active Directory e contas pessoais da Microsoft), primeiro ative a Microsoft como um provedor de login do seu projeto do Firebase:

Adicione o Firebase ao seu projeto JavaScript.
No Console do Firebase, abra a seção Autenticação.
Na guia Método de login, ative o provedor Microsoft.
Adicione o ID do cliente e a Chave secreta do cliente do console do desenvolvedor às configurações do provedor:
1. Para registrar um cliente OAuth da Microsoft, siga as instruções em Guia de início rápido: como registrar um app com o endpoint do Azure Active Directory v2.0. Observe que esse endpoint oferece suporte para o login de contas pessoais da Microsoft, bem como de contas do Azure Active Directory. Saiba mais sobre o Azure Active Directory v2.0.
2. Ao registrar apps nesses provedores, registre o domínio *.firebaseapp.com do projeto como o domínio de redirecionamento do seu app.
Clique em Salvar.

Processar o fluxo de login com o SDK do Firebase

Se você está desenvolvendo um app da Web, a maneira mais fácil de autenticar seus usuários com o Firebase usando contas da Microsoft é processando o fluxo de login com o SDK do Firebase para JavaScript.

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

Crie uma instância de um OAuthProvider usando o ID do provedor microsoft.com.
API modular da Web

Saiba mais sobre a API modular da Web que oferece suporte a tree shaking e o upgrade da API com namespace.
```
import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('microsoft.com');auth_msft_create_provider.js
```
API com namespace da Web
```
var provider = new firebase.auth.OAuthProvider('microsoft.com');microsoft-oauth.js
```

Opcional: especifique os parâmetros OAuth personalizados que você quer enviar com a solicitação OAuth.

API modular da Web

provider.setCustomParameters({
  // Force re-consent.
  prompt: 'consent',
  // Target specific email with login hint.
  login_hint: 'user@firstadd.onmicrosoft.com'
});auth_msft_provider_params.js

API com namespace da Web

provider.setCustomParameters({
  // Force re-consent.
  prompt: 'consent',
  // Target specific email with login hint.
  login_hint: 'user@firstadd.onmicrosoft.com'
});microsoft-oauth.js

Para saber quais parâmetros são aceitos pela Microsoft, consulte a documentação do OAuth da Microsoft. Não é possível transmitir os parâmetros exigidos pelo Firebase com setCustomParameters(). Esses parâmetros são client_id, response_type, redirect_uri, state, scope e response_mode.

Para permitir que apenas usuários de um determinado locatário do Azure AD façam login no aplicativo, é possível usar o nome de domínio do locatário do Azure AD ou o identificador GUID do locatário. Isso pode ser feito ao especificar o campo "locatário" no objeto de parâmetros personalizados.

API modular da Web

provider.setCustomParameters({
  // Optional "tenant" parameter in case you are using an Azure AD tenant.
  // eg. '8eaef023-2b34-4da1-9baa-8bc8c9d6a490' or 'contoso.onmicrosoft.com'
  // or "common" for tenant-independent tokens.
  // The default value is "common".
  tenant: 'TENANT_ID'
});auth_msft_provider_params_tenant.js

API com namespace da Web

provider.setCustomParameters({
  // Optional "tenant" parameter in case you are using an Azure AD tenant.
  // eg. '8eaef023-2b34-4da1-9baa-8bc8c9d6a490' or 'contoso.onmicrosoft.com'
  // or "common" for tenant-independent tokens.
  // The default value is "common".
  tenant: 'TENANT_ID'
});microsoft-oauth.js

Opcional: especifique os outros escopos de OAuth 2.0 além do perfil básico que você quer solicitar ao provedor de autenticação.
```
provider.addScope('mail.read');
provider.addScope('calendars.read');
```
Para saber mais, consulte a documentação de permissões e consentimento da Microsoft (em inglês).
Use o objeto de provedor do OAuth para a autenticação no Firebase. É possível solicitar que os usuários façam login com as respectivas contas da Microsoft em uma nova janela pop-up ou pelo redirecionamento à página de login. O método de redirecionamento é recomendável para dispositivos móveis.
- Para fazer login com uma janela pop-up, chame signInWithPopup:
API modular da Web

Saiba mais sobre a API modular da Web que oferece suporte a tree shaking e o upgrade da API com namespace.
```
import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // User is signed in.
    // IdP data available in result.additionalUserInfo.profile.

    // Get the OAuth access token and ID Token
    const credential = OAuthProvider.credentialFromResult(result);
    const accessToken = credential.accessToken;
    const idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });auth_msft_signin_popup.js
```
API com namespace da Web
```
firebase.auth().signInWithPopup(provider)
  .then((result) => {
    // IdP data available in result.additionalUserInfo.profile.
    // ...

    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // OAuth access and id tokens can also be retrieved:
    var accessToken = credential.accessToken;
    var idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });microsoft-oauth.js
```
- Para redirecionar os usuários à página de login, chame signInWithRedirect:
Siga as práticas recomendadas ao usar signInWithRedirect, linkWithRedirect ou reauthenticateWithRedirect.
API modular da Web

Saiba mais sobre a API modular da Web que oferece suporte a tree shaking e o upgrade da API com namespace.
```
import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);auth_msft_signin_redirect.js
```
API com namespace da Web
```
firebase.auth().signInWithRedirect(provider);microsoft-oauth.js
```
Depois que o usuário fizer login e retornar à página, chame getRedirectResult para saber o resultado do login.
API modular da Web

Saiba mais sobre a API modular da Web que oferece suporte a tree shaking e o upgrade da API com namespace.
```
import { getAuth, getRedirectResult, OAuthProvider } from "firebase/auth";

const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    // User is signed in.
    // IdP data available in result.additionalUserInfo.profile.

    // Get the OAuth access token and ID Token
    const credential = OAuthProvider.credentialFromResult(result);
    const accessToken = credential.accessToken;
    const idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });auth_msft_signin_redirect_result.js
```
API com namespace da Web
```
firebase.auth().getRedirectResult()
  .then((result) => {
    // IdP data available in result.additionalUserInfo.profile.
    // ...

    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // OAuth access and id tokens can also be retrieved:
    var accessToken = credential.accessToken;
    var idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });microsoft-oauth.js
```
Se o processo foi concluído, o token de acesso OAuth associado ao provedor pode ser recuperado com o objeto firebase.auth.UserCredential retornado.

Com o token de acesso OAuth, é possível chamar a API Microsoft Graph.

Por exemplo, para receber as informações básicas do perfil, é possível chamar a seguinte API REST:
```
curl -i -H "Authorization: Bearer ACCESS_TOKEN" https://graph.microsoft.com/v1.0/me
```
Ao contrário de outros provedores que recebem suporte do Firebase Authentication, a Microsoft não fornece um URL de foto. Em vez disso, os dados binários de uma foto de perfil precisam ser solicitados por meio da API Microsoft Graph.

Além do token de acesso OAuth, é possível usar o objeto firebase.auth.UserCredential para recuperar o token de ID OAuth do usuário. A declaração sub no token de ID é específica do app e não vai corresponder ao identificador federado de usuários, que é usado pelo Firebase Auth e pode ser acessado utilizando user.providerData[0].uid. Nesse caso, o campo de declaração oid deve ser utilizado. Ao usar um locatário do Azure AD para fazer login, a declaração oid será uma correspondência exata. No entanto, para o caso sem locatário, o campo oid será preenchido. Para um ID federado 4b2eabcdefghijkl, oid terá um formulário 00000000-0000-0000-4b2e-abcdefghijkl.

Os exemplos estão relacionados aos fluxos de login, mas também é possível vincular um provedor da Microsoft a um usuário atual com linkWithPopup/linkWithRedirect. Por exemplo, é possível vincular vários provedores ao mesmo usuário, o que permitirá que ele faça login usando qualquer um deles.

API modular da Web

import { getAuth, linkWithPopup, OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('microsoft.com');
const auth = getAuth();

linkWithPopup(auth.currentUser, provider)
    .then((result) => {
      // Microsoft credential is linked to the current user.
      // IdP data available in result.additionalUserInfo.profile.

      // Get the OAuth access token and ID Token
      const credential = OAuthProvider.credentialFromResult(result);
      const accessToken = credential.accessToken;
      const idToken = credential.idToken;
    })
    .catch((error) => {
      // Handle error.
    });auth_msft_link_popup.js

API com namespace da Web

var provider = new firebase.auth.OAuthProvider('microsoft.com');
firebase.auth().currentUser.linkWithPopup(provider)
    .then((result) => {
      // Microsoft credential is linked to the current user.
      // IdP data available in result.additionalUserInfo.profile.
      // OAuth access token can also be retrieved:
      // result.credential.accessToken
      // OAuth ID token can also be retrieved:
      // result.credential.idToken
    })
    .catch((error) => {
      // Handle error.
    });microsoft-oauth.js

É possível usar o mesmo padrão com reauthenticateWithPopup/reauthenticateWithRedirect, que pode ser utilizado para recuperar credenciais novas para operações confidenciais que exigem um login recente.

API modular da Web

import { getAuth, reauthenticateWithPopup, OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('microsoft.com');
const auth = getAuth();
reauthenticateWithPopup(auth.currentUser, provider)
    .then((result) => {
      // User is re-authenticated with fresh tokens minted and
      // should be able to perform sensitive operations like account
      // deletion and email or password update.
      // IdP data available in result.additionalUserInfo.profile.

      // Get the OAuth access token and ID Token
      const credential = OAuthProvider.credentialFromResult(result);
      const accessToken = credential.accessToken;
      const idToken = credential.idToken;
    })
    .catch((error) => {
      // Handle error.
    });auth_msft_reauth_popup.js

API com namespace da Web

var provider = new firebase.auth.OAuthProvider('microsoft.com');
firebase.auth().currentUser.reauthenticateWithPopup(provider)
    .then((result) => {
      // User is re-authenticated with fresh tokens minted and
      // should be able to perform sensitive operations like account
      // deletion and email or password update.
      // IdP data available in result.additionalUserInfo.profile.
      // OAuth access token can also be retrieved:
      // result.credential.accessToken
      // OAuth ID token can also be retrieved:
      // result.credential.idToken
    })
    .catch((error) => {
      // Handle error.
    });microsoft-oauth.js

Como processar erros account-exists-with-different-credential

Se você ativou a configuração Uma conta por endereço de e-mail no Console do Firebase, quando um usuário tentar se conectar a um provedor (como a Microsoft) com um e-mail que já existe em outro provedor de usuário do Firebase (como o Google), o erro auth/account-exists-with-different-credential será exibido com um objeto AuthCredential (credencial da Microsoft). Para concluir o login no provedor desejado, o usuário precisa primeiro fazer login no provedor atual (Google) e depois estabelecer um vínculo com o AuthCredential anterior (credencial da Microsoft).

Se você usar signInWithPopup, poderá corrigir erros auth/account-exists-with-different-credential utilizando código, como o do exemplo a seguir:


// Step 1.
// User tries to sign in to Microsoft.
auth.signInWithPopup(new firebase.auth.OAuthProvider('microsoft.com')).catch(function(error) {
  // An error happened.
  if (error.code === 'auth/account-exists-with-different-credential') {
    // Step 2.
    // User's email already exists.
    // The pending Microsoft credential.
    var pendingCred = error.credential;
    // The provider account's email address.
    var email = error.email;
    // Get sign-in methods for this email.
    auth.fetchSignInMethodsForEmail(email).then(function(methods) {
      // Step 3.
      // If the user has several sign-in methods,
      // the first method in the list will be the "recommended" method to use.
      if (methods[0] === 'password') {
        // Asks the user their password.
        // In real scenario, you should handle this asynchronously.
        var password = promptUserForPassword(); // TODO: implement promptUserForPassword.
        auth.signInWithEmailAndPassword(email, password).then(function(result) {
          // Step 4a.
          return result.user.linkWithCredential(pendingCred);
        }).then(function() {
          // Microsoft account successfully linked to the existing Firebase user.
          goToApp();
        });
        return;
      }
      // All the other cases are external providers.
      // Construct provider object for that provider.
      // TODO: implement getProviderForProviderId.
      var provider = getProviderForProviderId(methods[0]);
      // At this point, you should let the user know that they already have an account
      // but with a different provider, and let them validate the fact they want to
      // sign in with this provider.
      // Sign in to provider. Note: browsers usually block popup triggered asynchronously,
      // so in real scenario you should ask the user to click on a "continue" button
      // that will trigger the signInWithPopup.
      auth.signInWithPopup(provider).then(function(result) {
        // Remember that the user may have signed in with an account that has a different email
        // address than the first one. This can happen as Firebase doesn't control the provider's
        // sign in flow and the user is free to login using whichever account they own.
        // Step 4b.
        // Link to Microsoft credential.
        // As we have access to the pending credential, we can directly call the link method.
        result.user.linkAndRetrieveDataWithCredential(pendingCred).then(function(usercred) {
          // Microsoft account successfully linked to the existing Firebase user.
          goToApp();
        });
      });
    });
  }
});

Modo de redirecionamento

O processamento desse erro é similar no modo de redirecionamento. No entanto, nele, as credenciais pendentes devem ser armazenadas em cache entre os redirecionamentos de página usando, por exemplo, o armazenamento de sessão.

Ao contrário de outros provedores OAuth aceitos pelo Firebase, como Google, Facebook e Twitter, em que é possível fazer login diretamente com credenciais baseadas em token de acesso OAuth, isso não é possível no Firebase Auth ao usar provedores como a Microsoft porque o servidor do Firebase Auth não consegue verificar o público dos tokens de acesso OAuth da Microsoft. Esse é um requisito de segurança crítico e pode expor aplicativos e sites a ataques de repetição em que um token de acesso OAuth da Microsoft recebido em um projeto (invasor) pode ser usado para acessar outro projeto (vítima). Em vez disso, o Firebase Auth permite gerenciar todo o fluxo do OAuth e trocar o código de autorização usando o ID do cliente e o secret do OAuth configurados no Console do Firebase. Um código de autorização recebido em um projeto não pode ser usado em outro, porque só pode ser utilizado em conjunto com um ID do cliente/secret específicos.

Se for preciso usar esses provedores em ambientes sem suporte, será necessário usar uma biblioteca OAuth de terceiros e uma autenticação personalizada do Firebase. O primeiro é necessário para autenticar no provedor, e o segundo para trocar a credencial do provedor por um token personalizado.

Fazer autenticação com o Firebase em uma extensão do Chrome

Se você está criando um app de extensão do Chrome, é necessário adicionar o ID da extensão:

Abra seu projeto no Console do Firebase.
Na seção Autenticação, abra a página Método de login.
Adicione um URI como o seguinte à lista de domínios autorizados:
```
chrome-extension://CHROME_EXTENSION_ID
```

Somente as operações pop-up (signInWithPopup, linkWithPopup e reauthenticateWithPopup) estão disponíveis para as extensões do Chrome. Isso ocorre porque as extensões não podem usar redirecionamentos HTTP. Chame esses métodos usando um script de página em segundo plano porque, se usar o pop-up de ação do navegador, ele será cancelado pelo pop-up de autenticação. Os métodos pop-up só podem ser usados em extensões que usam o Manifest V2. O Manifest V3 mais recente só permite scripts em segundo plano na forma de service workers, que não podem realizar as operações pop-up.

No arquivo de manifesto da sua extensão do Chrome, adicione o URL https://apis.google.com à lista de permissões content_security_policy.

O Firebase provisionará um subdomínio exclusivo para o projeto https://my-app-12345.firebaseapp.com no momento da criação dele.

Esse subdomínio também será usado como mecanismo de redirecionamento para o login do OAuth. Esse domínio precisaria ter permissão para todos os provedores OAuth com suporte. No entanto, isso significa que os usuários poderiam ver esse domínio ao fazer login na Microsoft antes do redirecionamento para o aplicativo: Continuar para: https://my-app-12345.firebaseapp.com.

Para evitar a exibição do subdomínio, configure um domínio personalizado com o Firebase Hosting:

Siga as etapas de 1 a 3 em Configurar o domínio para o Hosting. Quando você verifica a propriedade do domínio, o Hosting provisiona um certificado SSL para o domínio personalizado.
Adicione o domínio personalizado à lista de domínios autorizados no Console do Firebase: auth.custom.domain.com.
No console para desenvolvedores da Microsoft ou na página de configuração do OAuth, adicione o URL da página de redirecionamento à lista de permissões, que estará acessível no seu domínio personalizado: https://auth.custom.domain.com/__/auth/handler.

Ao inicializar a biblioteca do JavaScript, especifique seu domínio personalizado com o campo authDomain:

var config = {
  apiKey: '...',
  // Changed from 'my-app-12345.firebaseapp.com'.
  authDomain: 'auth.custom.domain.com',
  databaseURL: 'https://my-app-12345.firebaseio.com',
  projectId: 'my-app-12345',
  storageBucket: 'my-app-12345.appspot.com',
  messagingSenderId: '1234567890'
};
firebase.initializeApp(config);

Próximas etapas

Depois que um usuário faz login pela primeira vez, uma nova conta de usuário é criada e vinculada às credenciais, que podem ser o número do telefone, o nome de usuário e a senha ou as informações do provedor de autenticação. Essa nova conta é armazenada como parte do projeto do Firebase e pode ser usada para identificar um usuário em todos os apps do projeto, seja qual for o método de login utilizado.

Nos apps, a maneira recomendada de saber o status de autenticação do seu usuário é definindo um observador no objeto Auth. É possível, então, receber as informações básicas de perfil do usuário do objeto User. Consulte Gerenciar usuários.
Nas Regras de segurança do Firebase Realtime Database e do Cloud Storage, é possível receber o ID exclusivo do usuário conectado da variável auth e usar esse ID para controlar quais dados uma pessoa pode acessar.

Os usuários podem fazer login no app usando vários provedores de autenticação. Basta vincular as credenciais desses provedores a uma conta de usuário.

Para desconectar um usuário, chame signOut:

API modular da 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 com namespace da Web

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

Autenticar usando a Microsoft com JavaScript

Antes de começar

Processar o fluxo de login com o SDK do Firebase

API modular da Web

API com namespace da Web

API modular da Web

API com namespace da Web

API modular da Web

API com namespace da Web

API modular da Web

API com namespace da Web

API modular da Web

API com namespace da Web

API modular da Web

API com namespace da Web

API modular da Web

API com namespace da Web

API modular da Web

API com namespace da Web

Como processar erros account-exists-with-different-credential

Modo de pop-up

Modo de redirecionamento

Avançado: processar o fluxo de login manualmente

Fazer autenticação com o Firebase em uma extensão do Chrome

Personalizar o domínio de redirecionamento para o login da Microsoft

Próximas etapas

API modular da Web

API com namespace da Web