Autenticar usando OpenID Connect em aplicativos da web

Se você tiver atualizado para o Firebase Authentication com Identity Platform, poderá autenticar seus usuários com o Firebase usando o provedor compatível com OpenID Connect (OIDC) de sua preferência. Isso possibilita o uso de provedores de identidade não suportados nativamente pelo Firebase.

Antes de você começar

Para conectar usuários usando um provedor OIDC, primeiro você deve coletar algumas informações do provedor:

  • ID do cliente : uma string exclusiva do provedor que identifica seu aplicativo. Seu provedor pode atribuir a você um ID de cliente diferente para cada plataforma que você oferece suporte. Este é um dos valores da declaração aud em tokens de identificação emitidos pelo seu provedor.

  • Segredo do cliente : uma sequência secreta que o provedor usa para confirmar a propriedade de um ID do cliente. Para cada ID de cliente, você precisará de um segredo de cliente correspondente. (Esse valor será obrigatório somente se você estiver usando o fluxo de código de autenticação , o que é altamente recomendado.)

  • Emissor : uma string que identifica seu provedor. Esse valor deve ser uma URL que, quando anexada a /.well-known/openid-configuration , seja o local do documento de descoberta OIDC do provedor. Por exemplo, se o emissor for https://auth.example.com , o documento de descoberta deverá estar disponível em https://auth.example.com/.well-known/openid-configuration .

Depois de obter as informações acima, ative o OpenID Connect como provedor de login para seu projeto do Firebase:

  1. Adicione o Firebase ao seu projeto JavaScript .

  2. Se você ainda não atualizou para o Firebase Authentication com Identity Platform, faça-o. A autenticação OpenID Connect está disponível apenas em projetos atualizados.

  3. Na página Provedores de login do Firebase Console, clique em Adicionar novo provedor e em OpenID Connect .

  4. Selecione se você usará o fluxo de código de autorização ou o fluxo de concessão implícita .

    Você deve usar sempre o fluxo de código se o seu provedor oferecer suporte . O fluxo implícito é menos seguro e seu uso é fortemente desencorajado.

  5. Dê um nome a este provedor. Observe o ID do provedor gerado: algo como oidc.example-provider . Você precisará desse ID ao adicionar o código de login ao seu aplicativo.

  6. Especifique o ID do cliente e o segredo do cliente, além da string do emissor do seu provedor. Esses valores devem corresponder exatamente aos valores que seu provedor atribuiu a você.

  7. Salve suas alterações.

Lidar com o fluxo de login com o SDK do Firebase

A maneira mais fácil de autenticar seus usuários com o Firebase usando seu provedor OIDC é lidar com todo o fluxo de login com o SDK 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 obtido no console do Firebase.

    API modular da Web

    import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('oidc.example-provider');

    API com namespace da Web

    var provider = new firebase.auth.OAuthProvider('oidc.example-provider');

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

    API modular da Web

    provider.setCustomParameters({
  // Target specific email with login hint.
  login_hint: 'user@example.com'
});

    API com namespace da Web

    provider.setCustomParameters({
  // Target specific email with login hint.
  login_hint: 'user@example.com'
});

    Verifique com seu provedor os parâmetros que ele suporta. Observe que você não pode transmitir parâmetros exigidos pelo Firebase com setCustomParameters . Esses parâmetros são client_id , response_type , redirect_uri , state , scope e response_mode .

  3. Opcional : Especifique escopos adicionais do OAuth 2.0 além do perfil básico que você deseja solicitar do provedor de autenticação.

    API modular da Web

    provider.addScope('mail.read');
provider.addScope('calendars.read');

    API com namespace da Web

    provider.addScope('mail.read');
provider.addScope('calendars.read');

    Verifique com seu provedor os escopos que ele suporta.

  4. Autentique-se com o Firebase usando o objeto do provedor OAuth.

    Você pode redirecionar o usuário para a página de login do provedor ou abrir a página de login em uma janela pop-up do navegador.

    Fluxo de redirecionamento

    Redirecione para a página de login do provedor chamando signInWithRedirect() :

    API modular da Web

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

const auth = getAuth();
signInWithRedirect(auth, provider);

    API com namespace da Web

    firebase.auth().signInWithRedirect(provider);

    Depois que o usuário concluir o login e retornar ao seu aplicativo, você poderá obter o resultado do login chamando getRedirectResult() .

    API modular da Web

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

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

    Fluxo pop-up

    API modular da Web

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

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

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

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

  5. Embora os exemplos acima se concentrem em fluxos de login, você pode usar o mesmo padrão para vincular um provedor OIDC a um usuário existente usando linkWithRedirect() e linkWithPopup() e autenticar novamente um usuário com reauthenticateWithRedirect() e reauthenticateWithPopup() , que pode ser usado para recuperar novas credenciais para operações confidenciais que exigem login recente.

Lidar com o fluxo de login manualmente

Se você já implementou o fluxo de login do OpenID Connect no seu aplicativo, poderá usar o token de ID diretamente para autenticar no Firebase:

API modular da Web

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

const provider = new OAuthProvider("oidc.example-provider");
const credential = provider.credential({
    idToken: idToken,
});
signInWithCredential(getAuth(), credential)
    .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.
    });

API com namespace da Web

const provider = new OAuthProvider("oidc.example-provider");
const credential = provider.credential({
    idToken: idToken,
});
firebase.auth().signInWithCredential(credential)
    .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.
    });