Saltar al contenido

Obtenga la aplicación básica de Node.js con el servicio de administración y autorización de confianza (XSUAA)

El objetivo de este tutorial es proteger e implementar una aplicación de lista de productos con autenticación y autorización, de modo que solo los usuarios autenticados con las autorizaciones correctas puedan ver los productos dentro de la aplicación. Los usuarios sin las autorizaciones necesarias pueden iniciar sesión en la aplicación, pero no ven los productos.

La base de este tutorial es la aplicación Node.js que usa el marco explícito y SAPUI5 para mostrar una lista de productos (ver imagen).

XSUAA y el enrutador de aplicaciones

Para proteger esta aplicación de lista de productos, se utilizan dos componentes. Uno se llama servicio XSUAA y el otro se llama enrutador de aplicaciones. El enrutador de la aplicación se utiliza junto con el servicio XSUAA para autenticar a un usuario y dirigirlo a la aplicación segura.

XSUAA desempeña la función de servicio autorizado OAuth, pero el enrutador de la aplicación desempeña la función de cliente OAuth. Además, el enrutador de la aplicación actúa como un punto de entrada central para la aplicación. Para obtener más información, consulte los enlaces al final de este tutorial.


Paso 1: preparar los archivos de la aplicación

Prepara el archivo index.js

Para evitar una llamada directa a su aplicación sin autenticación, es necesario agregar algún código a su aplicación. En nuestro ejemplo, utiliza el centro de autenticación de paso de Node.js y lo configura con la estrategia XSUAA de JST.

  1. Ve a la product-list/myapp carpeta.

  2. Abre el index.js expediente.

  3. Para usar bibliotecas adicionales, agregue las siguientes líneas de código debajo de la línea // secure the direct call to the application

    const passport = require('passport');
    const { JWTStrategy } = require('@sap/xssec');
    const xsenv = require('@sap/xsenv');
    
    // XSUAA Middleware
    passport.use(new JWTStrategy(xsenv.getServices({uaa:{tag:'xsuaa'}}).uaa));
    
    app.use(passport.initialize());
    app.use(passport.authenticate('JWT', { session: false }));
    

    Este código prohíbe las llamadas directas a la aplicación de lista de productos sin un JWT válido.

  4. Para agregar controles de autorización a la lista de productos, reemplace la línea app.get('/products', getProducts); sa index.js archivo con el siguiente código:

    app.get('/products', checkReadScope, getProducts);
    
    // Scope check
    function checkReadScope(req, res, next) {
    	if (req.authInfo.checkLocalScope('read')) {
    		return next();
    	} else {
        	console.log('Missing the expected scope');
        	res.status(403).end('Forbidden');
    	}
    }
    

    El es checkReadScope una función asegura que solo un usuario con las autorizaciones correctas pueda ver los productos.

  5. Guarda el archivo.

Prepare el archivo package.json

Como ahora se utilizan más módulos junto al módulo express, debe agregar las dependencias relevantes a su package.json expediente. En este caso las dependencias del módulo passport, @sap/xsenv y @sap/xssec para agregar.

Si desea utilizar módulos de SAP localmente, debe agregar la configuración npm:

npm config set @sap:registry https://npm.sap.com
  1. Abre el package.json expediente.

  2. Agregue las siguientes dependencias:

    "dependencies": {
      "express": "^4.17.1",
      "@sap/xsenv": "^3.1.0",
      "@sap/xssec": "^3.0.10",
      "passport": "^0.4.1"    
    }
    
  3. Guarda el archivo.

Hecho

Inicie sesión para responder la pregunta

Paso 2: preparar el informador de seguridad de la aplicación

Para usar el servicio XSUAA, un archivo llamado xs-security.json necesario. El archivo puede definir las propiedades del servicio XSUAA, así como varios roles y autorizaciones. Este ejemplo tiene una plantilla de roles y una colección de roles con Visor de lista de productos rol, que permite al usuario ver los productos más tarde.

  1. Agregar una carpeta llamada security hacer product-list carpeta.

  2. Dentro de la carpeta, cree un archivo llamado xs-security.json.

  3. Agrega el siguiente contenido:

    {
    	"xsappname": "product-list",
    	"tenant-mode": "dedicated",
    	"scopes": [
    		{
    			"name": "$XSAPPNAME.read",
    			"description": "With this scope, USER can read products."
    		}
    	],
    
    	"role-templates": [
    		{
    			"name": "Viewer",
    			"description": "Role to get the list of products",
    			"scope-references": [
    				"$XSAPPNAME.read"
    			]
    		}
    	],
    	"role-collections": [
    		{
    			"name": "ProductListViewer",
    			"description": "Product List Viewer",
    			"role-template-references": [
    				"$XSAPPNAME.Viewer"
    			]
    		}
    	]
    }
    

    Esto crea una colección de roles con una plantilla de rol y un rol con alcance de lectura, para que un usuario con este rol pueda ver los productos.

  4. Guarda el archivo

