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.

   Note: If you don't plan to keep the resources that you create in this procedure, create a project instead of selecting an existing project. After you finish these steps, you can delete the project, removing all resources associated with the 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.

   Note: If you don't plan to keep the resources that you create in this procedure, create a project instead of selecting an existing project. After you finish these steps, you can delete the project, removing all resources associated with the 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.

      Observação: se o provedor OIDC não estiver em conformidade com a especificação OIDC para descoberta, ele não funcionará com o Identity Platform.

   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.

      Observação: se o provedor OIDC não estiver em conformidade com a especificação OIDC para descoberta, ele não funcionará com o Identity Platform.

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

   Saiba mais sobre a API modular da Web que oferece suporte a tree shaking e o upgrade da API com namespace.

   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.

   Pop-up

   Versão 9 para a Web

   Saiba mais sobre a API modular da Web que oferece suporte a tree shaking e o upgrade da API com namespace.

   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

   Saiba mais sobre a API modular da Web que oferece suporte a tree shaking e o upgrade da API com namespace.

   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

   Saiba mais sobre a API modular da Web que oferece suporte a tree shaking e o upgrade da API com namespace.

   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

   Saiba mais sobre a API modular da Web que oferece suporte a tree shaking e o upgrade da API com namespace.

   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

Saiba mais sobre a API modular da Web que oferece suporte a tree shaking e o upgrade da API com namespace.

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

• Como fazer login de usuários com SAML
• Como mostrar um domínio personalizado durante o login
• Como gerenciar provedores OIDC e SAML de maneira programática