Single-Page Applications

JavaScript applications running in a browser are often hard to secure due to the open nature of the Web. Secure storage is nonexistent, and everything is in clear text (for HTTP version 1.1). Here's a quote from the Azure Active Directory team that summarizes the state of authentication with single-page applications:

The OAuth2 implicit grant is notorious for being the grant with the longest list of security concerns in the OAuth2 specification. And yet, that is the approach implemented by ADAL JS and the one we recommend when writing SPA applications. What gives? It’s all a matter of tradeoffs: and as it turns out, the implicit grant is the best approach you can pursue for applications that consume a Web API via JavaScript from a browser.

(Source: https://docs.microsoft.com/en-us/azure/active-directory/develop/active-directory-dev-understanding-oauth2-implicit-grant)

It's therefore important that you make all of the necessary checks to verify the validity of your requests and the responses.

This section provides instructions on how to configure AD FS with a single-page application (SPA) so that users can authenticate through it and make requests to the WorkflowGen GraphQL API.

Prerequisites

• Make sure to have a licensed copy of WorkflowGen installed and running on a server.

• Make sure to have administrative access to AD FS to be able to configure it properly.

• Make sure to have provisioned an existing Active Directory user with which you can authenticate to WorkflowGen so that you can use the application afterwards.

• Make sure to have successfully configured delegated authentication to AD FS on your WorkflowGen instance following the instructions in the AD FS authentication section.

AD FS configuration

Currently, AD FS only supports three types of applications: Native, Server, and Web API. As you can see, there's nothing for single-page applications in browsers or even regular web applications that renders pages on the server. However, you can use the supported types to get what you need. The Native application type enables you to retrieve a client ID and to specify a callback URI that can be used to perform an implicit grant flow with a single-page application; AD FS will answer as expected since it supports the OpenID Connect protocol.

This configuration is done in several steps. First, you have to register a new native application in AD FS. Then, you have to give the application the necessary permissions to access the WorkflowGen GraphQL API.

Step 1: Register a new native application

1. In the AD FS Management window, navigate to the Application Groups folder, and double-click on the WorkflowGen group.

2. Click Add application.

3. Configure the application:

   1. Name: My Single-Page App

   2. Copy the client identifier, which you'll need in the application.

   3. Redirect URI: https://mysinglepageapp.com/callback

4. Click Add, then click Next.

5. Review the configuration; once you've finished, click Next and then Close.

Step 2: Grant access to the WorkflowGen GraphQL API

1. In the AD FS Management window, navigate to the Application Groups folder, and double-click on the WorkflowGen group.

2. Double-click on the WorkflowGen GraphQL API application.

3. On the Client Permissions tab, click the WorkflowGen Plus application, then click Add.

4. Select My Single-Page App in the application permissions list.

5. Make sure that the openid, profile, and email scopes are checked.

6. Click OK, then click OK in the WorkflowGen application group menu.

You've now configured your single-page app within AD FS.