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.250 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
PP Bootcamp Carousel

Global Power Platform Bootcamp

Dive into the Power Platform stack with hands-on sessions and labs, virtually delivered to you by experts and community leaders.

secondImage

Power Platform Community Conference On Demand

Check out Tomasz Poszytek's session from the 2020 Power Platform Community Conference!

PVA Commnity Blog

NEW Power Virtual Agents Community Blog

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

Top Solution Authors
Top Kudoed Authors
Users online (8,038)