Enable B2B SSO with OKTA for A SaaS App (with Existing Local Identity Store and Login Page)

Preview

In this tutorial, we will use the Datawiza Access Proxy (DAP) to enable B2B SSO for a header-based Web App. The IdP we will use is Okta. We will use DAP's sidecar deployment mode, which means DAP and this app are running on the same server.

• The application will run on localhost:3001, which provides an existing login page for username-password login:
• The DAP will run on localhost:9772, which means the traffic to the app will reach DAP (running on port 9772) first and then be proxied to the application (running on port 3001).
• We will provide the docker images for the DAP and this header-based application.

Part I: Okta Configuration

You will need to register an application in the Okta developer console and get the following values for this application:

• Client ID
• Client Secret
• Okta Org
• (Optional) Okta API Token

These values will later be used to set up Datawiza Access Proxy in Datawiza Cloud Management Console. Please follow IdP Configuration Guide: Okta instructions on how to get those keys/values.

Part II: Create Application on Datawiza Cloud Management Console (DCMC)

You need to create an application and generate a keypair of (PROVISIONING_KEY, PROVISIONING_SECRET) for this app on the DCMC.

Please follow Step2 : Datawiza Cloud Management Console to configure and select B2B as Platform when adding application.

Part III: Run DAP With a Header-Based Application

To associate the DAP with your app, you need to make a few code changes. For example, here is the code change of our header-based app:

You can use either Docker or Kubernetes to run DAP. The following is an example docker-compose.yml file. You may need to login to our container registry to download the images of DAP and the header-based app. See Step3 : Configure DAP and SSO Integration for more details or Deploy DAP with Kubernetes for Kubernetes-specific instructions.

version: '3'

services:
  datawiza-access-broker:
    image: registry.gitlab.com/datawiza/access-broker
    container_name: datawiza-access-broker
    restart: always
    ports:
      - "9772:9772"
    environment:
      PROVISIONING_KEY: #############################
      PROVISIONING_SECRET: #############################

  header-based-app:
    image: registry.gitlab.com/datawiza/header-based-app:b2bsso
    container_name: ab-demo-header-app
    restart: always
    ports:
      - "3001:3001"

After executing docker-compose -f docker-compose.yml up, open a browser and type in http://localhost:9772/. The login page of our header-based app should be shown: Click the button SSO, you should be redirected to the B2B SSO login page:

Input the Organization Name that you have previously configured as the B2B Connection Configuration, and click Continue, you should see the Okta login page as follows. Note that if you are already logged in with Okta in your browser, you may need to logout to see the login page.

Part IV: Pass User Attributes to the Header-Based App

DAP gets user attributes from IdP and can pass the user attributes to the application via header or cookie.

Please follow the instructions of Step4 : Pass User Attributes to pass the user attributes to the header-based app, which is expecting:

• email
• firstname
• lastname

If you want to get user's groups, you need to add groups in custom claim. You can see Add Claims in ID Token and Create Claims for more details.

After successfully configuring the user attributes and adding groups in Okta claim and DCMC configuration, you should see the green check sign for each of the user attributes as follows.

Conclusion

In this tutorial, you learned how to use Datawiza Cloud Management Console to configure a B2B SaaS app using OKTA as the Identity Provider. Your app should now support SSO, multiple-tenant, and retrieve user’s information correctly.

If you have any questions, please contact support@datawiza.com and we’d love to help.