Custom Portals D365 Sign In

He visto muchas veces algún requerimiento de personalizar la página de Log In en algunos portales de D365 y la mayoría de personas sugiere lo siguiente:

Crea un content snippet (Fragmento de contenido) llamado: Account/SignIn/PageCopy

  • Todos los desarroladoers de Portals de D365

Bien, esto es algo que acabo de descubrir mientras estaba probando un poco por aquí y por allá.

Probablemente ya lo sabréis, pero creo que es bueno compartir esto porque yo no lo había visto antes.

Problema

El problema viene cuando el cliente dice, “No quiero la página de signin, necesito que el signin esté en la página raíz”

Bueno, mi cabeza empezó a pensar diciendo que, claro, ese Account/SignIn/PageCopy no va a funcionar…

Primer pensamiento

Mi primer pensamiento fue para incluir la página de Sign In dentro de un iFrame. Esto podría resolver el problema, embebiendo esta misma página dentro de la página raíz, por lo que problema resuelto. Sin embargo, no me gusta al 100% los iFrames, y podría ser un poco tedioso.

Segundo pensamiento

Hey, finalmente en todas las páginas del mundo, cuando intentas crear un login, es un POST a algún lugar, por lo que veamos si es el mismo comportamiento en Portals y lo recreamos.

Voilà!!

I recreated with some ajax and some fields the same exact structure and I could login, and, as always, I am going to share that with you Hice lo mismo con ajax y algunos campos con la misma estructura y pude loguearme, y, como siempre, voy a compartirlo.

Vamos al código

Solo para propósitos de desarrollo y NO méjores practicas, he añadido todo el código dentro de la Plantilla Web Home en mi página raíz para que se pueda seguir todo. The very first things we need are - at least - 2 fields and 1 button. Las primeras cosas que necesitamos son - al menos - 2 campos y 1 botón.

  • Username - Nombre de usuario
  • Password - Contraseña
  • Click button. - Botón para clickar.
{% if user %}
<h1>Hey {{user.firstname}}, eres increíble.</h1>
{% else %}
<h1>Custom Login</h1>
<div class="form-group">
  <input type="text" class="form-control" id="usernameCustom" />
  <input type="password" class="form-control" id="passwordCustom" />
  <button type="button" class="btn btn-primary" onclick="LogInCustom()">
    Log In
  </button>
</div>
{% endif %}

Nota que he usado Bootstrap CSS, increíble eh? 🤣

Voy a explicar el código muy rápido. Cada vez que nos logueamos vamos a ver algo como “Hey Victor, eres increíble”, si no estamos logueados, vamos a ver el HTML para ver las credenciales.

La segunda cosa y la más importante es desarrollar la funcionalida del código en Javascript.

function LogInCustom() {
  shell.getTokenDeferred().done(function(token) {
    var params = {
      __RequestVerificationToken: token,
      Username: $("#usernameCustom").val(),
      Password: $("#passwordCustom").val(),
      RememberMe: false
    };
    SafeAjaxToSignin(params);
  });
}

function SafeAjaxToSignin(params) {
  // Llamanda a shell.ajaxsafepost para pasar los parámetros.
  shell
    .ajaxSafePost({
      type: "POST",
      url: "/signin",
      data: params
    })
    .then(
      function(done) {
        window.location.reload();
      },
      function(error) {
        alert(error);
      }
    );
}

Como puedes ver, estoy usando el objeto shell que Portals nos da y que contiene estas dos funciones:

  • getTokenDeferred
  • ajaxSafePost

La primera es para obtener el token que se necesita para enviar la llamada. La segunda es la llamada a la página de signin que es la que contiene la API.

Vamos a recrear la misma funcionalidad que lo que Portals está haciendo excepto añadir la checkbox de Recuérdame._

Una vez que nos logueemos, se recargará la página con

window.location.reload();

y vamos a ver nuestro Hey Victor, eres increíble.

Veamos como funciona desde una manera muy simple:

Conclusión

Eso es todo lo que quería compartir. Sin embargo, ten cuidado porque no vas a ver los mismos errores una vez que falle, así que tienes que controlarlos por tí mismo. También, todos los estilos dependen de ti, sin embargo, esto también está bien para incluir todas las cosas que necesitas en otra página si no te gusta lo que aparece en el signin. Incluso, si no quieres que esa página se muestre nunca, simplemente crea una redirección desde la página del Portal de Sign In a la que necesites de tu sistema.

Y ya sabes, cualquier sugerencia o pregunta, mándame tu pregunta al email: me@victorsolaya.com


Únete a la newsletter