cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
HemanthN
Helper III
Helper III

How to configure Single Sign On in PVA with Sharepoint and Teams?

Hi All,

 

I am trying to configure Single Sign on in Power Virtual Agent with Sharepoint. I am following the document https://docs.microsoft.com/en-us/power-virtual-agents/configure-sso

 

Below is the html code and i have added the Client ID of Canvas API,Directory ID and BOT ID.

 

<!DOCTYPE html>
<html>
<head>
   
    <script>
        var clientApplication;
        (function () {
            var msalConfig =
            {
                auth:
                {
                    clientId: '<Client ID [CanvasClientId]>',
                    authority: 'https://login.microsoftonline.com/<Directory ID>'
                },
                cache:
                {
                    cacheLocation: 'localStorage',
                    storeAuthStateInCookie: false
                }
            };
            if (!clientApplication) {
                clientApplication = new Msal.UserAgentApplication(msalConfig);
            }
        }());
    </script>
</head>


<body>
    <script>
        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);
            }
        }
    </script>
    <script>

        (async function main() {

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

            const { token } = await fetchJSON(theURL);
    const directLine = window.WebChat.createDirectLine({ token });
   var userID = clientApplication.account?.accountIdentifier != null ? ("Your-customized-prefix-max-20-characters" + clientApplication.account.accountIdentifier).substr(0,64) : (Math.random().toString() + Date.now().toString().substr(0,64)  // Make sure this will not exceed 64 characters 
        const store = WebChat.createStore({}, ({ dispatch }) => next => action => {
         const { type } = action;
         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) {
                 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.userName,
                   role:"user"
                 }
                 }).subscribe(
             id => {
              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));


    </script>
</body>
</html>

 

 

I am seeing the below errors as in the snapshot: I am using the same code from the document but i have no clue what is going on. wrong.
1.png2.png



2 REPLIES 2
renatoromao
Super User
Super User

Hi @HemanthN ,

 

Try to add the below scripts inside the HTML file.

<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<script type="text/javascript" src="https://alcdn.msauth.net/lib/1.2.0/js/msal.js"></script>
<script src="https://unpkg.com/@azure/storage-blob@10.3.0/browser/azure-storage.blob.min.js"
integrity="sha384-fsfhtLyVQo3L3Bh73qgQoRR328xEeXnRGdoi53kjo1uectCfAHFfavrBBN2Nkbdf"
crossorigin="anonymous"></script>
<script type="text/javascript">
if (typeof Msal === 'undefined') document.write(unescape("%3Cscript src='https://alcdn.msftauth.net/lib/1.2.0/js/msal.js' type='text/javascript' %3E%3C/script%3E"));
</script>


Did I answer your question? Mark my post as a solution!
Thanks!

Renato Romão,

Connect with me here 😉

Power Virtual Agents course (+2.300 students | PROMOTIONS) : English | Português

Hi @renatoromao ,

On adding the code with reference to the github doc code provided. I no longer see the MSAL error,Thanks. But the syntax error still persist on the below code.

 var userID = clientApplication.account?.accountIdentifier != null ? ("mypva" + clientApplication.account.accountIdentifier).substr(0,64) : (Math.random().toString() + Date.now().toString().substr(0,64);
 

Error log from chrome console: Uncaught SyntaxError: Unexpected token '.'

 

Regards,

Hemanth

Helpful resources

Announcements
March Update

Welcome to the User Group Private Preview

Check out new user group experience and if you are a leader please create your group

MBAS on Demand

Microsoft Business Applications Summit sessions

On-demand access to all the great content presented by the product teams and community members! #MSBizAppsSummit #CommunityRocks

Users online (21,103)