Guía de Configuración de Google OAuth

Propósito del Documento

Describir los pasos de configuración necesarios para configurar App Builder utilizar Google como proveedor de seguridad externo OIDC/OAuth 2.0 para la autenticación de usuarios.

Introducción

La configuración de la autenticación externa requiere la configuración tanto del proveedor de identidad como del App Builder instancia. En ambos casos se requieren derechos administrativos.

Pasos en App Builder

Crear un Proveedor de Seguridad

1. Inicia sesión App Builder como administrador
2. Vaya a IDE > Proveedores de seguridad
3. En la sección Autenticación de usuario, haga clic en + Autenticación de usuario para agregar un nuevo proveedor de seguridad

4. Complete los siguientes valores:

   • Nombre: nombre breve y descriptivo para el proveedor de seguridad. Lo ideal es evitar los espacios. Esto se convierte en parte de la App Builder ruta de autenticación.
   • Tipo: Autenticación externa > OAuth
   • Prioridad: acepta la sugerencia predeterminada o actualiza según tus preferencias

   • Habilitado: Marcar

     • Tipo de autenticación: OAuth
       • Concesión OAuth: Código de autorización

   • Autenticación de cliente OAuth: Básica

   • Autenticación de recurso OAuth: Portador
   • Propietario del token: Usuario
   • Redireccionamiento en desafío: Marcar
   • Mostrar en el formulario de inicio de sesión: Marcar
   • Aprovisionamiento de usuarios: Marcar
   • Reclamos de la tienda: Marcar. Esto es importante durante la configuración inicial y la resolución de problemas, pero se puede eliminar más adelante si se desea.

5. Haga clic en Guardar

Pasos en Google Workspace/Google Cloud Platform

Crear un Nuevo Proyecto

1. Vaya a la página Administrar recursos en la Google Cloud Console
2. Inicia sesión como administrador si se te solicita
3. En la lista desplegable Seleccionar organización en la parte superior de la página, selecciona la organización en la que deseas crear un proyecto. Si eres un usuario de prueba gratuita, omite este paso, ya que no corresponde.
4. Haz clic en Crear proyecto
5. En la ventana Nuevo proyecto que aparece, ingresa un nombre de proyecto. El nombre de un proyecto solo puede contener letras, números, comillas simples, guiones, espacios o signos de exclamación, y debe tener entre 4 y 30 caracteres. Debe ser un nombre descriptivo y único que identifique el proyecto. Por ejemplo: autentificación-Vinyl
6. Selecciona la organización principal en el cuadro Organización
7. Opcionalmente, selecciona una carpeta en el cuadro Ubicación. Este recurso será el principal jerárquico del nuevo proyecto.
8. Haga clic en Crear

Para obtener más información sobre cómo crear proyectos, consulte la documentación de Google disponible en: https://cloud.google.com/resource-manager/docs/creating-managing-projects

Configurar la Pantalla de Consentimiento de OAuth y Crear Credenciales de API

1. Una vez que haya creado el proyecto, abra la página Credenciales en la consola de API de Google. Inicio > APIs y servicios > Credenciales
2. Verifique el nombre del proyecto que aparece en la esquina superior izquierda cerca del logotipo para asegurarse de que está utilizando el proyecto correcto. Haga clic en la flecha desplegable para cambiar de proyecto, si es necesario.
3. Haga clic en Crear credenciales → ID de cliente OAuth

4. A menos que haya configurado previamente una pantalla de consentimiento, se le indicará que primero configure su pantalla de consentimiento. La pantalla de consentimiento se presentará a los usuarios finales cuando accedan por primera vez a la aplicación (App Builder) utilizando sus credenciales de Google y les solicitará que acepten ese acceso a su cuenta de Google. Si ya ha configurado una pantalla de consentimiento y alcances, salte al paso 29.

   

   Ejemplo de configuración de la pantalla de consentimiento

5. Haga clic en Configurar pantalla de consentimiento

6. Seleccione Interno para Tipo de usuario y haga clic en Crear
7. Complete la sección Información de la aplicación de la siguiente manera:
8. Nombre de la aplicación: Ingrese el nombre de la aplicación personalizada. Por ejemplo: App Builder instancia. Normalmente, se especificaría Dev, QA o Prod, o el propósito de la instancia, si es diferente.
9. Correo de soporte al usuario: complete con la dirección de correo de un administrador o una dirección de correo de un grupo.
10. Logotipo de la aplicación: opcionalmente, cargue un archivo para usarlo como logotipo
11. Complete la sección Dominio de la aplicación con la URL de la página de inicio de la aplicación y un enlace a la política de privacidad y/o los términos de servicio de su organización.
12. En Dominios autorizados, agregue el nombre de dominio que App Builder la instancia es parte de. Puede ser su propio dominio o alojar. Agregue varios dominios si corresponde.
13. Ingrese una dirección de correo de soporte para Información de contacto del desarrollador
14. Haga clic en Guardar y Continuar

