Single Sign-on

Two examples of using Single Sign-on in your application

Single Sign-on

This article gives two examples on how to use the authentication node to realize single sign-on functionality. For these examples we have made the assumption that an authentication provider (based on Microsoft Office 365) had been created.

Example 1 – a simple way of using single sign-on

We’ll start with a simple way of using the authentication node to authenticate and authorize users to access your WEM application. In a very basic way. You only need a few steps:

• Open the Home flowchart that is always available

• Now add an athentication node to the flowchart. You are presented with a popup to select the authentication provider you want to use. If you don’t already have a provider, you can read here how to do that. Select the provider and click on Ok.

• You can now change the properties of the authentication node you just added. Check whether the property Actionis set to SignOn. Because this is the action we want the node to execute.

• Finally define in your flowchart what should happen when the user is authenticated. E.g. start a flowchart that takes the user to the actual application. When you draw an arrow between the authentication node and the nedt node (e.g. a subflowchart), the exit that should be used is the authenticated exit: the user is authenticated and can now access the rest of the application.

You now have something like this:

Example 2 – Using attributes from your authentication provider

The previous example was the most basic way to use the authenticated node. You can do a lot more with it and we’ll explore that in this example. We will expand the previous flowchart and add an overlay that displays some information, like your email address, whenever you log in.

Step 1: add fields to store information

We will start with creating a coupld of data fields we need:

• Create a new folder in the Data model, and call it ‘Single sign-on’

• Add three text fields:

  • Email – this will store the email address of the person logging in

  • Display name- this will store the Display name of the person loggin in

  • Response message – the store the message the authentication node returns when logging in

So now we have:

Step 2: create the flowchart

The next step is to create the flowchart that is used to log in the user. Create a new flowchart called sso that we will use for this example.

• Open the sso flowchart. There is only the Start node.

• Add three Assignment nodes and use the to clear the values of the fields we just added.

• Add an Authentication node in the same way as in the previous example. So select your authentication provider and make sure the Action is set to SignOn

• Connect the nodes. You now have a flowchar that looks like:

Step 3: add an overlay to display information

The idea of this example is to show that there is more information that you can get out of the authentication process. To show this, we will add an interaction node to our flowchart and add a few labels to display that information:

• Add the interaction node. Name it ‘Authenticated’ and make it an overlay

• Add three labels to the overlayand give the the following values:

  • “Welcome “+ select the Display name field you created earlier

  • “Your email address: “+ select the Email field you create earlier

  • “Response message from Azure AD: “+ newline + select the Response message field tou created earlier:

And the interaction node looks like this:

Step 4: complete the flowchart

Now that we have created the overlay to display the information, we need to complete the flowchart:

• Connect the Authentication node with the Interaction node, and select the Authenticated exit.

• Create to exits for the interaction node

  • ‘Sign out’, and add this button to the button bar. When the user clicks this butten, the user will log out

  • ‘Continue’, and add this button to the button bar as well. When the user clicks this button, we will continue with the application.

• Add a second Authentication node

  • Select the same authentication provider as the first Athentication node

  • Set the Action value to Logout. When this node is reached, the user will now be logged out

  • Connect the interaction node with the second Authentication node and use the ‘Sign out’ exit to connect the two

  • Add an End node and connect the Authentication node, using the Not authenticated exit.

• Add a Enter subflowchart node and select the flowchart that needs to be started after the user has logged on (you can create a very simple flowchart for this purpose). Connect the interaction node with this Enter subflowchart node and use the ‘Continue’ exit to make the connection

Your flowchart should now look something like this:

Step 5: create navigation points

Since you created a new flowchart for this example, we need to make the flowchart is executed by the application. This can be done by calling this flowchart from e.g. the default Home flowchart, but in this case we’ll add a menu option to sign in:

• Open Navigation in the project tree and click on on Main menu. You now see the various main menu navigation points that exist

• Click on New navigation point to create a new menu option (a navigation point)

  • Name it ‘Sign in’

  • The Action is a Deeplink

  • Select the sso flowchart

You now have a menu option available to sign in, using your companies authentication provider.

Step 6: configure the authentication provider settings

To mke it all work, we need to configure the settings for the authentication provider. This is needed to make sure all the additional information is actually provider by the authentication service. There are two ways of make the information available:

1. Using response handlers

2. Adding/managing attributes

First, we will use the response headers:

• In the Project navigation tree, open Authentication providers and click on your authentication provider. You will no see the settings page of this provider. On the right there is the column Response handlers:

• In the Response Handlers column, change the Map response message to value to point to the Response message field you creater earlier

Next, we add attributes for the Display name and the Email address that we want to show in the overlay window when a user signs in:

• In the toolbar, click on Manage attributes. This shows the form to manage attributes that are used by this authentication provider

• Click on Add to add a new attribute. Fill in the form with the following values:

  • Friendly name: ‘Display name’

  • Name: ‘http://schemas.microsoft.com/identity/claims/displayname’

  • Name format: ‘TXT’

  • Data field: select the Display name field you created earlier. This attribute is now connected to the data field.

• Save this attribute, and Add another:

  • Friendly name: ‘Email’

  • Name: ‘http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name’

  • Name format: ‘TXT’

  • Data field: select the Email field you created earlier. This attribute is now connected to the data field.

• Save this attribute as well

You now have two attributes defined that you actually use in the interaction:

Step 7: preview

You have everything in place and can now preview your example. When you log in, or when you were already logged into your company network, you would get a form with your name, email address and the actual Azure AD response message.