Use Dash to Build to Web Apps on Okta Data

The rich ecosystem of Python modules lets you get to work quickly and integrate your systems more effectively. With the CData Python Connector for Okta, the pandas module, and the Dash framework, you can build Okta-connected web applications for Okta data. This article shows how to connect to Okta with the CData Connector and use pandas and Dash to build a simple web app for visualizing Okta data.

With built-in, optimized data processing, the CData Python Connector offers unmatched performance for interacting with live Okta data in Python. When you issue complex SQL queries from Okta, the driver pushes supported SQL operations, like filters and aggregations, directly to Okta and utilizes the embedded SQL engine to process unsupported operations client-side (often SQL functions and JOIN operations).

Connecting to Okta Data

Connecting to Okta data looks just like connecting to any relational data source. Create a connection string using the required connection properties. For this article, you will pass the connection string as a parameter to the create_engine function.

To connect to Okta, set the Domain connection string property to your Okta domain.

You will use OAuth to authenticate with Okta, so you need to create a custom OAuth application.

Creating a Custom OAuth Application

From your Okta account:

1. Sign in to your Okta developer edition organization with your administrator account.
2. In the Admin Console, go to Applications > Applications.
3. Click Create App Integration.
4. For the Sign-in method, select OIDC - OpenID Connect.
5. For Application type, choose Web Application.
6. Enter a name for your custom application.
7. Set the Grant Type to Authorization Code. If you want the token to be automatically refreshed, also check Refresh Token.
8. Set the callback URL:
   • For desktop applications and headless machines, use http://localhost:33333 or another port number of your choice. The URI you set here becomes the CallbackURL property.
   • For web applications, set the callback URL to a trusted redirect URL. This URL is the web location the user returns to with the token that verifies that your application has been granted access.
9. In the Assignments section, either select Limit access to selected groups and add a group, or skip group assignment for now.
10. Save the OAuth application.
11. The application's Client Id and Client Secret are displayed on the application's General tab. Record these for future use. You will use the Client Id to set the OAuthClientId and the Client Secret to set the OAuthClientSecret.
12. Check the Assignments tab to confirm that all users who must access the application are assigned to the application.
13. On the Okta API Scopes tab, select the scopes you wish to grant to the OAuth application. These scopes determine the data that the app has permission to read, so a scope for a particular view must be granted for the driver to have permission to query that view. To confirm the scopes required for each view, see the view-specific pages in Data Model < Views in the Help documentation.

After installing the CData Okta Connector, follow the procedure below to install the other required modules and start accessing Okta through Python objects.

Install Required Modules

Use the pip utility to install the required modules and frameworks:

pip install pandas
pip install dash
pip install dash-daq

Visualize Okta Data in Python

Once the required modules and frameworks are installed, we are ready to build our web app. Code snippets follow, but the full source code is available at the end of the article.

First, be sure to import the modules (including the CData Connector) with the following:

import os
import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import cdata.okta as mod
import plotly.graph_objs as go

You can now connect with a connection string. Use the connect function for the CData Okta Connector to create a connection for working with Okta data.

cnxn = mod.connect("Domain=dev-44876464.okta.com;InitiateOAuth=GETANDREFRESH;OAuthSettingsLocation=/PATH/TO/OAuthSettings.txt")")

Execute SQL to Okta

Use the read_sql function from pandas to execute any SQL statement and store the result set in a DataFrame.

df = pd.read_sql("SELECT Id, ProfileFirstName FROM Users WHERE Status = 'Active'", cnxn)

Configure the Web App

With the query results stored in a DataFrame, we can begin configuring the web app, assigning a name, stylesheet, and title.

app_name = 'dash-oktaedataplot'

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.title = 'CData + Dash'

Configure the Layout

The next step is to create a bar graph based on our Okta data and configure the app layout.

trace = go.Bar(x=df.Id, y=df.ProfileFirstName, name='Id')

app.layout = html.Div(children=[html.H1("CData Extension + Dash", style={'textAlign': 'center'}),
	dcc.Graph(
		id='example-graph',
		figure={
			'data': [trace],
			'layout':
			go.Layout(title='Okta Users Data', barmode='stack')
		})
], className="container")

Set the App to Run

With the connection, app, and layout configured, we are ready to run the app. The last lines of Python code follow.

if __name__ == '__main__':
    app.run_server(debug=True)

Now, use Python to run the web app and a browser to view the Okta data.

python okta-dash.py

Free Trial & More Information

Download a free, 30-day trial of the CData Python Connector for Okta to start building Python apps with connectivity to Okta data. Reach out to our Support Team if you have any questions.

Full Source Code

import os
import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import cdata.okta as mod
import plotly.graph_objs as go

cnxn = mod.connect("Domain=dev-44876464.okta.com;InitiateOAuth=GETANDREFRESH;OAuthSettingsLocation=/PATH/TO/OAuthSettings.txt")

df = pd.read_sql("SELECT Id, ProfileFirstName FROM Users WHERE Status = 'Active'", cnxn)
app_name = 'dash-oktadataplot'

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.title = 'CData + Dash'
trace = go.Bar(x=df.Id, y=df.ProfileFirstName, name='Id')

app.layout = html.Div(children=[html.H1("CData Extension + Dash", style={'textAlign': 'center'}),
	dcc.Graph(
		id='example-graph',
		figure={
			'data': [trace],
			'layout':
			go.Layout(title='Okta Users Data', barmode='stack')
		})
], className="container")

if __name__ == '__main__':
    app.run_server(debug=True)