Single Sign On (SSO) for Dashboard Applications

Microsoft ADFS (Active Directory Federation Services), which runs on Windows Server OS, provides secured single sign-on access (SSO) to registered applications. With the single-sign on (SSO) concept, a user present within the Active Directory can log in with a single ID and password to all the registered applications.

In this blog article, we are going to discuss how to register Syncfusion Dashboard applications with ADFS running in Microsoft Azure and let each user log in to any of those applications with a unique credential.

Following are the steps to get the single sign-on ADFS to work:

1.   Creating an Active Directory (AD).
2.   Creating users and groups.
3.   Registering the Dashboard Server Application.
4.   Registering the Dashboard Designer Application.
5.   Registering the Dashboard Mobile Application.
6.   Configuring the AD in Dashboard Server.
7.   Adding AD users and groups in Dashboard Server.

Creating an Active Directory (AD)

To create an active directory, click Create New Resource on the top-left corner of the portal. Search for Active Azure Directory and create the same with Organization name and Initial domain name details. In this example, we have set Syncfusion Dashboards as the organization name and DemoDashboardDirectory as the initial domain name.

                

Creating users and groups

Once the Active Azure Directory is created, we need to add users. We can also create groups. Select Active Azure Directory on the left side panel under FAVORITES and go to the Users option. Click New User and enter the details—name, user name, directory role, etc.—to create a new user. In this example, we created two users—User1 and User2— for demo purposes.

IMPORTANT NOTE: Here, a password will be generated automatically for the corresponding user and can be changed during our first login attempt in the respective portal. Hence, copy the password from here for future reference.

Similarly, to create a group, go to the Groups option, right below Users and click New group. Select the appropriate users for this group. In this example, we created a group named DemoDashboardUsers and included User1 and User2 in it.

                

Registering the Dashboard Server Application

Dashboard Server allows global users to view all published dashboards, based on their permissions. To login and view the dashboards through single-sign on access, we need to register this application and link the users in Azure portal.

To register the Dashboard Server application:

• Select Active Azure Directory on the left-hand side panel under FAVORITES and go to App registrations.
• Click New application registration and enter the details—name, application type, and sign-on URL—to register the application. In this illustration, we entered the name as Dashboard Server, the application type as Web app/API, and the sign-on URL as dashboard server application hosted URL.
• Next, move to Dashboard Server settings and select Properties. Here, App ID URI should have the exact value of Sign-on URL.
• Once the App ID URI is changed, move to Required permissions available below Properties. Click Add and select Microsoft Graph. Enable its permission accordingly.
• Once Microsoft Graph is added to the application, select Grant Permissions options.

To learn more about Microsoft Graph, click here.

IMPORTANT NOTES:
1. Keys below Required permissions are to be configured and their values need to be noted for later use in Dashboard Server portal. In this illustration, we set DemoKey, which expires in one year, and noted the value, as well.
2. In Settings, we have the Application ID and Object ID of Dashboard Server, which will be used in Dashboard Server for later purposes, as well.

                

Registering Dashboard Designer Application

Dashboard Designer application helps to design a report from scratch and publish the same in the Dashboard Server for all types of users. So, in-order to publish reports in Dashboard Server, we need to log in to the Dashboard Server from Dashboard Designer, which can also be done using single sign-on. For this, we need to register the Designer application in Azure portal and link Dashboard Server to it.

To register the Dashboard Designer application:

• Select Active Azure Directory on the left-hand side panel under FAVORITES and go to App registrations.
• Click New application registration and enter the details—name, application type, and redirect URI—to register the application. In this illustration, we have entered the name as Dashboard Designer, the application type as Native, and redirect URI as dashboard server application hosted URL.
• Next, move to the Dashboard Designer settings and select Required permissions. Click Add and select Dashboard Server, which was created in the previous topic, and enable its permission accordingly.

IMPORTANT NOTE: In the Settings options, we have the Application ID and Object ID of Dashboard Designer, which will be used in Dashboard Server for a later purpose.

                 

Registering Dashboard Mobile Application

Dashboard Mobile allows global users to view all published dashboards (hosted inside Dashboard Server), based on their permission(s). To log in and view the dashboards through single sign-on access, we need to register this application in Azure portal and link Dashboard Server to it.

To do so, repeat the same steps from registering the dashboard designer application. The only change here would be to register Dashboard Mobile Application under the name Dashboard Mobile instead of Dashboard Designer.

IMPORTANT NOTE: In Settings, we have the Application ID and Object ID of Dashboard Mobile, which will be used in Dashboard Server for a later purpose.

Configuring AD in Dashboard Server

Now we are going to add the Azure Directory details inside Syncfusion Dashboard Server to synchronize the application.

Log in to the Dashboard Server portal and navigate to Settings >> User Directory >> Azure Active Directory. Here, you need to enter the tenant name, Client ID, and Client Secret Code. In our illustration, the tenant name is DemoDashboardDirectory.onmicrosoft.com, obtained from Azure, the Client ID is the Application ID of Dashboard Server, and the Client Secret Code is the DemoKey. To learn more about these, recall the note section under Registering Dashboard Server Application. Now test the connection and, on success message, you can proceed to save the settings.

Then, navigate to Settings >> SSO and enable the SSO check box. Fill in all the fields available, as directed in Dashboard Server:

• Metadata URI and Authority—In the Azure portal, select Azure Active Directory >> App registrations >> Endpoints. Here, copy the text from FEDERATION METADATA DOCUMENT and paste it in the Metadata URI option inside the SSO tab in Dashboard Server. Likewise, copy the text from WS-Federation Sign-On Endpoint and paste it in the Authority option inside the SSO tab in Dashboard Server.
• Tenant Name—Here in our illustration, the tenant name is DemoDashboardDirectory.onmicrosoft.com, which we saw while creating the Azure Active Directory.
• Designer Client ID and Mobile App Client ID—You can add the Application ID of Dashboard Designer and Dashboard Mobile discussed in the note section of the prior topics.
• Relying Party ID—By default, Dashboard Server portal URL is defined in this field.