Custom Portals D365 Sign In

I have seen many times some requirement about customizing the SignIn page in some D365 Portals and many have said the same following suggestion:

Create a content snippet with Account/SignIn/PageCopy

  • All Portals D365 Developers

Well guys, this is something I have just discovered when I was touching some bits and pieces from here and there.

Probably of you may know, but I think it is good to share with all of you because I haven’t seen it.

Problem

So the problem comes when the client says, I don’t want a that /signin in page, I really need the Signin page to be in the root page.

Right, my head started to bang and it was like, that Account/SignIn/PageCopy is not going to work now…

First thought

My very first thought was to include the SignIn page as an iFrame. This could solve the issue, as it is embedding this exact some page in the root page, so problem solved. However, I really don’t like iFrames, and it could be quite tough.

Second thought

Hey, finally in every webpage, the signin is just a POST to somewhere, so, let’s see the behaviour in this Portals, and let’s recreate it.

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

Let’s go to the code

Just for developing purposes and NO best practices at all, I have added the whole code inside the Home Web Template in my root page so you can follow it along.

The very first things we need are - at least - 2 fields and 1 button.

  • Username
  • Password
  • Click button.
{% if user %}
<h1>Hey {{user.firstname}}, you are absolutely fantastic.</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 %}

Note that I have added some bootstrap CSS, isn’t that nice? 🤣

I will explain this code really fast, so, everytime we are logged in we are going to be shown a “Hey Victor, you are absolutely fantastic.”, if we are not, we are going to be shown the HTML to input our credentials.

The second thing and the most important, is developing the functionality of the code in 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) {
  // Calling the shell.ajaxsafepost to pass the parameters.
  shell
    .ajaxSafePost({
      type: "POST",
      url: "/signin",
      data: params
    })
    .then(
      function(done) {
        window.location.reload();
      },
      function(error) {
        alert(error);
      }
    );
}

As you can see, I am using the shell object that is provided by Portals which contains these two functions:

  • getTokenDeferred
  • ajaxSafePost

The very first one is for getting the token that needs to be sent to the call The second one is the call to the signin page that has this API

We are recreating the same exact functionality that Portals is doing apart from adding the checkbox of the Remember Me.

Once we are logged in, is going to reload the page

window.location.reload();

and we are going to see Hey Victor, you are absolutely fantastic.

Let’s see how this works from a really simple way.

Conclusion

That’s everything I wanted to share. However, just be careful because you are not going to have the same exact shown errors once it fails, so you have to control them yourself. As well, all the styles are depending on you, however it is a nice set in order to include all the stuff you need in another page just in case you don’t like that signin. Even, if you don’t want that signin page to be shown ever, just create a redirection from your Portals to the page you have your log in system.

Any suggestions or question, feel free to send me an email to: me@victorsolaya.com

Join the newsletter