LogoLogo
WEM ModelerWEM ReferenceTutorialsMyWEM
  • WEM Platform Documentation
  • Getting Started
    • Introducing WEM
    • Create WEM Account
    • WEM Login
    • MyWEM Portal
      • MyWEM Features
      • MyWEM Support
      • Allow Support Access
    • Partner Portal
  • WEM Modeler
    • Introducing the WEM Modeler
    • Modeler Start Page
    • Manage Projects & Workspaces
    • User Roles Scheme
    • Create a new Project
    • Modeler Application Overview
    • Project Settings
      • Project Configuration
      • Security Settings
      • Portal Settings
      • SMTP Settings
      • Mobile App Settings
    • Expression Editor
    • Flowcharts
      • User Interaction
      • End Node
      • Sub-flowchart
      • Navigation
      • Clear session
      • Decision
      • Assignment
      • List Action
      • Loop
      • Copy Data
      • Save and Discard
      • Import Data
      • Export Data
      • Invoke Webservice
      • HTTP Request
      • Execute Process
        • Different processes explained
        • Send Email
        • Change settings
        • Changing files
        • Generate File
      • Ping server
      • Authenticate
      • Comet Messages
      • OpenAI
      • Async Tasks
      • Note Node
    • Data Model
      • WEM Session Folder
    • Services and Integration
      • Webservices
      • Remote Data Sources
      • Authentication Providers
        • SAML 2.0
          • SAML App Registration in EntraID
        • OAuth 2.0
      • Comet - Real Time Messages
      • Certificates
    • Concepts and Concept Queries
      • Concepts
      • Concept Queries
      • Concept Relations
    • Navigation
      • HTTP Endpoints
      • Tasks
    • Files and Assets
      • Widget Libraries
      • Template Fragments
      • Files
      • Hyperlinks
    • Multilanguage Dictionary
    • Agentic AI
      • WEM AI Agent
      • AI Flowchart Nodes
      • AI User Interaction
    • WEM Preview
    • WEM Runtime
      • Publishing Process
      • Staging
      • Live
    • Debugging
  • Template Editor
    • Interaction Template Editor
      • Interaction Template Hotkeys
    • General and preview
    • Style
      • Heading Type
      • Paragraph Style
      • Text Styling
      • Alignment
      • Hyperlink
      • Tooltip
    • Layout
      • Adaptive columns
      • Div
      • Panel
      • Alert
      • Table
      • Image
      • Icon
      • Label
    • Interaction
      • Form
      • Validation
      • Required field
      • Button
      • Dropdown
      • Free form item
    • Miscellaneous
      • Tabbar
      • Google maps
      • Nested template
      • Script
      • Reference
      • Conditional
      • Data grid
      • Repeater
      • Rich text
      • Custom
    • WMT Tool
  • WEM Reference
    • WEM Expressions Reference
    • Functions
      • Aggregation
        • Average
        • Count
        • First
        • Last
        • Max
        • Min
        • Sum
      • Concepts
        • ConceptId
        • Description
        • FindConcepts
        • GetAncestors
        • GetChildren
        • GetDescendants
        • GetParent
        • Intersection
        • LocalName
        • Synonyms
        • ToConcept
        • Union
      • Date
        • Date
        • DateDiff
        • DateOnly
        • DatePart
        • DayOfWeek
        • FromUnixTimestamp
        • MoveDate
        • Now
        • TimeOfDay
        • Today
        • ToDuration
        • ToLocal
        • ToUnixTimestamp
        • ToUTC
        • UTCNow
        • UTCToday
      • Environment
        • ApplicationId
        • CountryCode
        • CountryName
        • Hostname
        • IpAddress
        • IsFirstRequest
        • IsHttps
        • IsPreview
        • IsStaging
        • IsLive
        • NodeTrail
        • PortalId
        • PortalName
        • ProjectId
        • ProjectName
        • ProjectVersion
        • Setting
        • UrlPath
      • Files
        • FileName
        • FileSize
        • FileUrl
        • MimeType
      • Lists
        • Distinct
        • IsNewRow
        • IsOnRow
        • List
        • NameOf
        • RowId
      • Math
        • Abs
        • Ceiling
        • Cos
        • Distance
        • Exp
        • Floor
        • Log
        • Log10
        • Pi
        • Pow
        • Random
        • Round
        • Sin
        • Sqrt
        • ToNumber
      • Security
        • AesDecrypt
        • AesEncrypt
        • AesIv
        • AesKey
        • CreateJsonWebTokenH256
        • HmacSha256
        • Md5
        • Password
        • PasswordStrength
        • Pbkdf2
        • Sha1
        • Sha256
        • Totp
      • Text
        • AsText
        • Base32ToText
        • Base64ToText
        • CompareFuzzy
        • Concat
        • Contains
        • FormatDate
        • FormatDuration
        • FormatNumber
        • Guid
        • HexToText
        • HtmlAttributeEncode
        • HtmlEncode
        • IndexOf
        • JavascriptEncode
        • JsonEncode
        • Length
        • Padl
        • Padr
        • RegExIsMatch
        • RegExMatches
        • RegExReplace
        • Replace
        • Split
        • StringPart
        • SubString
        • ToBase32
        • ToBase64
        • ToBase64Url
        • ToHex
        • ToLower
        • ToRichText
        • ToString
        • ToTitleCase
        • ToUpper
        • Trim
        • UrlDecode
        • UrlEncode
        • XmlAttributeEncode
        • XmlEncode
        • XPath
        • XPathList
        • XPathNumber
      • Validation
        • HasValue
        • IsEmpty
        • IsKnown
        • IsUnknown
        • IsValidBankaccount
        • IsValidBSN
        • IsValidBTW
        • IsValidEmailAddress
        • IsValidIBAN
        • IsValidPhonenumber
        • IsValidURL
      • Localization
        • AvailableLanguages
        • CurrentLanguage
        • CurrentTimezone
        • LanguageStrategy
        • Languages in WEM
    • Keywords
      • Contains
      • Concepts
        • Ancestor of
        • Child of
        • Concept
        • Descendant of
        • Overlaps
        • Range of
        • Parent of
        • Contains
      • Environment
        • ApplicationRoot
        • Platform
      • Lists
        • In
        • Of
        • Where
        • Contains
        • All
      • Logic
        • And
        • Not
        • Or
        • Choose
        • If Then Else
      • Mobile
        • BatteryLife
        • BuildVersion
        • ConnectivityTypes
        • DeviceId
        • DeviceName
        • IsDevelopmentBuild
        • IsDistributionBuild
      • Text
        • Contains
        • Ends with
        • NewLine
        • Starts with
    • Operators
      • Addition +
      • Division /
      • Equality =
      • Equality-strong ==
      • Greater-than >
      • Greater-than-or-equal >=
      • If-unknown ?
      • Inversion -
      • Less-than <
      • Less-than-or-equal <=
      • Logical-and &, and
      • Logical-not !, not
      • Logical-or |, or
      • Modulo %
      • Multiplication *
      • Power ^
      • Subtraction -
      • Unequality <>
    • Data Types
      • Text
      • Number
      • Yes / No (Boolean)
      • Date Time
      • Duration
      • File
      • Rich Text
      • Concept
      • Conceptset
      • Reference
    • SQL Compatibility
      • Functions
      • Keywords
      • Operators
    • Content Security Policy
    • WEMScript for Custom HTML
    • WEM Widgets
      • WEM Widget Structure
      • WEMScript for Widgets
      • Widget Editor
      • Content Placeholder
    • WMT
      • File Structure
      • Basic Functional Template
      • Styling
      • Font Icons
      • Reference
        • Breadcrumb
        • Button Bar Buttons
        • Common Scripts
        • Common Styles
        • Conditional
        • Content
        • CSP
        • CSP Nonce
        • Expression
        • Hidden Fields
        • Language Select
        • Navigation
        • Node ID
        • Node Name
        • Placeholder
        • Placeholder Conditional
        • Startup Scripts
        • Template Fragment
        • Uses
    • Regression Test Framework
      • WEM Test Script
  • Tutorials
    • Tutorials
      • Making a Change Log
      • Placeholders for end-users
    • First Application
      • Expand First Application
    • Video Tutorials
      • By Partners
      • Security
    • Building Widgets
      • Basics
        • 1. Introduction
        • 2. Hello, World!
        • 3. General
        • 4. Properties
        • 5. Events
        • 6. Styling
        • 7. View State
        • 8. Resources
        • 9. Placeholders
        • 10. Template Editor Script
        • 11. Global Scope
        • 12. Risks and Responsibilities
        • 13. Conclusion
      • In-depth
        • 1. Introduction
        • 2. Platform Availability
        • 3. Development Workflow
        • 4. Properties
        • 5. View state
          • 1. Runtime.viewState
          • 2. sessionStorage
          • 3. Summary
        • 6. Styling
        • 7. Events
          • 1. Navigation
          • 2. Row position
      • WEMscript
        • 1. Introduction
        • 2. Variables
        • 3. Properties
        • 4. OutputId()
        • 5. Register Input - Required
        • 6. Encoding
        • 7. Script Block - Introduction
        • 8. Types
          • 1. Boolean
          • 2. Concept
          • 3. ConceptSet
          • 4. Datetime
          • 5. Duration
          • 6. File
          • 7. Number
          • 8. Richtext
          • 9. Text
        • 9. Script Block - Global Scope
        • 10. Script Block - ES Modules
        • 11. CSS - attachShadow
      • Examples
  • Tips and Tricks
    • Tips and Tricks
      • Keyboard Shortcuts
      • Video's in WEM
      • Extracting text from File
    • Custom Hostnames
    • FAQ
    • Expressions
      • Order of Operators
    • Processes
      • Email Process
      • Tips for creating PDF's
      • ZIP Archive Process Node
    • Concepts
      • Concepts and Runtime
    • Working with data
      • The Power of the Calculated Field
      • Consuming your OData source with Excel 2016
      • Expose your data via OData
      • Using OData to transfer data between runtimes
      • WEM Storage Options
    • Integration
      • Integrating external systems
      • Json
      • Single Sign-on
      • Office365 Integration
    • Performance
      • Performance Tips
      • Performance Profiler
      • Template Performance Profiler
      • The Split Loop
    • Security
      • 2FA with TOTP
      • Blacklist or whitelist IP addresses
    • Widgets
      • Advanced Charts
        • Boxplot Chart
        • Brush Chart
        • Bubble Chart
        • Candlestick Chart
        • Card with Chart
        • Effect Scatter Chart
        • Heat Map
        • Line, Area and Bar Chart
        • Map-Bar Morph
        • Mix Time Line Chart
        • Nested Pie Chart
        • Polar Area Chart
        • Polar Bar Chart
        • Profit Chart
        • Radial Bar Chart
        • Radial Bar Gauge
        • Range Bar Chart
        • Rosetype Pie Chart
        • Sankey Energy Chart
        • Scatter Chart
        • Scatter-Aggregate-Bar Chart
        • Stacked Columns Chart
        • Stepline Chart
        • Treemap
      • Advanced Input
        • Color Picker
        • Conceptset Image Selector
        • Google maps locator
        • Multi select input button
        • MultiFile Upload
        • On/Off switch
        • Process Arrow Steps
        • Rate
        • Rating view
        • Single select input button
        • Slider
        • Tree
      • Template Actions
        • Follow exit
      • Global widgets
        • Agenda
        • Audio Player
        • Calendar
        • Draw Signature
        • Grid Widget
        • Image capture
        • Kanban Board
        • Path
        • Progress Bar
        • reCAPTCHA
        • Timeline
      • Document widgets
        • Json Viewer
        • PDF Viewer
    • Various
    • Go to MyWEM
Powered by GitBook
On this page
  • Single Sign-on
  • Example 1 – a simple way of using single sign-on
  • Example 2 – Using attributes from your authentication provider

Was this helpful?

Export as PDF
  1. Tips and Tricks
  2. Integration

Single Sign-on

Two examples of using Single Sign-on in your application

PreviousJsonNextOffice365 Integration

Last updated 11 months ago

Was this helpful?

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 , and .

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 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 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.

Authentication Providers
SAML
OAuth
Authentication Providers