Single Sign-on
Two examples of using Single Sign-on in your application
This page is kept here, but contains some old information (which can still be useful).
BUT we would like to point out our other pages about Authentication Providers, SAML and OAuth.
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 availableNow add an
authentication 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 onOk
.
You can now change the properties of the authentication node you just added. Check whether the property
Action
is set toSignOn
. 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 theStart
node.Add three
Assignment node
s 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 theAction
is set toSignOn
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 overlayAdd 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 theResponse 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 theInteraction node
, and select theAuthenticated
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 toLogout
. When this node is reached, the user will now be logged outConnect the
interaction node
with the secondAuthentication node
and use the ‘Sign out’ exit to connect the twoAdd an
End
node and connect theAuthentication node
, using theNot 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 theinteraction node
with thisEnter 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 onMain menu
. You now see the various main menu navigation points that existClick on
New navigation point
to create a new menu option (a navigation point)Name it ‘Sign in’
The
Action
is aDeeplink
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:
Using response handlers
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 columnResponse handlers
:
In the Response Handlers column, change the
Map response message to
value to point to theResponse 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 providerClick 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 theDisplay name
field you created earlier. This attribute is now connected to the data field.
Save
this attribute, andAdd
another:Friendly name
: ‘Email’Name
: ‘http://schemas.xmlsoap.org/ws/2005/05/identity/claims/name’Name format
: ‘TXT’Data field
: select theEmail
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.
Last updated