Para usar identidades externas con Identity-Aware Proxy (IAP), tu aplicación necesita una página de inicio de sesión. IAP redirigirá a los usuarios a esta página para que se autentiquen antes de poder acceder a recursos seguros.
En este artículo se explica cómo crear una página de autenticación con FirebaseUI, una biblioteca de JavaScript de código abierto. FirebaseUI proporciona elementos personalizables que ayudan a reducir el código repetitivo y gestiona los flujos para que los usuarios inicien sesión con una amplia gama de proveedores de identidades.
Para empezar más rápido, deja que IAP aloje la interfaz de usuario por ti. De esta forma, puedes probar las identidades externas sin escribir código adicional. Para casos más avanzados, también puedes crear tu propia página de inicio de sesión desde cero. Esta opción es más compleja, pero te permite controlar por completo el flujo de autenticación y la experiencia de usuario.
Antes de empezar
Habilita las identidades externas y selecciona la opción Proporcionaré mi propia interfaz de usuario durante la configuración.
Instalar las bibliotecas
Instala las bibliotecas gcip-iap, firebase y firebaseui. El módulo gcip-iap abstrae las comunicaciones entre tu aplicación, las compras en la aplicación y Identity Platform. Las bibliotecas firebase y firebaseui proporcionan los componentes básicos de la interfaz de autenticación.
npm install firebase --save
npm install firebaseui --save
npm install gcip-iap --save
Ten en cuenta que el módulo gcip-iap no está disponible mediante CDN.
Después, puedes import los módulos de tus archivos de origen. Usa las importaciones correctas para tu versión del SDK:
gcip-iap v0.1.4 o versiones anteriores
// Import firebase modules.
import * as firebase from "firebase/app";
import "firebase/auth";
// Import firebaseui module.
import * as firebaseui from 'firebaseui'
// Import gcip-iap module.
import * as ciap from 'gcip-iap';
gcip-iap v1.0.0 o versiones posteriores
A partir de la versión v1.0.0, gcip-iap requiere la dependencia de elemento del mismo nivel firebase v9 o una versión posterior.
Si vas a migrar a la versión 1.0.0 de gcip-iap o a una posterior, completa las siguientes acciones:
- Actualiza las versiones de
firebaseyfirebaseuien tu archivopackage.jsona v9.6.0+ y v6.0.0+, respectivamente. - Actualiza las instrucciones de importación de
firebasede la siguiente manera:
// Import firebase modules.
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
// Import firebaseui module.
import * as firebaseui from 'firebaseui'
// Import gcip-iap module.
No es necesario realizar cambios adicionales en el código.
Para ver otras opciones de instalación, como usar versiones localizadas de las bibliotecas, consulta las instrucciones en GitHub.
Configurar tu aplicación
FirebaseUI usa un objeto de configuración que especifica los arrendatarios y los proveedores que se van a usar para la autenticación. Una configuración completa puede ser muy larga y tener un aspecto similar a este:
// The project configuration.
const configs = {
// Configuration for project identified by API key API_KEY1.
API_KEY1: {
authDomain: 'project-id1.firebaseapp.com',
// Decide whether to ask user for identifier to figure out
// what tenant to select or whether to present all the tenants to select from.
displayMode: 'optionFirst', // Or identifierFirst
// The terms of service URL and privacy policy URL for the page
// where the user select tenant or enter email for tenant/provider
// matching.
tosUrl: 'http://localhost/tos',
privacyPolicyUrl: 'http://localhost/privacypolicy',
callbacks: {
// The callback to trigger when the selection tenant page
// or enter email for tenant matching page is shown.
selectTenantUiShown: () => {
// Show title and additional display info.
},
// The callback to trigger when the sign-in page
// is shown.
signInUiShown: (tenantId) => {
// Show tenant title and additional display info.
},
beforeSignInSuccess: (user) => {
// Do additional processing on user before sign-in is
// complete.
return Promise.resolve(user);
}
},
tenants: {
// Tenant configuration for tenant ID tenantId1.
tenantId1: {
// Full label, display name, button color and icon URL of the
// tenant selection button. Only needed if you are
// using the option first option.
fullLabel: 'ACME Portal',
displayName: 'ACME',
buttonColor: '#2F2F2F',
iconUrl: '<icon-url-of-sign-in-button>',
// Sign-in providers enabled for tenantId1.
signInOptions: [
// Microsoft sign-in.
{
provider: 'microsoft.com',
providerName: 'Microsoft',
buttonColor: '#2F2F2F',
iconUrl: '<icon-url-of-sign-in-button>',
loginHintKey: 'login_hint'
},
// Email/password sign-in.
{
provider: 'password',
// Do not require display name on sign up.
requireDisplayName: false,
disableSignUp: {
// Disable user from signing up with email providers.
status: true,
adminEmail: 'admin@example.com',
helpLink: 'https://www.example.com/trouble_signing_in'
}
},
// SAML provider. (multiple SAML providers can be passed)
{
provider: 'saml.my-provider1',
providerName: 'SAML provider',
fullLabel: 'Employee Login',
buttonColor: '#4666FF',
iconUrl: 'https://www.example.com/photos/my_idp/saml.png'
},
],
// If there is only one sign-in provider eligible for the user,
// whether to show the provider selection page.
immediateFederatedRedirect: true,
signInFlow: 'redirect', // Or popup
// The terms of service URL and privacy policy URL for the sign-in page
// specific to each tenant.
tosUrl: 'http://localhost/tenant1/tos',
privacyPolicyUrl: 'http://localhost/tenant1/privacypolicy'
},
// Tenant configuration for tenant ID tenantId2.
tenantId2: {
fullLabel: 'OCP Portal',
displayName: 'OCP',
buttonColor: '#2F2F2F',
iconUrl: '<icon-url-of-sign-in-button>',
// Tenant2 supports a SAML, OIDC and Email/password sign-in.
signInOptions: [
// Email/password sign-in.
{
provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
// Do not require display name on sign up.
requireDisplayName: false
},
// SAML provider. (multiple SAML providers can be passed)
{
provider: 'saml.my-provider2',
providerName: 'SAML provider',
fullLabel: 'Contractor Portal',
buttonColor: '#4666FF',
iconUrl: 'https://www.example.com/photos/my_idp/saml.png'
},
// OIDC provider. (multiple OIDC providers can be passed)
{
provider: 'oidc.my-provider1',
providerName: 'OIDC provider',
buttonColor: '#4666FF',
iconUrl: 'https://www.example.com/photos/my_idp/oidc.png'
},
],
},
// Tenant configuration for tenant ID tenantId3.
tenantId3: {
fullLabel: 'Tenant3 Portal',
displayName: 'Tenant3',
buttonColor: '#007bff',
iconUrl: '<icon-url-of-sign-in-button>',
// Tenant3 supports a Google and Email/password sign-in.
signInOptions: [
// Email/password sign-in.
{
provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
// Do not require display name on sign up.
requireDisplayName: false
},
// Google provider.
{
provider: 'google.com',
scopes: ['scope1', 'scope2', 'https://example.com/scope3'],
loginHintKey: 'login_hint',
customParameters: {
prompt: 'consent',
},
},
],
// Sets the adminRestrictedOperation configuration for providers
// including federated, email/password, email link and phone number.
adminRestrictedOperation: {
status: true,
adminEmail: 'admin@example.com',
helpLink: 'https://www.example.com/trouble_signing_in'
}
},
},
},
};
En las secciones siguientes se explica cómo configurar algunos de los campos específicos de las compras en la aplicación. Para ver ejemplos de cómo definir otros campos, consulta el fragmento de código anterior o la documentación de FirebaseUI en GitHub.
Definir la clave de API
Una configuración típica empieza con una clave de API para tu proyecto:
// The project configuration.
const configs = {
//