Como fazer login de usuários com OIDC

Este documento mostra como usar o Identity Platform para fazer login de usuários com um provedor OpenID Connect (OIDC).

Antes de começar

  1. Sign in to your Google Cloud account. If you're new to Google Cloud, create an account to evaluate how our products perform in real-world scenarios. New customers also get $300 in free credits to run, test, and deploy workloads.

  2. In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

    Go to project selector

  3. Make sure that billing is enabled for your Google Cloud project.

  4. In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

    Go to project selector

  5. Make sure that billing is enabled for your Google Cloud project.

  6. Ative o Identity Platform e adicione o SDK do cliente ao seu app. Veja o Guia de início rápido para saber como.

Como configurar o provedor

  1. Acesse a página Provedores de identidade no console do Google Cloud.
    Acessar a página "Provedores do Identity Platform"

  2. Clique em Adicionar um provedor e selecione OpenID Connect na lista.

Fluxo do código de autorização

  1. Insira os seguintes detalhes para ativar o fluxo de código de autorização:

    1. Selecione Fluxo de código na seção Escolher tipo de concessão.

    2. O Nome do provedor. Ele pode ser igual ao ID do provedor ou um nome personalizado. Se você inserir um nome personalizado, clique em Editar ao lado de ID do provedor para especificar o ID (que precisa começar com oidc.).

    3. O ID do cliente do provedor.

    4. O Emissor do provedor. A aparência será semalhente a esta: https://example.com. O Identity Platform usa esse URL para localizar o documento de descoberta OIDC (normalmente fica em /.well-known/openid-configuration) que especifica os endpoints OAuth e as chaves públicas do provedor.

    5. A chave secreta do cliente do provedor.

  2. Adicione seu app à lista de Domínios autorizados. Por exemplo, se o URL de login do seu aplicativo for https://example.com/login, adicione example.com.

  3. Configure o URL de callback do Identity Platform como um URL de redirecionamento com seu provedor OIDC. O URL precisa ser semelhante a https://[PROJECT-ID].firebaseapp.com/__/auth/handler.

  4. Clique em Save.

Fluxo implícito

  1. Insira os seguintes detalhes para ativar o fluxo implícito:

    1. Selecione Fluxo implícito na seção Escolher tipo de concessão.

    2. O Nome do provedor. Ele pode ser igual ao ID do provedor ou um nome personalizado. Se você inserir um nome personalizado, clique em Editar ao lado de ID do provedor para especificar o ID (que precisa começar com oidc.).

    3. O ID do cliente do provedor.

    4. O Emissor do provedor. Isso precisa ser parecido como https://example.com.. O Identity Platform usa esse URL para localizar o documento de descoberta do OIDC, normalmente encontrado em /.well-known/openid-configuration, que especifica os endpoints OAuth do provedor e as chaves públicas.

  2. Adicione seu app à lista de Domínios autorizados. Por exemplo, se o URL de login do seu aplicativo for https://example.com/login, adicione example.com.

  3. Configure o URL de callback do Identity Platform como um URL de redirecionamento com seu provedor OIDC. O URL precisa ser semelhante a https://[PROJECT-ID].firebaseapp.com/__/auth/handler.

  4. Clique em Save.

Como conectar usuários

Há duas maneiras de fazer login dos usuários com o OIDC:

  • Usando fluxo de OAuth. Essa abordagem conclui o handshake do OAuth para você. Com base na seleção de fluxo de código de autorização/fluxo implícito na etapa da configuração do provedor, o servidor GCIP escolhe o fluxo desejado para se comunicar com o provedor de identidade.

  • Usar o token de ID do provedor OIDC. Esse método presume que você já tem um token OIDC disponível.

Como fazer login dos usuários com o OAuth

