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
  • The OAuth 2.0 authentication protocol
  • Step 1 – Copy the example project
  • Step 2 – Setting up the project (optional)
  • Step 3 – Getting your redirect URLs
  • Step 4 – Creating your Microsoft Azure App
  • Step 5 – Entering the Redirect URLs
  • Step 6 – Creating a client secret
  • Step 7 – Selecting the permissions of the app
  • Step 8 – Get the OAuth2.0 endpoints
  • Step 9 – Setting up the authentication provider
  • Step 10 – Trying out the template project

Was this helpful?

Export as PDF
  1. Tips and Tricks
  2. Integration

Office365 Integration

Learn how to integrate Office365 services with you WEM application, using OAuth 2.0

PreviousSingle Sign-onNextPerformance

Last updated 3 years ago

Was this helpful?

Office365 offers many services that we can integrate with. E.g.:

  1. Outlook

  2. Calendar

  3. OneDrive

We’ve created a template project where you can begin using the Office365 API. In this guide we’ll show you how to set it up.

The OAuth 2.0 authentication protocol

To be able to safely make use of external providers there’s always some authentication procedure involved. The WEM Modeler already supports the two main standard industry protocols, SAML 2.0 and OAuth 2.0.

In this guide we’ll be using the OAuth 2.0 protocol. Below is a little bit of technical protocol information that helps you understand the actual integration. The OAuth 2.0 protocol requires 5 pieces of information to work properly:

  1. An Authorization Endpoint, a link where we’ll redirect to when we start the authentication procedure.

  2. A Token Endpoint, a link which will give us an access token after we’ve successfully validated ourselves with the ‘Authorization Endpoint’.

  3. A Client ID, this will validate our application to the external service provider.

  4. A Client Secret, this will also validate our application to the external service provider.

  5. Redirect URLs, after successfully logging into the external service we’ll be redirected to these URLs.

After retrieving the access token we’ll be able to use the external service provider’s API.

(An API, application programming interface, is like a toolbox that grants us access to a bunch of useful functions. For example, Outlook’s API allows you to retrieve all your unread mails.)

Step 1 – Copy the example project

Step 2 – Setting up the project (optional)

Let’s say we end up working on our project for a long time. Then it would be nice if we could publish the project right? To be able to do this we first need to link a domain address with our project.

Go to the ‘Project settings’ and configure the hostnames for the staging and live environment. (If the hostname isn’t taken, you can generally use the name of your project and the postfix “.staging.wem.io” or “.live.wem.io” as hostnames.) And with that our hostnames are set up. Don’t forget to save the changes you’ve made!

Step 3 – Getting your redirect URLs

Click on the authentication provider Office 365.

Copy and write all the Redirect URLs down somewhere. The redirect URLs in our case are:

Step 4 – Creating your Microsoft Azure App

Click on Azure Active Directory and after that click on App registrations.

Click on the button New application registration and fill in the form that pops up.

In the text field Name you can enter any name you prefer. In the field Application type you need to select the option Web app / API. In the field Sign-on URL you can enter any URL you prefer, it doesn’t matter which URL you enter.

In the next screen you can see some of the settings of your application. Write down the ‘Application ID’, that will be your client id. After that’s done click on the Settings button.

Step 5 – Entering the Redirect URLs

Afterwards click on the Reply URLs button.

Enter the Redirect URLs you’ve written down before, and press the Save button afterwards.

Step 6 – Creating a client secret

Click on the ‘Keys’ button.

Enter a new password. Write in the Description field any name you prefer, we choose Client Secret. Select in the Expires field the option Never expires.

After that’s done click on the Save button. The actual key will now appear in the Value field.

Write the key down somewhere, that is our client secret.

Step 7 – Selecting the permissions of the app

Click on the required permissions button.

Click on the Add button.

Select the Microsoft Graph API.

Select all the permissions, this way we aren’t restricted in the way we’ll use the app.

After that’s done, do not forget to click the Grant Permissions button.

Step 8 – Get the OAuth2.0 endpoints

Go to the App registrations overview.

Click on the Endpoints button.

Write down the OAuth 2.0 endpoints somewhere.

For our purposes we need to change the endpoints a little bit, since we’ll be using the 2.0 version of the API. In both URLs add after ‘oauth2/’ the text ‘v2.0/’. The URLs will now look like this:

Step 9 – Setting up the authentication provider

Click on the ‘Office 365’ Authentication provider.

Write your Client ID and Client Secret in these fields. You’ve written them down in step 4 and step 6.

Write down the appropriate URLs in the ‘Authorization Endpoint’ field and the ‘Token Endpoint’ field. You’ve written them down in step 8. Under the ‘Scope’ field you need to write down ‘mail.read’, what you write down in this field is not that important as long as we do not leave it empty. And with that your authentication provider is done!

Step 10 – Trying out the template project

The template project can now be used.

Click on the highlighted ‘Preview’ button to try out the template project! It’s recommended to look through all the flowcharts in the project to see how it all works.

Log into your WEM account at and scroll down to ‘WEM Example projects’. There you’ll find the example project ‘Office 365 Template’, click on the Copy button. Afterwards go to , and open the newly copied project.

Go to and log into your Office365 account. (If you do not have an Office365 account you can get a free trial at )

If you want to know more about the Office 365 API visit .

https://my.wem.io
https://modeler.wem.io
https://preview.wem.io/4639/auth/oauth2/office-365
https://office.staging.wem.io/auth/oauth2/office-365
https://office.live.wem.io/auth/oauth2/office-365
https://portal.azure.com
https://products.office.com/en/try
https://login.microsoftonline.com/e2671fe1-61d1-41c2-bbbf-06440825adea/oauth2/token
https://login.microsoftonline.com/e2671fe1-61d1-41c2-bbbf-06440825adea/oauth2/authorize
https://login.microsoftonline.com/e2671fe1-61d1-41c2-bbbf-06440825adea/oauth2/v2.0/token
https://login.microsoftonline.com/e2671fe1-61d1-41c2-bbbf-06440825adea/oauth2/v2.0/authorize
https://developer.microsoft.com/en-us/graph/docs