Orchestration quickstart: Web SDK

This guide describes how to quickly integrate Identity Orchestration journeys into your web application.

See SDK reference

Introduction

The Orchestration SDK enables client-side developers to build user experiences that interact with Client SDK journeys.

Each journey contains a business workflow, such as login or secure user onboarding. It consists of backend steps, such as data processing or invoking external systems, and client-facing steps, such as a login form or document verification. The SDK allows the client application to present screens and prompt for user input, and then send this information back to the journey for further processing.

Whenever the client-side interaction requires additional Mosaic platform capabilities, such as passkeys or risk detection, the developer needs to activate the appropriate SDK module to perform the step and collect the required input. This allows separation of concerns between the journey workflow handling, and the specific capability used.

This guide will use the "Hello World" journey template and instruct you how to build a client side application that works with it. Here is a short video that describes this journey, and how a sample web application interacts with it

Before you start

Before the SDK can start running journeys, make sure to:

☐   Create a journey for this tutorial. In the admin portal, go to the Orchestration section, Identity journeys. From there click on Templates, and choose the Level 0 tutorials / Hello world template. Click to create a journey from this template. Set the name to hello-world-quickstart
☐   Create an application and obtain the auto-generated Client ID as defined here
☐   Allow Mosaic IPs and domains on your network
☐   Extend the Content-Security-Policy header, if CSP is enabled on your web server

Step 1: Load SDK

Load the SDK by adding the following HTML script tag in all relevant pages:

<!--Loads the latest SDK version. See changelog for details and update version if necessary -->
<script src="https://platform-websdk.transmitsecurity.io/platform-websdk/latest/ts-platform-websdk.js" id="platform-sdk" defer="true"></script>

Step 2: Initialize SDK

Initializing the SDK configures it to work with your client ID, which is the context under which the entire journey is executed. It also allows setting the base URL for the SDK to use, whether a Mosaic-provided path or your own proxy.

// Initialize an instance of the Platform SDK
await window.tsPlatform.initialize({
  clientId: 'my-client-id',  // Client ID from app settings in the Admin Portal
  ido: {
    serverPath: 'https://api.transmitsecurity.io/ido' // Base URL, default is for US region
    }
});

Step 3: Start journey

Starting a journey is usually a response to some user interaction, such as clicking a login or sign-up button. Your application should present a button and call the below on user click. Note we use the name we provided for the journey we created from the template:

// Start a journey with the id 'hello-world-quickstart'
try {
  const idoResponse = await window.tsPlatform.ido.startJourney(
      'hello-world-quickstart'
  );
  // Handle service response below
  ...
} catch(error) {
  switch(sdkError.errorCode) ...
}

Step 4: Handle service response

After starting the journey, the client app waits for the IdoServiceResponse. It will contain all the information the client needs in order to determine what to do next.

To handle the service response, the client app needs to:

1. Select a handler based on the step
2. Implement the hello world form handler
3. Implement the display information step handler

1. Select handler

Upon receiving the IdoServiceResponse, launch a handler that executes the relevant step by switching/selecting on the IdoServiceResponse.journeyStepId parameter. In the hello-world-quickstart journey we created, there are two steps that we will have to handle:

1. A Get Information from Client step. This step expects the client side to collect some data and send back. The step is configured with the Step ID property set to hello_world_form . This will be the value inside the journeyStepId attribute.
2. A Display Information step that sends presentable text based data collected from the first step. This will have a fixed ID, so the value inside the journeyStepId is IdoJourneyActionType.Information .
3. Add handlers for Success and Rejection completions

Each handler will process the data, display whatever UI is needed, and call submitClientResponse() when the interaction is concluded, more on this in the next sections. This is how the app code would dispatch the above handlers:

switch (idoServiceResponse.journeyStepId) {
    case IdoJourneyActionType.Information:
        handleInformationStep(idoServiceResponse);
        break;
    case 'hello_world_form':
        handleHelloWorldForm(idoServiceResponse);
        break;
    case IdoJourneyActionType.Success:
        handleSuccessfulCompletion(idoServiceResponse);
        break;
    case IdoJourneyActionType.Rejection:
        handleRejection(idoServiceResponse);
        break;
    default:
        throw "Unknown step ID";
}

2. Implement the Hello World form handler

The following handler is used to collect information from the user as described in Get Information from Client step documentation. Specifically, the Hello world form handler should allow the user to enter two strings that should be sent back as username and password. This matches the expected schema as you can see in the journey's Get Information from Client step, under Schema field configuration:

{
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "type": "object",
  "properties": {
    "username": {
      "type": "string"
    },
    "password": {
      "type": "string",
      "format": "password"
    }
  }
}

You need to display a form that collects these fields, and on user submit sent back to the orchestration service as demonstrated below. Note the response type ClientInput is standard for almost all journey steps:

// display form to user and collect the required values

let data = { // compose data that matches the exspected schema
    "username": collectedUserName,
    "password": collectedPassword
};

let idoResponse = window.tsPlatform.ido.submitClientResponse(
    ClientResponseOptionType.ClientInput,
    data
);

3. Implement the Display Information handler

The Display Information step is used to display an information screen, as described in the Display Information step guide.

Your handler code should show a screen that displays the information sent from the server, using the data property provided in the idoServiceResponse object. The specific structure of the data that will be sent for this step is described below, as well as in the step guide. Note that in our journey, the text attribute will contain data collected from the user in the previous step:

{
 "data": {
   "title": "Collected client information",
   "text": "Here is what we got from the client side: {...}",
   "button_text": "OK"
 }
}

The above data is exposed and used as seen here:

let data = idoServiceResponse.data;

let title = data.title;
let text = data.text;
let buttonText = data.button_text;

// display UI based the above, and on  button click call the the below
let idoResponse = window.tsPlatform.ido.submitClientResponse(
    ClientResponseOptionType.ClientInput
);

Step 5: Complete journey

The orchestration service signals journey completion by setting the journeyStepId property to Rejection or Success. The specific enum for each SDK is described in the select handler above. In our journey we expect a successful response. The idoServoceResponse.token property contains a JWT token as a proof of journey completion.

Next steps

You can now proceed to read the in-depth Web SDK guide