Guía de aprendizaje en vídeo

Consulte el vídeo siguiente para ver cómo utilizar App ID para proteger una aplicación web Node.js simple. Toda la información que se cubre en el video también se puede encontrar por escrito en esta página.

¿No tiene una app con la que poder probar el flujo? ¡No hay problema! App ID proporciona una app de ejemplo web simple Node.js.

Antes de empezar

Antes de empezar con App ID en las aplicaciones web de Node.js, debe tener los requisitos previos siguientes.

• Una instancia del servicio App ID
• NPM versión 4 +
• Node versión 6 +

Este SDK utiliza el paquete log4js para el registro. De forma predeterminada, el nivel de registro se establece en info. Para crear su propia configuración de registro, añada un archivo log4js.json y establezca la variable de entorno process.env.LOG4JS_CONFIG en el archivo JSON.

Registrar el URI de redirección

Un URI de redirección es el punto final de devolución de llamada de la app. Durante el flujo de inicio de sesión, App ID valida los URI antes de que se permita a los clientes participar en el flujo de trabajo de autorización, lo que ayuda a evitar ataques de phishing y filtraciones de código. Al registrar el URI, está diciendo a App ID que el URI es de confianza y que es correcto redirigir a los usuarios.

1. Pulse Gestionar autenticaciones > Valores de autenticación.

2. En el campo Añadir URI de redirección web, escriba el URI. Cada URI debe empezar con http:// o https:// y debe incluir la vía de acceso completa, incluidos los parámetros de consulta para que la redirección sea satisfactoria.

3. Pulse el símbolo + en el recuadro Añadir URI de redirección web.

4. Repita los pasos uno a tres hasta que todos los URI posibles se añadan a la lista.

Obtener las credenciales

Puede obtener sus credenciales de dos maneras.

• Vaya al separador Aplicaciones del panel de control de App ID. Si aún no dispone de una, puede pulsar Añadir aplicación para crear una nueva.

• Realizando una solicitud POST al punto final /management/v4/<tenantID>/applications.

   Request format:
  
   ```sh {: codeblock}
   curl -X POST \  https://us-south.appid.cloud.ibm.com/management/v4/39a37f57-a227-4bfe-a044-93b6e6060b61/applications/ \
   -H 'Content-Type: application/json' \
   -H 'Authorization: Bearer <IAMToken>' \
   -d '{"name": "ApplicationName"}'
   ```
   Example response:
  
   ```json {: screen}
   {
     "clientId": "xxxxx-34a4-4c5e-b34d-d12cc811c86d",
     "tenantId": "xxxxx-9b1f-433e-9d46-0a5521f2b1c4",
     "secret": "ZDk5YWZkYmYt*******",
     "name": "app1",
     "oAuthServerUrl": "https://us-south.appid.cloud.ibm.com/oauth/v4/xxxxx-9b1f-433e-9d46-0a5521f2b1c4",
     "profilesUrl": "https://us-south.appid.cloud.ibm.com",
     "discoveryEndpoint": "https://us-south.appid.cloud.ibm.com/oauth/v4/xxxxxx-9b1f-433e-9d46-0a5521f2b1c4/.well-known/openid-configuration"
   }
   ```
  

Inicializar el SDK

La forma más fácil de trabajar con App ID es utilizar el SDK de Node.JS.

1. Utilizando la línea de mandatos, vaya al directorio que contiene la aplicación Node.js.

2. Instale los siguientes requisitos de NPM.

   npm install --save express express-session passport log4js pug
   

3. Instale el servicio App ID.

   npm install --save ibmcloud-appid
   

4. Añada los requisitos siguientes al archivo server.js.

   const express = require('express'); 								// https://www.npmjs.com/package/express
   const log4js = require('log4js');                                   // https://www.npmjs.com/package/log4js
   const session = require('express-session');							// https://www.npmjs.com/package/express-session
   const passport = require('passport');								// https://www.npmjs.com/package/passport
   const WebAppStrategy = require('ibmcloud-appid').WebAppStrategy;	// https://www.npmjs.com/package/ibmcloud-appid
   

5. Configure la aplicación para utilizar el middleware de sesión exprés utilizando las credenciales que ha obtenido en el paso 1. Puede elegir formatear el URI de redirección de una de dos maneras. Manualmente, utilizando un nuevo WebAppStrategy({redirectUri: "...."}) o estableciendo el valor como una variable de entorno tal como se muestra en el código de ejemplo.

   const app = express();
   const logger = log4js.getLogger("testApp");
   app.use(session({
      secret: '123456',
      resave: true,
      saveUninitialized: true
   }));
   app.use(passport.initialize());
   app.use(passport.session());
   passport.serializeUser((user, cb) => cb(null, user));
   passport.deserializeUser((user, cb) => cb(null, user));
   passport.use(new WebAppStrategy({
      tenantId: "<tenantID>",
      clientId: "<clientID>",
      secret: "<secret>",
      oauthServerUrl: "<oauthServerURL>",
      redirectUri: "<redirectURI>"
   }));
   

   Debe configurar el middleware con el almacenamiento de sesión adecuado para entornos de producción. Para más información, consulte la documentación de express.js.

Proteger la aplicación

Ahora que tiene App ID instalado, está preparado para proteger la aplicación. Puede elegir proteger toda la aplicación o sólo recursos específicos mediante la definición de una estrategia de app web.

1. Configure el punto final de devolución de llamada. La devolución de llamada finaliza el proceso de autorización recuperando las señales de acceso y de identidad de App ID y redirigiendo al usuario a una de las ubicaciones siguientes:

   • El URL original de la solicitud que ha desencadenado la autenticación, como haya persistido en la sesión HTTP como WebAppStrategy.ORIGINAL_URL.
   • Una redirección especificada en caso de autenticación satisfactoria.
   • La raíz de aplicación (/), tal como se muestra en el paso siguiente.

   app.get(CALLBACK_URL, passport.authenticate(WebAppStrategy.STRATEGY_NAME));
   

2. Establezca un punto final de inicio de sesión que siempre redirija un navegador al widget de inicio de sesión. Asegúrese de añadir una opción de redirección correcta para que no termine en un bucle de autenticación interminable.

   app.get('/appid/login', passport.authenticate(WebAppStrategy.STRATEGY_NAME, {
      successRedirect: '/',
      forceLogin: true
   }));
   

Personalizar la app

Puede extraer información facilitada por los proveedores de identidad para personalizar la experiencia de su app.

1. Configure la aplicación para obtener información de usuario. protected es una variable de marcador que puede cambiar para que coincida con el punto final de la aplicación.

   app.get("/protected_resource", passport.authenticate(WebAppStrategy.STRATEGY_NAME), function(req, res){
      res.json(req.user);
   });
   

   Por ejemplo, en la aplicación de ejemplo, puede ver cómo obtener el nombre de usuario para personalizar la aplicación.

   app.get('/api/user', (req, res) => {
      // console.log(req.session[WebAppStrategy.AUTH_CONTEXT]);
      res.json({
         user: {
               name: req.user.name
         }
      });
   });
   

Probar la configuración

Para probar la configuración de la autorización, navegue hasta el URL en el que está a la escucha el servidor, tal como se define en la aplicación. Intente iniciar la sesión e intente cerrar la sesión. Asegúrese de que la configuración funciona según lo esperado.

Cuando esté listo para pasar al paso siguiente, puede intentar habilitar la autenticación de multifactores para el directorio en la nube o añadir atributos personalizados para personalizar más la app.