Se han detectado problemas cuando la integración se realiza desde una aplicación en Angular, como la realización de varias llamadas simultaneas a MFE.
Configuración de proxy para redirección de peticiones POST de MFE
Tras realizar el login, MFE realiza una petición POST a la URL de retorno que se le ha proporcionado. Puesto que al servir aplicaciones angular en el entorno local (En los entornos productivos, esta redirección viene configurada en el servidor - apache2, nginx…) sólo se admiten peticiones GET es necesario configurar un proxy para redirigir estas peticiones. Para ello es necesario:
Crear un fichero con nombre proxy.conf.js en la raíz del proyecto adaptando el siguiente contenido:
var PROXY_CONFIG = {
"/acceso": { // URL de retorno para el login
"target": "http://localhost:4200",
"method": "GET",
"secure": false,
"changeOrigin": false,
"bypass": function (req, res, proxyOptions) {
if (req.method !== "POST") {
return "/index.html";
} else {
console.log("PROXY: Peticion de tipo: " + req.method + ", url: " + req.url + ". Cambio a petición GET.");
}
}
},
"/acceso/cerrar-sesion": { // URL de retorno para el logout
"target": "http://localhost:4200",
"method": "GET",
"secure": false,
"changeOrigin": false,
"bypass": function (req, res, proxyOptions) {
if (req.method !== "POST") {
return "/index.html";
} else {
console.log("PROXY: Peticion de tipo: " + req.method + ", url: " + req.url + ". Cambio a petición GET.");
}
}
}
};
module.exports = PROXY_CONFIG;
- Incluirlo como configuración de del proyecto en en angular.json a la hora de desplegarlo en local:
{
...
"projects": {
...
"architect": {
...
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"proxyConfig": "proxy.conf.js",
...
},
...
Adaptación del onIdentification para ejecución en angular
Tras haber realizado un login correcto en MFE y haber vuelto de la redirección, MFE espera que la aplicación tenga un método JS onIdentification definido. Para realizar una mejor gestión de este método es posible trasladar esta llamada al contexto de un componente angular siguiendo la siguiente estructura:
export class MfeComponent {
constructor(private zone: NgZone) {
(window as any).onIdentification = this.onIdentification.bind(this);
}
/*
* Método que se ejecuta una vez realizada la identificación correctamente en MFE.
* Recibe el parámetro operation que incluye del usuario como nifCif, nombre, apellidos,
* tipo de certificado (de persona físcica o jurídica)
*/
public onIdentification(operation: any): void {
this.zone.run( () => {
// Gestionar aquí la identificación dentro del contexto de angular
});
}
}
