O Google tem o compromisso de promover a igualdade racial para as comunidades negras. Saiba como.

Autenticar usando OpenID Connect em aplicativos da web

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

Se você fez upgrade 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 escolha. Isso possibilita o uso de provedores de identidade não suportados nativamente pelo Firebase.

Antes de você começar

Para fazer login de usuários usando um provedor OIDC, você deve primeiro 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 compatível. Este é um dos valores da declaração aud em tokens de identificação emitidos pelo seu provedor.

  • Segredo do cliente : uma string 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 é necessário apenas 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 um URL que, quando anexado com /.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 um provedor de login para seu projeto do Firebase:

  1. Adicione o Firebase ao seu projeto JavaScript .

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

  3. Na página Provedores de login do console do Firebase, 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ícito .

    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 seu ID e segredo do cliente e a string do emissor do seu provedor. Esses valores devem corresponder exatamente aos valores que seu provedor atribuiu a você.

  7. Salve suas alterações.

Gerencie 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 do Firebase para JavaScript, siga estas etapas:

  1. Crie uma instância de um OAuthProvider usando o ID do provedor obtido no console do Firebase.

    Web version 9

    import { OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('oidc.example-provider');
    

    Web version 8

    var provider = new firebase.auth.OAuthProvider('oidc.example-provider');
    
  2. Opcional : especifique parâmetros OAuth personalizados adicionais que você deseja enviar com a solicitação OAuth.

    Web version 9

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

    Web version 8

    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 passar parâmetros obrigatórios do 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 ao provedor de autenticação.

    Web version 9

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

    Web version 8

    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.

    Redirecionar fluxo

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

    Web version 9

    import { getAuth, signInWithRedirect } from "firebase/auth";
    
    const auth = getAuth();
    signInWithRedirect(auth, provider);
    

    Web version 8

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

    Web version 9

    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 version 8

    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 de pop-up

    Web version 9

    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 version 8

    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 reauthenticateWithRedirect() um usuário com reauthenticateWithRedirect() e reauthenticateWithPopup( reauthenticateWithPopup() , que pode ser usado para recuperar novas credenciais para operações confidenciais que exigem login recente.

Gerenciar o fluxo de login manualmente

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

Web version 9

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 version 8

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