Sign-In Widget: Need a bit of help

BACKGROUND:

  • I have a number of CMS sites running October CMS.
  • Currently, admin users log into these sites’ backend dashboards via a standard username-and-password login form. Of course, this means that if BobUser administrates five different sites, then he has five different accounts (each with its own password and set of permissions).
  • My goal is to build an SSO plugin for October, so that BobUser can authenticate to all five sites with his Okta account. (I also want to use Okta to manage BobUser’s permissions within each of the five sites.)
  • I want to use the Sign-In Widget, because the docs say it’s the simplest way to achieve my goal.
  • I’m an experienced developer, but Okta kind of makes my head spin. So, please explain like I’m five :slight_smile:

WHAT I’VE DONE SO FAR:

  • For development purposes, I’m developing a site locally, at octpropdev.test.

  • In the Okta Developer Console, I created a new application, with the following settings:

  • I also created a test user, and granted them access to the application.

  • On my site’s login page (http ://octpropdev.test/backend), I’ve installed the Sign-In Widget, according to these instructions. My JavaScript code is identical to the sample code shown at that link, except that I’ve customized the OktaSignIn config object with real values:

    var oktaSignIn = new OktaSignIn({
        baseUrl: "https:\/\/dev-xxxxxx.okta.com",
        clientId: "MY_APPLICATIONS_CLIENT_ID",
        authParams: {
        issuer: "https:\/\/dev-xxxxxx.okta.com\/oauth2\/default",
            responseType: ['token', 'id_token'],
          display: 'page'
        },
        redirectUri: 'http://octpropdev.test/THIS_IS_THE_LOGIN_REDIRECT_URI'
    });      
    

WHAT’S CURRENTLY HAPPENING:

  • I navigate to my site’s login page, at http://octpropdev.test/backend. I see the Okta Sign-In Widget.

  • I enter the test user’s email address and password.

  • I get redirected to a URL like this:

    http ://octpropdev.test/THIS_IS_THE_LOGIN_REDIRECT_URI#id_token=XXX&access_token=XXX&token_type=Bearer&expires_in=3600&scope=email+openid&state=XXX
    

MY QUESTIONS:

  1. Am I on the right track? Given my goal, am I taking a sensible approach so far?

  2. What’s the next step? Obviously, my site needs to listen for the request to /THIS_IS_THE_LOGIN_REDIRECT_URI, and do something with id_token, access_token, etc. But what, exactly, should it do?

Yes, I’ve been all over the Okta docs – but they’re a confusing maze.

I just need a sanity check that I’m on the right path, and a nudge toward the next step. Any guidance would be appreciated. Thanks!

This is really confusing me:

Sign In to Okta and SSO Directly to an App

If you’d like to sign the user directly in to an application within Okta, you just redirect to the specific URL for that application. To find that URL, go to that application’s page in your Okta org and find the embed link.

Does this (“sign the user directly in to an application within Okta”) describe what I’m trying to do? I think that it does.

However, when I try to get the embed link as suggested, that option is grayed out in the dropdown.

And it’s not clear what the “embed link” is, exactly, or what I’m supposed to do with it.

I’m starting to think that the Sign-In Widget doesn’t make sense for my situation. All of the docs about the Widget seem to assume that you’re integrating into a JavaScript SPA.

Would I be better served by the Authorization Code Flow? It makes for a slightly less user-friendly experience (which is why I opted for the Sign-In Widget in the first place) – but at this point, I just need something that works

Your application can now utilize the access token and scopes to make an authorization decision

https://developer.okta.com/use_cases/api_access_management/#securing-applications