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

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
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
Microsoft Ignite

Microsoft Ignite

Join digitally, March 2–4, 2021 to explore new tech that's ready to implement. Experience the keynote in mixed reality through AltspaceVR!

New Super Users

Meet the Power Virtual Agents Community Super Users!

Congratulations to our Season 1 2021 Super User Crew!

PVA Commnity Blog

NEW Power Virtual Agents Community Blog

View articles posted by fellow community members on the Power Virtual Agents Community Blog!

Microsoft Ignite

Microsoft Power Platform: 2021 Release Wave 1 Plan

Power Platform release plan for the 2021 release wave 1 describes all new features releasing from April through September 2021.

Users online (71,689)