Get access token using Javascript

Questions
1

I have a Spring Boot app that’s going to use Spring Security and Okta to lock down the API endpoints.

The setup there is fairly straight forward. I also need to be able to use javascript to post to an endpoint and I believe I need to set the Bearer token in the Authorization header.

By the time the user is on the page with the javascript post, they will already be signed in to Okta.

I’ve tried to use the javascript examples as shown here

https://developer.okta.com/quickstart-fragments/widget/default-example/

but I’m not able to get to the token. The user has a session so the console will show “Welcome back, (user info here)”

I’m basically trying to do what callMessagesApi() is showing but the access token is not there since the user has a session and the following javascript did not run:

// Save the tokens for later use, e.g. if the page gets refreshed:
        oktaSignIn.tokenManager.add('accessToken', accessToken);

What’s the correct way to get access to the token so that I can send it back to the server?

2

Hi @Vladimir

The access token should be present in the res retrieved from the success method, as shown in the following example:

<!DOCTYPE html>
<html>
<head>
<!-- Latest CDN production Javascript and CSS: 2.16.0 -->
<script
  src="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.16.0/js/okta-sign-in.min.js"
  type="text/javascript"></script>
<link
  href="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.16.0/css/okta-sign-in.min.css"
  type="text/css"
  rel="stylesheet"/>

<!-- Theme file: Customize or replace this file if you want to override our default styles -->
<link
  href="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.16.0/css/okta-theme.css"
  type="text/css"
  rel="stylesheet"/>
</head>
<body>
<div id="widget-container"></div>

<script>
var oktaSignIn = new OktaSignIn({
    baseUrl: "https://org.okta.com",
    clientId: "0oamd11xmu7WZUbn4356",
    redirectUri:"http://localhost/me",
    authParams: {
        issuer: "https://org.okta.com/oauth2/ausmr67xnx0PrAbI7356",
        responseType: ['token', 'id_token']
    }
});

oktaSignIn.renderEl({
    el: '#widget-container'
}, function success(res) {
    if (res.status === 'SUCCESS') {
        var accessToken = res[0];
        var idToken = res[1];
        oktaSignIn.tokenManager.add('accessToken', accessToken);
        oktaSignIn.tokenManager.add('idToken', idToken);
        console.log("Access token: " + oktaSignIn.tokenManager.get('accessToken')['accessToken'])
		console.log("ID token: " + oktaSignIn.tokenManager.get('idToken')['idToken'])
    } else {
        console.error(err);
    }
});
</script>
</body>
</html>
3

Thanks but this didn’t work for me. I changed the baseUrl, clientId, redirectUri and Issuer.

btw, what is ausmr67xnx0PrAbI7356 from your example?

It should be something like this right?

issuer: "https://my dev ##.okta.com/oauth2/default

Once I change the values and run I get the Okta screen, user logs in, the console log never happens, I added javascript alert messages, those never pop up.

The page redirects to another login that is not Okta branded.

I have a page that i can navigate to and check the user information. It’s all there so I know the user is logged in ok.

Also, when I do this I’m always using incognito mode.

I figured out a way to solve my issue by having the javascript do a form post so that the browser sends the cookies / headers to the backend.

It still would be nice to have a working example on how to post with javascript and be authenticated.

4

I have absolutely the same issue now. Did someone found any solving method? :slight_smile:

1 Like
5

Hi @rares

Can you please open a support case with us through an email to developers@okta.com in order to further review the issue?

6

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.