Autenticar usando o OpenID Connect em apps da Web

Se você fez upgrade para o Firebase Authentication with Identity Platform, pode autenticar seus usuários com o Firebase usando o provedor compatível com o OpenID Connect (OIDC) que quiser. Isso permite usar provedores de identidade que não têm compatibilidade nativa com o Firebase.

Antes de começar

Para fazer login de usuários usando um provedor OIDC, primeiro você precisa coletar algumas informações do provedor:

  • ID do cliente: uma string exclusiva do provedor que identifica seu app. Seu provedor pode atribuir um ID do cliente diferente para cada plataforma compatível. Esse é um dos valores da declaração aud nos tokens de ID emitidos pelo provedor.

  • Chave secreta do cliente: uma string secreta usada pelo provedor para confirmar a propriedade de um ID do cliente. Para cada ID do cliente, você precisará de uma chave secreta correspondente. Esse valor é obrigatório somente se você usa o fluxo de código de autenticação, o que é recomendado.

  • Emissor: uma string que identifica seu provedor. Esse valor precisa ser um URL que, quando anexado com /.well-known/openid-configuration, é o local do documento de descoberta do OIDC do provedor. Por exemplo, se o emissor é https://auth.example.com, o documento de descoberta precisa estar disponível em https://auth.example.com/.well-known/openid-configuration.

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

  1. Adicione o Firebase ao seu projeto em JavaScript.

  2. Se você não fez upgrade para o Firebase Authentication with Identity Platform, faça isso. A autenticação do OpenID Connect só está disponível em projetos atualizados.

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

  4. Defina se você vai usar o fluxo do código de autorização ou o fluxo de concessão implícito.

    Use sempre o fluxo de código se seu provedor for compatível. O fluxo implícito é menos seguro, e o uso dele não é recomendado.

  5. Dê um nome a esse provedor. O ID do provedor gerado é algo como oidc.example-provider. Você precisará desse ID ao adicionar o código de login ao seu app.

  6. Especifique o ID e a chave secreta do cliente, além da string do emissor do seu provedor. Esses valores precisam ser iguais aos atribuídos pelo provedor.

  7. Salve as mudanças.

Processar o fluxo de login com o SDK do Firebase

A maneira mais fácil de autenticar seus usuários com o Firebase usando o provedor OIDC é processar todo o fluxo de login com o SDK do Firebase.

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

  1. Crie uma instância de um OAuthProvider usando o ID do provedor que você recebeu no Console do Firebase.

    Web 

    import { OAuthProvider } from "firebase/auth";

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

    Web 

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

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

    Web 

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

    Web 

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

    Verifique com seu provedor os parâmetros compatíveis com ele. 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.

  3. Opcional: especifique os outros escopos de OAuth 2.0 além do perfil básico que você quer solicitar ao provedor de autenticação.

    Web 

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

    Web 

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

    Verifique com o provedor os escopos compatíveis.

  4. Use o objeto de provedor do OAuth para a autenticação no Firebase.

    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():

    Web 

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

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

    Web 

    firebase.auth().signInWithRedirect(provider);

    Depois que o usuário fizer login e retornar ao app, chame getRedirectResult() para ver o resultado do login.

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

    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

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

    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. Os exemplos acima se concentram nos fluxos de login, mas é possível usar o mesmo padrão para vincular um provedor OIDC a um usuário usando linkWithRedirect() e linkWithPopup(), além de autenticar novamente um usuário com reauthenticateWithRedirect() e reauthenticateWithPopup(), que podem ser usadas para recuperar credenciais novas de operações confidenciais que exigem um login recente.

Processar o fluxo de login manualmente

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

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

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