Autenticar usando Microsoft com JavaScript,Autenticar usando Microsoft com JavaScript

Você pode permitir que seus usuários se autentiquem com o Firebase usando provedores OAuth, como o Microsoft Azure Active Directory, integrando o login OAuth genérico ao seu aplicativo usando o SDK do Firebase para realizar o fluxo de login de ponta a ponta.

Antes de você começar

Para conectar usuários usando contas da Microsoft (Azure Active Directory e contas pessoais da Microsoft), primeiro você deve habilitar a Microsoft como provedor de login para seu projeto do Firebase:

  1. Adicione o Firebase ao seu projeto JavaScript .
  2. No console do Firebase , abra a seção Auth .
  3. Na guia Método de login , habilite o provedor Microsoft .
  4. Adicione o ID do cliente e o segredo do cliente do console do desenvolvedor desse provedor à configuração do provedor:
    1. Para registrar um cliente Microsoft OAuth, siga as instruções em Início rápido: registrar um aplicativo com o ponto de extremidade do Azure Active Directory v2.0 . Observe que esse ponto de extremidade dá suporte à entrada usando contas pessoais da Microsoft, bem como contas do Azure Active Directory. Saiba mais sobre o Azure Active Directory v2.0.
    2. Ao registrar aplicativos com esses provedores, registre o domínio *.firebaseapp.com do seu projeto como o domínio de redirecionamento do seu aplicativo.
  5. Clique em Salvar .

Lidar com o fluxo de login com o SDK do Firebase

Se você estiver criando um aplicativo Web, a maneira mais fácil de autenticar seus usuários no Firebase usando suas contas da Microsoft é 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 microsoft.com .

    Web modular API

    import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('microsoft.com');
    auth_msft_create_provider.js

    Web namespaced API

    var provider = new firebase.auth.OAuthProvider('microsoft.com');
    microsoft-oauth.js

  2. Opcional : Especifique parâmetros OAuth customizados adicionais que você deseja enviar com a solicitação OAuth.

    Web modular API

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

    Web namespaced API

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

    Para os parâmetros suportados pela Microsoft, consulte a documentação do Microsoft OAuth . Observe que você não pode passar 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 os utilizadores de um determinado inquilino do Azure AD iniciem sessão na aplicação, pode ser utilizado o nome de domínio amigável do inquilino do Azure AD ou o identificador GUID do inquilino. Isso pode ser feito especificando o campo "locatário" no objeto de parâmetros personalizados.

    Web modular API

    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

    Web namespaced API

    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

  3. Opcional : Especifique escopos adicionais do OAuth 2.0 além do perfil básico que você deseja solicitar do 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 .

  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 da Microsoft 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) => {
    // 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

    Web namespaced API

    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 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_msft_signin_redirect.js

    Web namespaced API

    firebase.auth().signInWithRedirect(provider);
    microsoft-oauth.js

    Depois que o usuário concluir o login e retornar à página, será possível obter o resultado do login chamando getRedirectResult .

    Web modular API

    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

    Web namespaced API

    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

    Após a conclusão bem-sucedida, o token de acesso OAuth associado ao provedor poderá ser recuperado do objeto firebase.auth.UserCredential retornado.

    Usando o token de acesso OAuth, você pode chamar a API do Microsoft Graph .

    Por exemplo, para obter as informações básicas do perfil, a seguinte API REST pode ser chamada:

    curl -i -H "Authorization: Bearer ACCESS_TOKEN" https://graph.microsoft.com/v1.0/me

    Ao contrário de outros provedores suportados pelo Firebase Auth, a Microsoft não fornece um URL de foto e, em vez disso, os dados binários de uma foto de perfil devem ser solicitados por meio da API Microsoft Graph .

    Além do token de acesso OAuth, o token de ID OAuth do usuário também pode ser recuperado do objeto firebase.auth.UserCredential . A sub no token de ID é específica do aplicativo e não corresponderá ao identificador de usuário federado usado pelo Firebase Auth e acessível por meio de user.providerData[0].uid . O campo de declaração oid deve ser usado em seu lugar. Ao utilizar um inquilino AZure AD para iniciar sessão, a reivindicação oid será uma correspondência exata. No entanto, para o caso de não locatário, o campo oid é preenchido. Para um ID federado 4b2eabcdefghijkl , o oid terá o formato 00000000-0000-0000-4b2e-abcdefghijkl .

  5. Embora os exemplos acima se concentrem em fluxos de entrada, você também tem a capacidade de vincular um provedor Microsoft a um usuário existente usando linkWithPopup / linkWithRedirect . Por exemplo, você pode vincular vários provedores ao mesmo usuário, permitindo que eles façam login com qualquer um deles.

    Web modular API

    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

    Web namespaced API

    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

  6. O mesmo padrão pode ser usado com reauthenticateWithPopup / reauthenticateWithRedirect que pode ser usado para recuperar credenciais novas para operações confidenciais que exigem login recente.

    Web modular API

    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

    Web namespaced API

    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

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 .

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