Para fazer login usando o OAuth:

  1. Crie uma instância OAuthProvider com o ID do provedor configurado na seção anterior. O ID do provedor precisa começar com oidc..

    Versão 9 para a Web

    import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider("oidc.myProvider");
    auth_oidc_provider_create.js

    Versão 8 para a Web

    const provider = new firebase.auth.OAuthProvider('oidc.myProvider');
    oidc.js

  2. Inicie o fluxo de login. É possível usar um pop-up ou um redirecionamento.

    Versão 9 para a Web

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

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // User is signed in.
    const credential = OAuthProvider.credentialFromResult(result);
    // This gives you an access token for the OIDC provider. You can use it to directly interact with that provider
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The AuthCredential type that was used.
    const credential = OAuthProvider.credentialFromError(error);
    // Handle / display error.
    // ...
  });
    auth_oidc_signin_popup.js

    Versão 8 para a Web

    firebase.auth().signInWithPopup(provider)
  .then((result) => {
    // User is signed in.
    // result.credential is a firebase.auth().OAuthCredential object.
    // result.credential.providerId is equal to 'oidc.myProvider'.
    // result.credential.idToken is the OIDC provider's ID token.
  })
  .catch((error) => {
    // Handle error.
  });
    oidc.js

    Redirecionamento

    Para redirecionar para uma página de login, chame signInWithRedirect():

    Versão 9 para a Web

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

const auth = getAuth();
signInWithRedirect(auth, provider);
    auth_oidc_signin_redirect.js

    Versão 8 para a Web

    firebase.auth().signInWithRedirect(provider).catch((error) => {
  // Handle error.
});
    oidc.js

    Em seguida, chame getRedirectResult() para receber os resultados quando o usuário retornar ao app:

    Versão 9 para a Web

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

const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    // User is signed in.
    const credential = OAuthProvider.credentialFromResult(result);
    // This gives you an access token for the OIDC provider. You can use it to directly interact with that provider
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The AuthCredential type that was used.
    const credential = OAuthProvider.credentialFromError(error);
    // Handle / display error.
    // ...
  });
    auth_oidc_signin_redirect_result.js

    Versão 8 para a Web

    // On return.
firebase.auth().getRedirectResult()
  .then((result) => {
    // User is signed in.
    // result.credential is a firebase.auth().OAuthCredential object.
    // result.credential.providerId is equal to 'oidc.myProvider'.
    // result.credential.idToken is the OIDC provider's ID token.
  })
  .catch((error) => {
    // Handle / display error.
    // ...
  });
    oidc.js

Ao concluir um dos fluxos, é possível conseguir o token de ID do OIDC usando o campo result.credential.idToken.

Como fazer login de usuários diretamente

Para fazer login de um usuário com um token de ID OIDC diretamente, siga estas etapas:

  1. Inicialize uma instância OAuthProvider com o ID do provedor configurado na seção anterior. O ID do provedor precisa começar com oidc.. Em seguida, crie uma OAuthCredential e chame signInWithCredential() para fazer login do usuário.

    Versão 9 para a Web

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

const auth = getAuth();
const credential = provider.credential({
  idToken: oidcIdToken,
});
signInWithCredential(auth, credential)
  .then((result) => {
    // User is signed in.
    const newCredential = OAuthProvider.credentialFromResult(result);
    // This gives you a new access token for the OIDC provider. You can use it to directly interact with that provider.
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The AuthCredential type that was used.
    const credential = OAuthProvider.credentialFromError(error);
    // Handle / display error.
    // ...
  });
    auth_oidc_direct_sign_in.js

    Versão 8 para a Web

    const credential = provider.credential(oidcIdToken, null);

firebase.auth().signInWithCredential(credential)
  .then((result) => {
    // User is signed in.
    // User now has a odic.myProvider UserInfo in providerData.
  })
  .catch((error) => {
    // Handle / display error.
    // ...
  });
    oidc.js

Como vincular contas de usuário

Se um usuário já tiver feito login no app com outro método (como e-mail/senha), você poderá vincular a conta dele ao provedor OIDC usando linkWithPopup() ou linkWithRedirect(): Por exemplo, podemos vincular com uma Conta do Google:

Versão 9 para a Web

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

const auth = getAuth();
linkWithPopup(auth.currentUser, provider).then((result) => {
  // Accounts successfully linked.
  const credential = GoogleAuthProvider.credentialFromResult(result);
  const user = result.user;
  // ...
}).catch((error) => {
  // Handle Errors here.
  // ...
});
auth_link_with_popup.js

Versão 8 para a Web

auth.currentUser.linkWithPopup(provider).then((result) => {
  // Accounts successfully linked.
  var credential = result.credential;
  var user = result.user;
  // ...
}).catch((error) => {
  // Handle Errors here.
  // ...
});
link-multiple-accounts.js

A seguir