Integration Okta with your web application

1. Introduction Okta

Okta is an amazing identity management SasS products. It provides single sign-on solution, serves as a Security Gateway and it can protect all the internal employee daily used applications.

It also provides Okta API, so you can integrate their solution into your application. For example, you can use okta authentication and authorization API to control login.

2. Create a Okta Web Application

You start by sign up in Okta Developer .  And then create a Web Application :

Specify Login redirect URIs

3. Integration Front End : okta_sign-in_widget

You could use Okta Sign-In Widget  as your login page.

var signIn = new OktaSignIn({baseUrl: 'https://dev-xxxx.oktapreview.com'});
  signIn.renderEl({
    el: '#widget-container'
  }, function success(res) {
    if (res.status === 'SUCCESS') {
      console.log('Do something with this sessionToken', res.session.token);
    } else {
    // The user can be in another authentication state that requires further action.
    // For more information about these states, see:
    //   https://github.com/okta/okta-signin-widget#rendereloptions-success-error
    }
  });
4. Integration Back End:  Implement the Authorization Code Flow

At a high-level, this flow has the following steps (copy from doc Okta):

  • Your application directs the browser to the Okta Sign-In page, where the user authenticates.
  • The browser receives an authorization code from your Okta authorization server.
  • The authorization code is passed to your application.
  • Your application sends this code to Okta, and Okta returns access and ID tokens, and optionally a refresh token.
  • Your application can now use these tokens to call the resource server (for example an API) on behalf of the user.

As mentioned in the above login widget javascript, you could get a res.session.token, you send this session token to backend controller.

Backend controller use this session token call /authorize endpoint to get a code (you might get a 302 response and in the response header you could find a location with a URI contains code param)

After that, using code to call /token endpoint to get the access and ID tokens.

Author: aerodc

Software Engineer