En el tutorial anterior hemos comprobado como embeber un dossier en un documento HTML, pero lo hemos realizado con un servidor público y sin ningún tipo de autenticación. En el siguiente ejemplo veremos cómo configurarlo para indicarle un usuario y contraseña.
Punto de partida
Para comenzar, en este ejemplo vamos a partir de un documento HTML ya creado que tiene el siguiente código:
<html>
<head>
<title>Dossier Embebido</title>
<meta charset="utf-8" />
<style>
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
</style>
</head>
<body >
<img src="https://www.migueltroyano.com/wp-content/uploads/2020/09/logo_grande.png" alt="Logo MiguelTroyano" class="center">
</body>
</html>
Este código HTML simplemente contiene una imagen centrada en la página.
Embeber el Dossier
Código HTML
Abre tu fichero HTML con tu editor de código favorito y situate dentro de la etiqueta body donde quieras que aparezca tu dossier embebido. En nuestro ejemplo será después de la imagen en la línea 19.
Crea un div donde se ubicara el dossier. En el ejemplo vamos a crear un div con el id ContenedorDossier. Si solo nos fijamos en el contenido de la etiqueta body quedara de la siguiente forma:
<body>
<img src="imagenes/logo.png" alt="Logo MiguelTroyano" class="center">
<div id="ContenedorDossier">
</div>
</body>
Código JavaScript
Una vez creada la capa DIV donde se ubicara el dossier debemos utilizar la API de MicroStrategy para conectar con el servidor de Library y con un dossier especifico. Para ellos incluye dentro de la capa div la siguiente linea:
<script src="https://demo.microstrategy.com/MicroStrategyLibrary/javascript/embeddinglib.js"></script>
La función de esta línea es cargar el script necesario para embeber el dossier. Este script ya viene creado por defecto y solo debes modificar demo.microstrategy.com por tu servidor.
A continuación de esta línea escribe el siguiente código:
<script>
// Parametros de configuracion
baseRestURL = "https://demo.microstrategy.com/MicroStrategyLibrary";
projectID = "EC70648611E7A2F962E90080EFD58751";
dossierID = "7B38B46611E7F6DD00000080EF55DDCC";
username = "demo";
password = "demo";
/* Generamos la URL completa del Dossier */
var URLDossier = baseRestURL + '/app/' + projectID + '/' + dossierID;
/* Rellenamos el DIV con el dossier: */
microstrategy.dossier.create({
/* ContenedorDossier es el ID del DIV donde vamos a colocar el dossier */
placeholder: document.getElementById("ContenedorDossier"),
url: URLDossier,
/* Parametros que definen la apariencia del Dossier */
disableNotification: true,
enableResponsive: true,
/* Parametros de autentificacion */
enableCustomAuthentication: true,
customAuthenticationType: microstrategy.dossier.CustomAuthenticationType.AUTH_TOKEN,
getLoginToken: login
}).then(function(dossier) {
/* Codigo a ejecutar después de que el Dossier haya terminado de cargarse */
});
function login() {
/* Parametros para la solicitud del login */
var options = {
method: 'POST',
credentials: 'include', /* incluir cookie */
mode: 'cors',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
"loginMode": 1,
"username": username,
"password": password
})
};
/* El inicio de sesion se realiza aqui */
return fetch(baseRestURL + '/api/auth/login', options).then(function (response) {
if (response.ok) {
return response.headers.get('x-mstr-authToken');
} else {
response.json().then(function(json) {
console.log(json);
});
}
}).catch(function (error) {
console.log(error);
});
};
</script>
Parametrización
El código anterior es solo un ejemplo y debes modificar los siguientes parámetros para adaptarlo a tu servidor:
- baseRestURL: dirección de tu servidor de MicroStrategy Library.
- projectID: identificador de tu proyecto.
- dossierID: identificador del dossier a embeber.
- username: nombre de usuario que se va utilizar para conectar al servidor.
- password: contraseña del usuario escrito anteriormente.
Tipos de autenticación
Si tienes configurado MicroStrategy con una seguridad standard con estos cambios serian suficientes, pero si dispones de otro tipo de seguridad debes cambiar el parámetro loginMode acorde a los siguientes códigos:
- Standar: loginMode= 1
- Autentificación de Windows: loginMode = 2
- Anónimo: loginMode = 8
- LDAP: loginMode = 16