Comprensión del flujo

Aunque es el estándar actual de la industria para SPA, el grupo de trabajo OAuth ya no recomienda el uso del flujo implícito debido a varios problemas de seguridad. Siguiendo su consejo, App ID está configurado para utilizar el flujo de Código de Autorización con PKCE.

1. Un usuario intenta iniciar una sesión en la aplicación de una sola página.
2. El SDK de App ID crea un verificador de código para la solicitud de autorización, que es la versión en texto sin formato de cambio de código. Junto con la solicitud de autorización, el cliente envía el cambio de código y el método de cambio que se utiliza para codificar el cambio.
3. App ID inicia el flujo de autenticación en una ventana nueva.
4. El usuario elige un proveedor de identidad para autenticarse con y completa el proceso de inicio de sesión.
5. El SDK de App ID de la aplicación recibe el código de concesión
6. A continuación, el SDK realiza una solicitud XHR al punto final de señal de App ID junto con el código de concesión y el verificador de código para obtener señales de acceso y de identidad.

¿Utiliza SSO para Cloud Directory? Puede utilizar el SDK de cliente de App ID para obtener automáticamente un nuevo par de señales sin que sea necesario que el usuario inicie sesión explícitamente. Para obtener más información, consulte Inicio de sesión silencioso.

Antes de empezar

Antes de empezar, asegúrese de que dispone de los siguientes requisitos previos:

• Una instancia del servicio App ID.
• Los URI de redirección establecidos en el panel de control del servicio App ID.
• Una aplicación de una sola página. Si no tiene una y desea probar el flujo, intente descargar la aplicación de ejemplo desde la página de visión general del panel de control de App ID.

Configuración del SDK de JavaScript

Para instalar el SDK en la aplicación, siga los pasos siguientes como guía.

1. En el indicador de mandatos, cambie al directorio que contiene la aplicación.

2. Instale el servicio App ID mediante NPM o enlazando la CDN en su archivo HTML principal.

   • Para utilizar NPM, ejecute el siguiente mandato.

     npm install ibmcloud-appid-js
     

   • Para añadir la CDN, añada el siguiente enlace a su archivo HTML principal.

     <script src="https://cdn.appid.cloud.ibm.com/appid-0.3.0.min.js"></script>
     

3. Añada el ID de cliente y el punto final de descubrimiento a la app para inicializar el SDK.

   const appID = new AppID();
   await appID.init({
      clientId: '<spaClientID>',
      discoveryEndpoint: '<wellKnownEndpoint>'
   });
   

4. En el código de la aplicación, después de la configuración del botón de inicio de sesión, añada una llamada a signin. Se abre una ventana emergente en la que se solicita al usuario que especifique sus credenciales. Después de autenticarse correctamente, la pantalla se cierra y el usuario se autentica.

   const tokens = await appID.signin();
   

Configuración de un inicio de sesión silencioso

Cuando SSO for Cloud Directory está habilitado, puede obtener automáticamente nuevas señales para un usuario sin que tengan que volverse a autenticar mediante un inicio de sesión silencioso. Para habilitar el inicio de sesión silencioso, siga los pasos siguientes como guía.

Renueve las señales no se devuelven en el flujo SPA.

1. En el panel de control de App ID, vaya a Cloud Directory > Inicio de sesión único.

2. Cambie Habilitar inicio de sesión único a Habilitado.

3. Pulse Guardar.

4. Añada el código siguiente a la aplicación. Asegúrese de configurar la aplicación de modo que muestre el botón de inicio de sesión si el inicio de sesión silencioso falla.

   const tokens = await appID.silentSignin();
   if (!tokens) {
      document.getElementById('login').addEventListener('click', async () => {
      const tokens = await appID.signin();
      });
   }