javascript - Failed to send activity: Bot returns an error 502

Question

I always see the below error.

POST https://directline.botframework.com/v3/directline/conversations/Jmw1dSA6scX3fV08d7wiJ7-6/activities 502

Below is the code that I am using to achieve SSO for my chatbot deployed on the SharePoint website. I always get the prompt login Oauth card when i open my chatbot. I will only be authenticated by passing the token number after i clicking the login button. What i am looking for is to get Sign in automatically without the login card as i have already login to Sharepoint website.

//**************** All functions are in this block **********************

function onSignin(idToken)
{
  alert("Inside onSignin: " + idToken);
  let user = clientApplication.getAccount();
  alert("User.name: " + user.name);
  document.getElementById("userName").innerHTML = "Currently logged in as " + user.name;
  let requestObj1 = {
    scopes: ["user.read", 'openid', 'profile']
  };
}

function onSignInClick()
{
  //console.log("Inside onSignInClick");
  let requestObj = {
    scopes: ["user.read", 'openid', 'profile']
  };

  clientApplication.loginPopup(requestObj).then(onSignin).catch(function (error) {console.log(error) });
}

function getOAuthCardResourceUri(activity) {
  if (activity && activity.attachments && activity.attachments[0] &&
       activity.attachments[0].contentType === 'application/vnd.microsoft.card.oauth' &&
       activity.attachments[0].content.tokenExchangeResource) {
     // asking for token exchange with AAD
         return activity.attachments[0].content.tokenExchangeResource.uri;
   }
}

function exchangeTokenAsync(resourceUri) {
  let user = clientApplication.getAccount();
  if (user) {
     let requestObj = {
       scopes: [resourceUri]
     };
  return clientApplication.acquireTokenSilent(requestObj).then(function (tokenResponse) {
    return tokenResponse.accessToken;
     })
     .catch(function (error) {
       console.log(error);
     });
     }
     else {
     return Promise.resolve(null);
   }
}

async function fetchJSON(url, options = {}) {
  console.log("url: " + url);
  console.log("options: " + options);
    const res = await fetch(url, {
      ...options,
      headers: {
           ...options.headers,
           accept: 'application/json'
      }});

      if (!res.ok)
      {
        throw new Error(`Failed to fetch JSON due to ${res.status}`);
      }
      console.log("res: " + JSON.stringify(res));
      return await res.json();
  }

//**************** All functions are in this block **********************


     console.log('Inside MSAL function');

     var clientApplication;
     (function ()
     {
       var msalConfig = {
         auth:{
               clientId: '<Have removed the client id>',
               authority: 'https://login.microsoftonline.com/<Have removed the directory id>'
         },
         cache:{
               cacheLocation: 'localStorage',
               storeAuthStateInCookie: true
         }};
       if (!clientApplication)
       {
            clientApplication = new Msal.UserAgentApplication(msalConfig);
       }
     } ());

(async function main() {

  // Add your BOT ID below

  var BOT_ID = "<Have removed the BOT ID>";
  var theURL = "https://powerva.microsoft.com/api/botmanagement/v1/directline/directlinetoken?botId=" + BOT_ID;

    var userId = clientApplication.account?.accountIdentifier != null ?
                    ("You-customized-prefix" + clientApplication.account.accountIdentifier).substr(0, 64)
                    : (Math.random().toString() + Date.now().toString()).substr(0,64);

  // const { token } = await fetchJSON(theURL);
  const {token}  = await fetchJSON(theURL);
  console.log("KMT - Token inside main: " + token);

  const directLine = window.WebChat.createDirectLine({ token });
  console.log("KMT - directLine inside main: " + JSON.stringify(directLine));

  const store = WebChat.createStore({}, ({ dispatch }) => next => action => {const { type } = action;
  console.log("KMT - store inside main: " + type);

  if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED')
  {
           dispatch({
              type: 'WEB_CHAT/SEND_EVENT',
               payload:
             {
                  name: 'startConversation',
                  type: 'event',
                  value:
                {
                    text: "hello"
                }
               }
              });
               return next(action);
   }
   if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY')
   {
         const activity = action.payload.activity;
         let resourceUri;
         if (activity.from && activity.from.role === 'bot' && (resourceUri = getOAuthCardResourceUri(activity)))
       {
            exchangeTokenAsync(resourceUri).then(function (token) {
            if (token)
          {
            //console.log("Inside if token: " + token);
                   directLine.postActivity({
                         type: 'invoke',
                         name: 'signin/tokenExchange',
                         value:
                     {
                             id: activity.attachments[0].content.tokenExchangeResource.id,
                             connectionName: activity.attachments[0].content.connectionName,
                             token
                         },
                         "from":
                     {
                             id: userId,
                             name: clientApplication.account.name,
                             role: "user"
                         }
                       }).subscribe(id => {
                            if (id === 'retry')
                        {   // bot was not able to handle the invoke, so display the oauthCard
                                return next(action);
                            }   // else: tokenexchange successful and we do not display the oauthCard
                         },
                         error => {
                                // an error occurred to display the oauthCard
                                return next(action);
                         }
          );
          return;
        }
      else return next(action);
    });
    }
  else return next(action);
  }
  else return next(action);
  });

  const styleOptions = {
     // Add styleOptions to customize Web Chat canvas
     hideUploadButton: true
  };


    window.WebChat.renderWebChat({
            directLine: directLine,
        store,
              userID:userId,
        styleOptions
          },
          document.getElementById('webchat')
    );
})().catch(err => console.error("An error occurred: " + err));

  <button id="myBtn" type="button">Power Virtual Agent</button>
  <div id="myModal" class="modal">
  <div class="modal-content" style="background-color: #ffd933">
     <span class="close">&times;</span>
<div id="chatwindow">
  <div id="heading">
    <div><span>SSO Test Bot</span></div>
  </div>
  <div id="webchat"></div>
</div>
</div>
</div>

question from:https://stackoverflow.com/questions/65942312/failed-to-send-activity-bot-returns-an-error-502

Answer 1

Waitting for answers