feat(CC): add oauth login to samples

docs/samples/contact-center/app.js

@@ -16,6 +16,8 @@ const credentialsFormElm = document.querySelector('#credentials');
 const tokenElm = document.querySelector('#access-token');
 const saveElm = document.querySelector('#access-token-save');
 const authStatusElm = document.querySelector('#access-token-status');
+const oauthFormElm = document.querySelector('#oauth');
+const oauthStatusElm = document.querySelector('#oauth-status');
 const registerBtn = document.querySelector('#webexcc-register');
 const teamsDropdown = document.querySelector('#teamsDropdown');
 const agentLogin = document.querySelector('#AgentLogin');
@@ -57,6 +59,11 @@ function changeAuthType() {
       toggleDisplay('credentials', true);
       toggleDisplay('oauth', false);
       break;
+    case 'oauth':
+      initOauth();
+      toggleDisplay('credentials', false);
+      toggleDisplay('oauth', true);
+      break;
     default:
       break;
   }
@@ -73,6 +80,64 @@ function toggleDisplay(elementId, status) {
   }
 }
 
+function initOauth() {
+  let redirectUri = `${window.location.protocol}//${window.location.host}`;
+
+  if (window.location.pathname) {
+    redirectUri += window.location.pathname;
+  }
+
+  // Reference: https://developer.webex-cx.com/documentation/integrations
+  const ccMandatoryScopes = [
+    "cjp:config_read",
+    "cjp:config_write",
+    "cjp:config",
+    "cjp:user",
+  ];
+
+  const webRTCCallingScopes = [
+    "spark:webrtc_calling",
+    "spark:calls_read",
+    "spark:calls_write",
+    "spark:xsi"
+  ];
+
+  const additionalScopes = [
+    "spark:kms", // to avoid token downscope to only spark:kms error on SDK init
+  ];
+
+  const requestedScopes = Array.from(
+    new Set(
+        ccMandatoryScopes
+        .concat(webRTCCallingScopes)
+        .concat(additionalScopes))
+      ).join(' ');
+
+  webex = window.webex = Webex.init({
+    config: generateWebexConfig({
+      credentials: {
+        client_id: 'C70599433db154842e919ad9e18273d835945ff198251c82204b236b157b3a213',
+        redirect_uri: redirectUri,
+        scope: requestedScopes,
+      }
+    })
+  });
+
+  localStorage.setItem('OAuth', true);
+
+  webex.once('ready', () => {
+    oauthFormElm.addEventListener('submit', (event) => {
+      event.preventDefault();
+      // initiate the login sequence if not authenticated.
+      webex.authorization.initiateLogin();
+    });
+
+    if (webex.canAuthorize) {
+      oauthStatusElm.innerText = 'Authenticated';
+    }
+  });
+}
+
 const taskEvents = new CustomEvent('task:incoming', {
   detail: {
     task: task,
@@ -120,6 +185,12 @@ function generateWebexConfig({credentials}) {
   };
 }
 
+if(localStorage.getItem('OAuth')) {
+  setTimeout(() => {
+    initOauth();
+    localStorage.removeItem('OAuth');
+  }, 500);
+}
 
 function initWebex(e) {
   e.preventDefault();
@@ -186,9 +257,9 @@ function register() {
         }
 
         const idleCodesList = agentProfile.idleCodes;
-
-        if(idleCodesList.length > 0) setAgentStatusButton.disabled = false;
-
+        if(idleCodesList.length > 0) {
+           setAgentStatusButton.disabled = false;
+        }
         idleCodesList.forEach((idleCodes) => {
           if(idleCodes.isSystem === false) {
             const option  = document.createElement('option');
@@ -203,7 +274,7 @@ function register() {
 
     webex.cc.on('task:incoming', (task) => {
       taskEvents.detail.task = task;
-      
+
       incomingCallListener.dispatchEvent(taskEvents);
     })
 }
@@ -307,10 +378,10 @@ async function fetchBuddyAgents() {
 incomingCallListener.addEventListener('task:incoming', (event) => {
   task = event.detail.task;
   taskId = event.detail.task.data.interactionId;
-  
+
   const callerDisplay = event.detail.task.data.interaction.callAssociatedDetails.ani;
   registerTaskListeners(task);
-  
+
   if (task.webCallingService.loginOption === 'BROWSER') {
     answerElm.disabled = false;
     declineElm.disabled = false;
@@ -467,4 +538,4 @@ function wrapupCall() {
     console.error('Failed to wrap up the call', error);
     wrapupElm.disabled = false;
   });
-}
+}

docs/samples/contact-center/index.html

@@ -45,6 +45,7 @@ <h2 class="collapsible">
         <div>
           <select name="auth-type" id="auth-type" onchange="changeAuthType()">
             <option value="accessToken">Access Token</option>
+            <option value="oauth">OAuth</option>
           </select>
         </div>
 
@@ -62,6 +63,12 @@ <h2 class="collapsible">
               <p id="access-token-status" class="status-par">Not initialized</p>
             </div>
           </form>
+          <form id="oauth" class="hidden">
+            <div>
+              <button id="oauth-login-btn" type="submit" class="btn-code">Login</button>
+              <p id="oauth-status" class="status-par">Not Logged In.</p>
+            </div>
+          </form>
         </fieldset>
       </div>