15. En la pantalla Ámbitos identifique la información que se solicita sobre el usuario, App Builder. Haga clic en Agregar ámbitos y seleccione los tres ámbitos que se muestran en la siguiente captura de pantalla.

    

    Ejemplo de configuración de ámbitos

16. Haga clic en Actualizar

    Nota

    Tenga en cuenta que estos se consideran "alcances no sensibles". No se requieren otros alcances App Builder.

17. Haga clic en Guardar y Continuar

18. Revise la página de resumen y haga clic en Volver al panel
19. Haga clic en Crear credenciales → ID de cliente de OAuth
20. En Tipo de aplicación, seleccione Aplicación web
21. En Nombre, escriba una etiqueta descriptiva que identifique la aplicación. Este valor no se utiliza en ningún otro lugar. Por ejemplo: App Builder instancia. Normalmente, se especificaría Dev, QA o Prod, o el propósito de la instancia, si es diferente.
22. En Orígenes de JavaScript autorizados, proporcione el URI que representa el FQDN (nombre de dominio completo) de su App Builder instancia. Tenga en cuenta que esto no debe incluir ninguna información de ruta. Por ejemplo: https://example.zudy.com

23. La pantalla completa debería verse similar a este ejemplo:

    

    Ejemplo de configuración de ID de cliente de OAuth

24. Debería aparecer una ventana emergente con sus credenciales de OAuth. Estas credenciales deben mantenerse en secreto y tendrán un formato similar al de los ejemplos ficticios que aparecen a continuación. Deje esta ventana emergente abierta para los siguientes pasos de configuración.

    • Ejemplos:
    • Su ID de cliente: 825669012735-hd1oct8l1yeysoslrvtmf6b4gqkl12om.apps.googleusercontent.com
    • Tu secreto de cliente: CRZEXT-zd_Qa_MCZ3rArp5hkRD3B16PPDLN

25. Con esto finalizan los pasos en Google Workspace/Google Cloud Platform.

Pasos en App Builder

Configurar las Propiedades del Proveedor de Seguridad y los Tipos de Reclamaciones

1. Regrese a la página de configuración del proveedor de servicios creado en los pasos 1 a 5.

2. En la sección Extremos, haga clic en + Extremo y Guardar las siguientes 3 propiedades como se especifica a continuación:

   • AuthorizationEndpoint: utilice el siguiente valor: https://accounts.google.com/o/oauth2/v2/auth
     • Nota: esto no es un ejemplo, es universal para la configuración de Google OAuth v2
   • TokenEndpoint: use el siguiente valor: https://www.googleapis.com/oauth2/v4/token
   • UserInfoEndpoint: utilice el siguiente valor: https://openidconnect.googleapis.com/v1/userinfo

3. En la sección Credenciales, haga clic en + Credencial y Guardar las siguientes propiedades como se especifica a continuación:

   • Tipo: Cliente
   • Nombre de usuario: use el ID de cliente de la sección anterior, paso 32
   • Contraseña: use el Secreto de cliente de la sección anterior, paso 32

4. En la sección Propiedades, haga clic en + Propiedad y Guardar las siguientes propiedades:

   • Ámbitos: use los 3 valores de ámbito que se muestran a continuación. Separe cada cadena con un espacio:
     • openid
     • https://www.googleapis.com/auth/userinfo.email
     • https://www.googleapis.com/auth/userinfo.profile

5. En la sección Reclamos, haga clic en +Reclamo y guarde los siguientes tipos de reclamo:

   • Identificador: correo (en minúsculas, sin espacios)
   • Uso: Nombre
   • Nombre: etiqueta descriptiva. Por ejemplo: Nombre

6. Haga clic en Guardar

7. Haga clic en Crear

   • Identificador: correo
   • Uso: Dirección de correo electrónico
   • Nombre: etiqueta descriptiva. Por ejemplo: Dirección de Correo

8. Haga clic en Guardar

   Nota

   El tipo de reclamo de uso de la dirección de correo electrónico es opcional, pero garantizará que el atributo de dirección de Correo App Builder los datos del usuario se completarán cuando éste inicie sesión. App Builder utilizando el proveedor de autenticación externo.

9. Esto completa los pasos de configuración en App Builder

Prueba

En este punto, la configuración está lista para probarse. Se recomienda que todas las pruebas se realicen desde nuevas ventanas del navegador en modo incógnito o privado, o en un navegador alternativo.

Pasos de Prueba

1. Navegue a la página de inicio de sesión de la App Builder instancia y:

   1. Confirme que el nuevo método de autenticación se muestra correctamente en la página de inicio de sesión.
   2. Intente iniciar sesión con el nuevo método de autenticación y revise el resultado. (Esto debe hacerse con un inicio de sesión diferente al que se utilizó para administrar App Builder.)

2. Si se informan errores, revise toda la configuración y confirme que los elementos que se requieren para la coincidencia sean correctos, en particular, confirme que el secreto del cliente y el ID del cliente se copiaron de Google a App Builder correctamente.

3. Si todas las configuraciones están presentes y parecen correctas, pero la autenticación externa aún no funciona, comuníquese con App Builder apoyo.