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
- 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.
-
In the Google Cloud console, on the project selector page, select or create a Google Cloud project.
-
Verifique se a cobrança está ativada para o seu projeto do Google Cloud.
-
In the Google Cloud console, on the project selector page, select or create a Google Cloud project.
-
Verifique se a cobrança está ativada para o seu projeto do Google Cloud.
- 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
Acesse a página Provedores de identidade no console do Google Cloud.
Acessar a página "Provedores do Identity Platform"Clique em Adicionar um provedor e selecione OpenID Connect na lista.
Fluxo do código de autorização
Insira os seguintes detalhes para ativar o fluxo de código de autorização:
Selecione Fluxo de código na seção Escolher tipo de concessão.
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.
).O ID do cliente do provedor.
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.A chave secreta do cliente do provedor.
Adicione seu app à lista de Domínios autorizados. Por exemplo, se o URL de login do seu aplicativo for
https://example.com/login
, adicioneexample.com
.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
.Clique em Save.
Fluxo implícito
Insira os seguintes detalhes para ativar o fluxo implícito:
Selecione Fluxo implícito na seção Escolher tipo de concessão.
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.
).O ID do cliente do provedor.
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.
Adicione seu app à lista de Domínios autorizados. Por exemplo, se o URL de login do seu aplicativo for
https://example.com/login
, adicioneexample.com
.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
.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:
Crie uma instância
OAuthProvider
com o ID do provedor configurado na seção anterior. O ID do provedor precisa começar comoidc.
.Versão 9 para a Web
import { OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider("oidc.myProvider");
Versão 8 para a Web
const provider = new firebase.auth.OAuthProvider('oidc.myProvider');
Inicie o fluxo de login. É possível usar um pop-up ou um redirecionamento.
Pop-up
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. // ... });
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. });
Redirecionamento
Para redirecionar a 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);
Versão 8 para a Web
firebase.auth().signInWithRedirect(provider).catch((error) => { // Handle error. });
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. // ... });
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. // ... });
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:
Inicialize uma instância
OAuthProvider
com o ID do provedor que você configurou na seção anterior. O ID do provedor precisa começar comoidc.
. Em seguida, crie umOAuthCredential
e chamesignInWithCredential()
para fazer o 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. // ... });
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. // ... });
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. // ... });
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. // ... });
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