Building Custom Sign-In Portals with Custom Branding Themes in Entra

-

So, if you have multiple applications within your tenant and want to spruce up how users authenticate, then I have a solution for you! I came across this in the latest Entra Community Newsletter that was just released, which allows for administrators to create custom sign-in portals for any app registration in their tenant. Why does this matter and how can you use it? Stick around and I'll tell you how in this latest article.

Why This Matters

Say for instance you have a cyber range like me, in which you have multiple users accessing various applications from within your tenant. You may desire to have a unique login page for said users that will look different from what your usual portal looks like, allowing you to separate the two. This where such a feature can come in very handy.

From a security perspective as well, you may also desire to display additional information or another Terms of Use link from within the sign-in portal. For my range, I have a different set of conditions that users must agree to in order to access the desktop pools and virtual infrastructure via Pomerium or Tailscale. Therefore, having the ability to separate my cyber range sign-in from my production is critical. Additionally, it allows me to tailor the experience and enhance it for those who will use the range. For example:

Article content

So in turn, this allows me to separate production authentication from the cyber range. Pretty cool right? I also built it so it redirected to the range's SharePoint site. Now, let me show you how it's done.

IMPORTANT: Before You Start

Before you get into this, I want to mention that this capability is only available to Entra P1 customers only. If you do not have a SKU that does not have P1 or higher, you will be unable to do this. Luckily, most licenses do have P1 so you should be fine. I did this with a Microsoft 365 Business Premium license and Enterprise Mobility + E5 and it works fine. However, if you have Business Standard or lower, you will need to upgrade.

Create your App Registration

This will be the first and primary step that will need to be completed prior to designing your custom theme. The reasoning for this is because the theme itself requires an app registration to be associated with the theme. Otherwise, it will assume that you are aiming for the default sign-in portal. I will assume at this point that you already know how to create an app registration, but if you are unsure, click the link here to learn more: How to register an app in Microsoft Entra ID - Microsoft identity platform | Microsoft Learn

Once you have the app registration complete, the app should populate in the next steps. Let's move onto the main event for this post, which is creating our custom sign-in.

Getting Started with Custom Branding Themes

Since we have the app registration configured, we can now begin the customization process. To do so, go to the Entra admin center -> then the Entra ID blade -> and finally scroll down to "Custom branding". Once you're there, you'll see the new option "Branding Themes (preview)". This is what you want to click:N

Article content
Article content

You'll notice that the process is quite similar to when you first built your custom branding for the first time. The only difference is you have to specify what applications will use the custom theme. This is where the app registration we created earlier will now be put into use:

Article content
Article content

Now we can begin the customization of the sign-in portal. Follow the prompts, and you will get a custom sign-in page that you can preview by hitting the button in the blue ribbon seen above. Once we're satisfied as to the look, then all we have to do is hit "Review + create" and we're good to go!

The only important thing to mention is that if you wish to use the new sign-in portal, you will need to explicitly use the following login endpoint:

https://login.microsoftonline.com/{tenant-id}/oauth2/v2.0/authorize?client_id={client-id}&response_type=code&redirect_uri={redirect-uri}&scope=openid

And as a result we get our new sign-in page! If you experience any trouble, try in an inPrivate tab to view the new sign-in page.

Final Thoughts

I have been waiting for this feature for a long time. Having the ability to segment and enhance the user experience based on themes has been on my wishlist for awhile now. I look forward to using this in my cyber range and hope that you enjoy using it as well.

Until next time folks!

Comments

Post a Comment

Popular posts from this blog

Using Power Automate to Update Contact Information

-
 We've all been there- you have a large organization who has out-of-date contact information. What do you do? You could go around to each department and ask them nicely to update their information, or send out an org-wide email prompting people to do so. However, this is tedious and oftentimes a pointless task. By the time you update one department, you're running to fix another. What if you could put the power back in the department's hands to do so? This is a struggle I faced recently as I was trying to find was I could conjure up some updated contact information for each department. As I did my research, I found that I was not alone in this endeavour as it seems that many IT professionals would love to make this process a little bit less painful. With this in mind, I introduce to you my latest flow! This flow will allow you to encourage users to update their contact information, without the overhead that comes with manual effort. In addition to this, this flow utilizes t...
Read more

Using Custom Connectors and Microsoft Graph API's to Manage Licenses in Power Automate - Part One

-
Happy June folks! I come to you with another post, but this time I wanted to change it up and show you something else I have just finished working on. As a SysAdmin, one of the most common issues we run into is managing licenses. Working at a post-secondary institution makes this an even greater challenge, as you have both students, staff and faculty constantly coming as well as going. Managing to keep up with this constant change can introduce great administrative overhead which takes away time from important upkeep of other systems and initiatives. You may also notice this same issue in large corporations or in other government organizations. To help combat this, I wanted to create a flow that can do the following: Get the user and their licenses Determine their last sign-in and the date Conditional to determine if the user is past the "cutoff" date Remove the user from a group where the license is assigned The only problem with doing this is that Power Automate does not ha...
Read more

Using Custom Connectors and Microsoft Graph API's to Manage Licenses in Power Automate - Part Two

-
Hello again! Didn't I promise you that I'd be back to wrap this up? Well, here I am to give you the second tidbit of information that you need to get this started. If you haven't already, take a look at my previous post where I go into depth about creating a custom connector in Power Automate to retrieve the latest sign-in and also gather the user's licenses. Now that we have the custom connector ready, we can now get into the meat n' potatoes of this series. In this post, I will show you the flow that makes this possible and how you can use the custom connector you have created to tie it all together! Hope you enjoy. Understanding the Logic Before we can begin creating the flow, we should first understand how the flow will work. I designed this to flow to be triggered manually, but you may want to schedule it or use another trigger. The trigger will depend on your organization's policies, so please adjust accordingly. Once triggered, the flow will use the Entra...
Read more