Para aprender más sobre estos xs-security.json archivo, consulte los enlaces al final de este tutorial.

Paso 3: preparar los archivos de licencia

El conector le permitirá crear una ruta segura con su aplicación.

  1. Agregar una carpeta llamada approuter hacer product-list carpeta.

  2. Dentro de esa carpeta crea un archivo llamado package.json.

  3. Agrega el siguiente contenido:

    {
        "name": "approuter",
        "dependencies": {
            "@sap/approuter": "^9.0.2"
        },
        "scripts": {
            "start": "node node_modules/@sap/approuter/approuter.js"
        }
    }
    
  4. Guarda el archivo.
  5. En la misma carpeta, cree un archivo llamado xs-app.json.

  6. Agregue el siguiente contenido a ese archivo:

    {
      "routes": [{
        "source": "^/products",
        "target": "/",
        "destination": "products-destination"
      }]
    }
    

    Esto creará un destino conocido products-destination. El destino se hace referencia más adelante en el manifest.yml.

  7. Guarda el archivo.

    Para aprender más sobre estos xs-app.json archivo, consulte los enlaces al final de este tutorial.

Hecho

Inicie sesión para responder la pregunta

Paso 4: Mueva el contenido estático al enrutador de la aplicación

Por razones de rendimiento, es mejor colocar las imágenes de la aplicación en una carpeta de recursos estática con el enrutador de la aplicación.

  1. Ve a la approuter carpeta.

  2. Agregar una carpeta llamada resources.

  3. Mueve el images carpeta de myapp/static/ en el approuter/resources carpeta.

Al final de estos pasos, la estructura de sus carpetas debería verse así:

product-list
├── approuter
  ├──resources
    ├── images
      ├── HT-1000.jpg
      ├── HT-1010.jpg
      ├── HT-1030.jpg
  ├── package.json
  ├──  xs-app.json
├── myapp
    ├── lib
        ├── repository.js
        ├── products.json
    ├── static
        ├── index.html
    ├── index.js  
    ├── package.json
├── security
    ├── xs-security.json
├── manifest.yaml    

Hecho

Inicie sesión para responder la pregunta

Paso 5: actualice el archivo de demostración

En el archivo de demostración, debe definir un nombre de host para su aplicación y agregar un destino. El archivo de demostración se utiliza para adjuntar el ejemplo del servicio XSUAA a su aplicación.

