Authenticate webmessaging with OKTA - openID

[fransiska.hendra]

hi,

Just wondering if anyone can help with this, https://developer.genesys.cloud/blueprints/messenger-authentication-okta-integration-blueprint/

As per advised, i created an OKTA application as following:

and able to get access token with OKTA authentication as following:

and according to authentication flow:

need to send Client credentials to Genesys Cloud , just wondering how do we send the this token to webmessaging, so chat button will appeared in the page ?

is it using this code:

Genesys('registerPlugin', 'AuthProvider', (AuthProvider) => {

AuthProvider.registerCommand('getAuthCode', (e) => {

//Messenger calls this command to get the the tokens.

e.resolve({
authCode: ,
redirectUri: ,
nonce: ,
maxAge:
codeVerifier:
});
});
});

Please advise how do we use token retrieved from OKTA to get chat button appeared in the page?

Thanks for help in advance.
Fransiska

[vpirat]

Hi Fransiska,

From the snapshot. your Okta app looks ok
You should not try to get the tokens yourself (as shown in your picture) but instead delegate this action to Messenger that will use the Genesys webmessaging login api for this purpose.
What you need to do is to get the code sent back from okta server (redirect url) after invoking /authorize request.
You can exchange the code only once to get the tokens.
Also, you have one minute max for using it and invoking the Genesys login api with it (through Messenger or not).
This delay is not configurable and enforced by the Okta server.
If the delay is expired, you need to issue a new /authorize request.

If Messenger if configured properly, I believe this should be handled transparently for you. Given the code was not exchanged previously.

Can you confirm that Messenger app is configured and is loading on your web page ?

Regards,
V.P.

[fransiska.hendra]

Hi VP,

for your below advise,

@vpirat

You should not try to get the tokens yourself (as shown in your picture) but instead delegate this action to Messenger that will use the Genesys webmessaging login api for this purpose.
What you need to do is to get the code sent back from okta server (redirect url) after invoking /authorize request.

Can you advise me what function in webmessaging to get the token?

Is this using this function?

Genesys('registerPlugin', 'AuthProvider', (AuthProvider) => {

AuthProvider.registerCommand('getAuthCode', (e) => {

//Messenger calls this command to get the the tokens.

e.resolve({
authCode: ,
redirectUri: ,
nonce: ,
maxAge:
codeVerifier:
});
});
});

but the problem is I am using nodeJS, and seems Genesys library doesnt work with NodeJS.

And for your question: Can you confirm that Messenger app is configured and is loading on your web page ? the answer no, its not happening.

Looking forward for your advise

Fransiska

[fransiska.hendra]

hi VP,

here is my code that not get token by myself instead delegate to WebMessanger:

<script>
          (function (g, e, n, es, ys) {
              g['_genesysJs'] = e;
              g[e] = g[e] || function () {
                (g[e].q = g[e].q || []).push(arguments)
              };
              g[e].t = 1 * new Date();
              g[e].c = es;
              ys = document.createElement('script'); ys.async = 1; ys.src = n; ys.charset = 'utf-8'; document.head.appendChild(ys);
            })(window, 'Genesys', 'https://apps.mypurecloud.com.au/genesys-bootstrap/genesys.min.js', {
              environment: 'apse2',
              deploymentId: 'ddaaa095-d54d-4bb9-b596-9f9beed01dd3'
            });
</script>

<script>

  function generateCodeVerifier(length) {
            let text = '';
            const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-._~';
            for (let i = 0; i < length; i++) {
                text += possible.charAt(Math.floor(Math.random() * possible.length));
            }
            return text;
   }


  const oktaConfig = {
          redirectUri: 'http://localhost',
          postLogoutRedirectUri: 'http://localhost',
          clientId: '0oa6bfvjuz2uGGI4e5d7',
          issuer: 'https://dev-15132560.okta.com',
          scopes: ['openid', 'email', 'profile', 'offline_access'],
          pkce: false,
          responseType: 'code',
          maxAge : 86400
  };
  const authClient = new OktaAuth(oktaConfig);

  (function() {

      Genesys('registerPlugin', 'AuthProvider', (AuthProvider) => {

        var url =window.location.href;
                if(url.indexOf('code')<=-1){
                  authClient.signInWithRedirect({
                      originalUri:'http://localhost',
                      ...oktaConfig
                  });
                }
                else {
                  let oktaTransactionStorage = window.document.cookie.toString(); // Get nonce from cookie

                  var nonce1='';
                  if (oktaTransactionStorage) {
                    const storage = oktaTransactionStorage.split('okta-oauth-nonce=')[1]; // Extract 'okta-oauth-nonce' cookie from 'oktaTransactionStorage'
                    nonce1= storage.split(';')[0];
                  }

                  const urlParams = new URLSearchParams(window.location.search); // Get the authorization response which is added as a query string from the redirect URL
                  const authCode1 = urlParams.has('code') ? urlParams.get('code'):''; // Get code from the query string
                  var codeVerif=JSON.parse(window.sessionStorage.getItem("okta-transaction-storage")).codeVerifier;

                  var verifier = generateCodeVerifier(128); 

                  console.log('authcode: '+authCode1);
                  console.log('codeVerif: '+codeVerif);
                  console.log('nonce1: '+nonce1);
                  console.log('verifier: '+verifier)
                      /* Register Command - mandatory */

                  AuthProvider.registerCommand('getAuthCode', (e) => {
                      e.resolve({
                          authCode: authCode1,  
                          redirectUri: 'http://localhost',  
                          nonce: nonce1,  
                          maxAge: 86400,      
                          codeVerifier: verifier  
                        });
                    

                  });

                  AuthProvider.subscribe('Auth.ready', (res) => {
                          //bAuthenticated = AuthProvider.data('Auth.authenticated');
                          console.log('AUTH READY');
                          console.log(res);
                  });

                  AuthProvider.subscribe('Auth.authenticated', (res) => {
                              console.log('Auth.authenticated');
                              console.log(res);
                  });
                    
                  AuthProvider.ready();

                }

      });
      
    })(); 

but I always got error 401

Is there anything missing in WebMessanger configuration? Is there anything you can help from the backend purecloud?

Looking forward for your response.

Thanks
Fransiska

[vpirat]

Hi,

I think that the first step here is to properly load and display Messenger in your web browser.
Messenger is a javascript snippet that is downloaded from our CDN.
So no issue as far as I see with NodeJS which is server side.
All you need to do is properly reference Messenger in your HTML page (generated or not by nodeJS).

Please refer to this article for instructions:

Deploy Messenger - Genesys Cloud Resource Center

Once you get that working, authentication is the next step.

Hope this helps.
V.P.

[fransiska.hendra]

hi VP,

I got this working now, thanks for your help.

Fransiska

[vpirat]

Glad you got it working.

Best regards,
V.P.