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
});
}
}
Adaptación del onIdentification para ejecución en angular para evitar eventos multiples
En el caso de que el iframe de MFE se ejecute en una aplicación Angular con varios nodos, es necesario controlar el funcionamiento correcto, dentro del método JS onIdentification definido para evitar los múltiples eventos.
Para dicho control, se puede utilizar un campo que haga de flag, el cual al cargar inicialmente la aplicación estará a true, una vez el usuario se identifique correctamente y el flujo entre al método JS onIdentification definido, se controla dicho flag, si es true, este se pasa a false y se continua con la lógica propia de la aplicación para el acceso correcto del usuario. Si se produce un error al identificarse se vuelve a poner a true para que el usuario vuelva a identificarse en el iframe.
// Por defecto en el componente se permite identificar la primera vez
allowOnIdentification = true;
public onIdentification(operation: any): void {
if (this.allowOnIdentification) {
this.allowOnIdentification = false;
service.loginEnLaAplicacion(operation).then(() => {
// Lógica de aplicación
}.catch(() => {
this.allowOnIdentification = true;
// Lógica de aplicación
});
}
}