Los pasos muestran de forma incremental los parámetros y valores que deben agregarse. Para evitar errores de sangría, solo puede copiar el código completo al final.

  1. Ve a la product-list carpeta.

  2. Abre el archivo manifest.yaml.

  3. Dar al parámetro un nombre de host específico route. La ruta debe ser única en todo el paisaje de Cloud Foundry, así que asegúrese de agregar una sección aleatoria a la ruta, como sus iniciales y fecha de nacimiento, como product-list-ap25 y approuter-product-list-ap25. También necesita la forma de configurar un destino más adelante.

    applications:
    # Product List Application
    - name: product-list
      instances: 1
      memory: 128M
      routes:
        - route: product-list-ap25.cfapps.eu10.hana.ondemand.com
      path: myapp
      buildpacks:
        - nodejs_buildpack  
      timeout: 180
    
  4. Adjunte el enlace al servicio XSUAA con su solicitud.

      ...
      services:
        - xsuaa-service-tutorial
    
  5. Agregue detalles de configuración al músico:

    applications:
    ...
    
    # Application Router
    - name: approuter
      routes:
        - route: approuter-product-list-ap25.cfapps.eu10.hana.ondemand.com
      path: approuter
      buildpacks:
        - nodejs_buildpack
      memory: 128M
    
  6. Agrega un destino al músico.

    # Application Router
    ...
      env:
        destinations: >
          [
            {"name":"products-destination",
             "url":"https://product-list-ap25.cfapps.eu10.hana.ondemand.com",
             "forwardAuthToken": true}
          ]
    

    El es name el parámetro es el mismo que la definición anterior en el archivo xs-app.json. un url un parámetro que da como resultado un nombre de host para las aplicaciones y una región para el panorama de Cloud Foundry (https://<hostname>.cfapps.<region>.hana.ondemand.com). El es forwardAuthToken el parámetro realmente establecido asegura que el solicitante reenvía la señal JWT al destino.

  7. Agregue las conexiones al servicio XSUAA al aprobador.

    ...
      services:
        - xsuaa-service-tutorial
    
  8. Guarda el archivo.

Cuando haya completado los pasos, su archivo manifest.yml debería aparecer:

applications:
# Application
- name: product-list
  instances: 1
  memory: 128M
  routes:
    - route: product-list-ap25.cfapps.eu10.hana.ondemand.com
  path: myapp
  buildpacks:
    - nodejs_buildpack  
  timeout: 180
  services:
    - xsuaa-service-tutorial

# Application Router
- name: approuter
  routes:
    - route: approuter-product-list-ap25.cfapps.eu10.hana.ondemand.com
  path: approuter
  buildpacks:
    - nodejs_buildpack
  memory: 128M
  services:
    - xsuaa-service-tutorial
  env:
    destinations: >
      [
        {"name":"products-destination",
         "url":"https://product-list-ap25.cfapps.eu10.hana.ondemand.com",
         "forwardAuthToken": true}
      ]

Hecho

Inicie sesión para responder la pregunta

Paso 6: actualice el archivo index.html

Porque está llamando a la lista de productos a través del apputer con /products necesita hacer un pequeño cambio dentro del index.html expediente.

  1. Ve a la product-list/myapp/static carpeta.

  2. Reemplace la línea 24 con la index.html archivo con el siguiente código.

    var productsUrl = "/products/products"; //  contains path mapping which is specified in xs-app.json
    
  3. Guarda el archivo.

Hecho

Inicie sesión para responder la pregunta

Paso 7: crear el ejemplo de servicio XSUAA

Antes de poder usar su aplicación, debe crear el ejemplo de servicio para XSUAA.

  1. Inicie sesión en su cuenta de Foundry Cloud con la CLI de Cloud Foundry.

  2. Ve a la product-list carpeta.

  3. Cree la instancia de servicio XSUAA con el xs-security.json archivo de informes de seguridad.

    cf create-service xsuaa application xsuaa-service-tutorial -c security/xs-security.json
    
  4. Implemente la aplicación.

    cf push
    

Hecho

Inicie sesión para responder la pregunta

Paso 8: Llame a su aplicación desde su ruta segura

Su aplicación se define de dos formas manifest.yml. La ruta directa a la aplicación debería devolver un mensaje de error que diga unauthorized (porque aún no tiene un JWT válido). La ruta segura redirige a través del habilitador a una pantalla de inicio de sesión. Después de iniciar sesión, la aplicación se abre pero muestra el mensaje no data. Para ver los detalles del producto, debe asignar la colección de roles a su usuario con las autorizaciones necesarias.

  1. Primero asegúrese de que su aplicación no pueda ser alcanzada por su URL directa:

    https://product-list-ap25.cfapps.eu10.hana.ondemand.com

    Si todo funciona correctamente, leerá un mensaje de error. unauthorized.

  2. Acceda a su aplicación con una ruta segura para el enrutador de su aplicación:

    https://approuter-product-list-ap25.cfapps.eu10.hana.ondemand.com/products

  3. Ingrese el correo electrónico y la contraseña de su cuenta de prueba.

    Debería no data mensaje. Esto se debe a que aún no ha asignado la función para ver los productos. Hará esto en el siguiente paso.

Hecho

Inicie sesión para responder la pregunta

Paso 9: Traiga la colección de roles

Entregue la colección de roles a un usuario donde el rol sea necesario para ver los productos en la lista de productos.

  1. Abra la cabina de SAP BTP.

  2. Vaya a su subcuenta.

  3. Selecciona el Seguridad pestaña y seleccione Configuración de confianza.

  4. Escoger Proveedor de ID predeterminado.

  5. Ingrese su dirección de correo electrónico y seleccione Mostrar tareas.

  6. Escoger Asignar una colección de roles.

  7. Selecciona el ProductListViewer reunión de roles.

  8. Vuelva a llamar a la URL del compilador (es posible que haya eliminado previamente sus cookies / caché).

    https://approuter-product-list-ap25.cfapps.eu10.hana.ondemand.com/products

    La aplicación ahora le mostrará los productos.

Hecho

Inicie sesión para responder la pregunta

Solución de problemas

Mensaje de error: el nombre de host de su aplicación ya está en uso

Para resolver este error, agregue el manifest.yml archivo y cambiar el route parámetro de aplicación de lista de productos o el route el parámetro del aprobador (dependiendo del nombre de host que ya esté tomado). Si cambia el parámetro de la aplicación de lista de productos, asegúrese de url también parámetro sobre destinos.

Recursos