1: Go to the sign-in page The first step is to call the StartWidgetSigninAsync
method when the page that contains the embedded widget is loaded. The IdxClient
contains the configuration information (either from the okta.yaml
file, env variables, or passed in from the constructor) to establish a connection to the Okta org and application.
The following sample code shows the instantiation of the IdxClient
and the StartWidgetSignInAsync
call.
Note: In the preceding MVC setup, the response's SignInWidgetConfiguration
property is passed to the view as a model.
The StartWidgetSigninAsync
call returns a WidgetSigninResponse
response object. The SignInWidgetConfiguration
property of this response object contains information that you need to pass to the Sign-In Widget to initialize the page. The following example shows the object structure in JSON format. Replace {widgetVersion}
with the latest version (opens new window) of the widget (7.20.1).
Important : In Okta Sign-In Widget version 7+, Identity Engine is enabled by default. If you’re using an earlier version than 7, you must explicitly enable Identity Engine features by setting "useInteractionCodeFlow": true
in the configuration settings shown in the previous example. If you’re using version 7+ and you want to use Okta Classic Engine rather than Identity Engine, specify "useClassicEngine" = true
in the configuration settings.
2a: Add namespaces and model If using an MVC setup (as in the sample), the namespaces and model need to be defined in the page.
2b: Add the Okta CDN link Add the Sign-In Widget source to your page by referencing the Okta CDN, replacing {widgetVersion}
with the latest version (opens new window) of the widget:
See also Using the Okta CDN (opens new window) . The latest version of the widget is 7.20.1.
The next step includes the following activities:
Create a JavaScript object from the model. Initialize the JavaScript model object and the widget object that passes in the div id
(for example, okta-signin-widget-container
) on the page. Call the showSignInAndRedirect
method on the widget object to display the sign-in page. The div id
that you passed into the widget needs to match a div
on the page that you’re going to create in the next step. See the following sample code.
2d: Add div tag The final step is to add a div
element with the id
(for example, okta-signin-widget-container
). The id
needs to match the id
that you passed into the widget object in the previous step.
The final step is to run your app. If the widget and Okta org are properly configured, the Sign-In Widget loads and appears, similar to the following image.
Note: The Forgot password? and Sign Up links are configurable elements in your Okta org and may not appear on the page.