Azure AD SSO for Native Mobile

Using the OIDC Module

Chandresh Shukla
Mendix Community
Published in
7 min readNov 7, 2022

--

Azure AD SSO for Native Mobile (Banner Image)
Azure AD SSO for Native Mobile

Single sign-on (SSO) in the enterprise refers to the ability for employees to log in just one time with one set of credentials to get access to all corporate apps, websites, and data for which they have permission. SSO solves key problems for the business by providing:

  • Greater security and compliance.
  • Improved usability and employee satisfaction.
  • Lower IT costs.

The proliferation of cloud apps and services in the enterprise — often in addition to on-prem ones — has created a significant fragmentation problem. Fragmentation in the enterprise is a challenge for IT and users. IT must manage the many apps in the enterprise, as well as deal with shadow IT. Employees have to use more and more apps each day just to complete their work, which means logging in to and switching between multiple apps and websites.

SSO solves the enterprise fragmentation problem.

We are going to implement SSO in our Native applications,

So, let’s first create our native application in a few simple steps:

Step 1

Open your Mendix Studio Pro and select ‘Create New App ‘.

Step 2

Choose the ‘Blank Native Mobile’ template and then create your app.

Step 3

Now our app is created, we can go ahead and download the OIDC SSO module. Make sure to download these pre-required modules also:

Now after all the dependencies of our app have been imported into our application, let us now download the OIDC SSO module and import it into our app.

Step 4

Now, let’s go ahead and switch on our security and configure it!

Double click on ‘Security’, and switch security to production mode.

Step 5

Open your Module security, you will notice that there is no ‘Administrator’ role present. Go ahead and create one.

Step 6

It’s time for user role management, Just open the user role tab from app security and assign the ‘Administrator’ role to OIDC and MyfirstModule. Do the same for the ‘ Anonymous’ role.

Step 7

Add a page to your module, so that we can set up our OIDC configuration page and add it to Navigation:

Right-click on MyFirstModule -> add page -> OIDC Overview

Now search for ‘Snip_Configuration’ in the project explorer and use that snippet on your newly created page, and add the page to Navigation. Remember to give the page Administrator access.

Step 8

It's time to set up our Encryption Key and callback app name. Go ahead and open the constant ‘MobileURLScheme’ from your OIDC module, you can find it in:

Marketplace Modules-> OIDC-> _Use Me-> Configuration-> MobileURLScheme

Note: The Same URL scheme is to be used as a deep link app scheme [while building a native app] and defining call back URL in OIDC provider[in our case Azure] and OIDC config in our App.

Set up the encryption key constant, found in the encryption module (You can provide any string of 32 characters)

Since we are trying to build a Native App we need to set up an Anonymous user home page as a place for the user to log in.

Setting UP Azure

Login to Azure AD and go to Azure Active Directory App registrations, and look for the button labeled New registrations.

Next, you will be taken to a form to register your app on Azure AD. Complete the form by providing a name for your app, choosing the account type, and setting your redirect URLs.

Go to certificates & secrets to create a secret ID.

Now you need to add callback URLs for our App. You can add them to the manifest directly:

Here we have added a callback URL for each of our environments: for the web, the Make it Native app, and our custom build.

This is recommended for development only, in other production environments keep only the URLs that you are going to use!

Now go to the App overview and click endpoints

Copy the well-known config URL.

Now we have

  • App id
  • Secret id
  • Well known URL
  • Call back URL

This is everything we need to complete our setup. Let’s feed them into our Mendix App while it's running.

Start the App and go to the OIDC config page and fill in the details🡪

The Selected scopes list will only populate when the config is saved once, and then opened again - so let’s do it

Now everything is in place.

To test the custom build, we need to build a custom App for ourselves. I won’t take you through the whole process, but what is important here is to ensure deep-links is enabled under App Capabilities and to provide the App Scheme. The Scheme will be the same as the one we set earlier.

And that's it! Once APK is built and installed on your mobile device you can launch it and try it out.

Bonus Web implementation

If you’ve made it this far then I’d like to say thank you for reading! To show my appreciation, here are the steps to implement the same functionality for the web in the same project:

Add the login page for anonymous users

And for the callback, you could either create a new configuration[with a unique URL for the web] or you can change the callback microflow itself. What we have to change here is that the web calculation of the callback URL is done based on the App URL and not from the OIDC config.

With this, you can get the web part working as well. Now your app should be looking like this when it compiles:

From the Publisher -

If you enjoyed this article you can find more like it on our Medium page. For great videos and live sessions, you can go to MxLive or our community Youtube page.

For the makers looking to get started, you can sign up for a free account, and get instant access to learning with our Academy.

Interested in getting more involved with our community? Join us in our Slack community channel.

--

--