How to configure SSO in PVA?

[Anonymous]

Hi,

I am trying to connect SSO in PVA on the Sharepoint website. I see the below error on the chrome console.

I see a syntax error from the below line of code. I am following the SSO configuration by the doc provided below: "https://docs.microsoft.com/en-us/power-virtual-agents/configure-sso"

The below code is from the doc.

 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)

I had posted by query before as well but no luck.. https://powerusers.microsoft.com/t5/General/How-to-configure-Single-Sign-On-in-PVA-with-Sharepoint-a...

Can anyone please help me out here?

Regards,

Hemanth

[hrztmn]

I was trying out the SSO samples shared in docs
https://docs.microsoft.com/en-us/power-virtual-agents/configure-sso

and

https://github.com/microsoft/PowerVirtualAgentsSamples/blob/master/BuildYourOwnCanvasSamples/3.singl...

with no success. I got the same issue (errorcode 502) from both samples during runtime. Seems like the code could not intercept with the OBO token as soon as the Login button got prompted?

My configuration of app registrations for authentication and canvas app are as per the docs.  Any help is appreciated

[BoLi]

 Can you debug the code and check which step in the sample html code failed? besides, if you can successfully send the invoke activity and it still does not work. then paste the conversation id (using /debug conversationid) here and i can take a look.

[Anonymous]

Hi @BoLi,

We just have the link "https://<Name of the org>.sharepoint.com/" to access our SharePoint website.

Once I access the link I get the below.

Once I select the account I enter the password.

Then I am logged in.

How to get the login token return from AAD back to your home page and use the token and then call AAD again to exchange this for a OBO token and then put OBO token as part of invoke activity and send it to PVA.

Can you please explain this as per the above scenario as we do not have a login button here? It would really be a great help for us!

Regards,

Hemanth

[PaulCullivan]

As a follow up to this we did get this working by using HttpContextAccessor to get the logged in user name and passing this through under exchangeTokenAsync as loginHint; doing this worked.  @BoLi - thanks again for your assistance.

[Anonymous]

Hi @PaulCullivan /@BoLi ,

Can you please share the steps / code changes on how you got this working. This would be a great help to save us. 

[Anonymous]

@PaulCullivan @BoLi , Can you please help us by providing the code changes/ steps that was done to achieve this. We really need to get this working. Please help!

[Anonymous]

Hi @PaulCullivan / @BoLi / @CleberM ,

Please look into the below code. Even after passing the loginHint with the login User Name I am not able to login directly it still prompt the login card.

function exchangeTokenAsync(resourceUri) {
  
        let user = clientApplication.getAccount();
        if (user) {
          console.log("KMT - user exist " + JSON.stringify(user));
          //KMT - user exist {"accountIdentifier":"8ad1e23f-1777-4150-86cd-abcdefghi","homeAccountIdentifier":"OGFkMWUyMZj.ZTdlZ.....","userName":"abc@xyz.com","name":"<My-Name>","idToken":{"aud":"7dd5c894-17f5-4fd1-be79-caaaaaacc"

          console.log("KMT - user exist UserName " + JSON.stringify(user.userName));
          //KMT - user exist UserName "abc@xyz.com"

          let requestObj = {
            scopes: [resourceUri],
            loginHint: user.userName, //Here I am passing abc@xyz.com
          };

          console.log("KMT - requestObj: " + JSON.stringify(requestObj)); 
          //KMT - requestObj: {"scopes":["api://fed35d0e-aaaa-bbbb-aae0-54a25735xyze/Canvas.PVA.SSO"],"login_hint":"abc@xyz.com"}

          return clientApplication.acquireTokenSilent(requestObj).then(function (tokenResponse) {

          console.log("KMT - exchangeTokenAsync requestObj: " + tokenResponse.accessToken); 
          //KMT - exchangeTokenAsync requestObj: eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1.............
          
          return tokenResponse.accessToken;

          })

          .catch(function (error) {
              console.log("KMT - exchangeTokenAsync error: " + error);
            });
          }else{
          return Promise.resolve(null);
        }
      }

I see the below error in the logs:

POST https://directline.botframework.com/v3/directline/conversations/gzasBGpw79CRPiuiBjULa-o/activities 502

I also see that it enters the if blog "bot was not able to handle the invoke, so display the oauthCard" from the below code.

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.name,
                          role: "user",
                        },
                      })
                      .subscribe(
                        (id) => {
                          console.log("id: " + id);
                          if (id === "retry") {
                            console.log(
                              `KMT - bot was not able to handle the invoke, so display the oauthCard`
                            );
                            // bot was not able to handle the invoke, so display the oauthCard
                            return next(action);
                          }
                          console.log(
                            `KMT - else: tokenexchange successful and we do not display the oauthCard`
                          );
                          // else: tokenexchange successful and we do not display the oauthCard
                        },
                        (error) => {
                          // an error occurred to display the oauthCard
                          console.log(
                            `KMT - an error occurred to display the oauthCard`
                          );
                          return next(action);
                        }
                      );
                    return;
                  } else return next(action);
                });
              } else return next(action);
            } else return next(action);
          }
        );

And I also see the below error in the log

InteractionRequiredAuthError: AADSTS65001: The user or administrator has not consented to use the application with ID 'mnopqurs-17f5-aaaaa-be79-cb490abcdefg' named 'Canvas PVA Bot SSO'. Send an interactive authorization request for this user and resource.
Trace ID: a4447ed8-2465-4c06-a967-026b033cfb00
Correlation ID: 790684f3-6f77-43fe-89b3-aa92614080e9
Timestamp: 2021-01-19 10:34:16Z

[BoLi]

@Anonymous , you will still have to pass the login token to PVA in order for SSO to work. that is a must.  For the error you attached, it says the user has not consent to use the application which means you don't grant tenant level consent for your app(Canvas PVA bot SSO). if the app is for PVA bot, then you must grant tenant level consent first(this is already mentioned in .  Besides, the application id looks weird to me, I expect it to be a AAD application id which is a GUID but this is different. Make sure that you are using AAD V2 application.

[Anonymous]

Hi @BoLi 

Thank you for your response. Can you please explain me how to pass the login token to PVA in order for SSO to work by providing code samples? I really am not able to figure this out.

I have followed the doc to provide the API Permissions for both of the canvas and authentication app.

Below is the snapshot of the App registration for the Canvas App: I have added 2 extra roles here.

Below is the snapshot of the App registration for the Authentication App:

The Application id looks weird because I have edited it due to security reasons. 

Below is the current code that I am using.

<!DOCTYPE html>
<html>
<head>
  <title>Virtual Agent</title>
  <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>

  <script>
   var clientApplication;
     (function () {
       var msalConfig = {
           auth: {
             clientId: '<CLIENT ID I HAVE REMOVED>',
             authority: 'https://login.microsoftonline.com/<DIRECTORY ID I HAVE REMOVED>'
           },
           cache: {
             cacheLocation: 'localStorage',
             storeAuthStateInCookie: false
           }
       };
       if (!clientApplication) {
         clientApplication = new Msal.UserAgentApplication(msalConfig);
       }
     } ());
 </script>

  <style>
      html,
      body {
        height: 100%;
      }

      body {
        margin: 0;
      }

      .modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        padding-top: 100px; /* Location of the box */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0, 0, 0); /* Fallback color */
        background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
      }

      .modal-content {
        background-color: #fefefe;
        margin: auto;
        padding: 10px;
        border: 1px solid #888;
        width: 500px;
        height: 575px;
      }
      .close {
        color: black;
        float: right;
        font-size: 28px;
        font-weight: bold;
      }

      .close:hover,
      .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
      }

      .main {
        margin: 18px;
        border-radius: 4px;
      }

      div[role="form"] {
        background-color: #3392ff;
      }

      #webchat {
        position: center;
        height: 530px;
        width: 100%;
        top: 60px;
        overflow: hidden;
      }
      #heading {
        padding-bottom: 5px;
      }

      h1 {
        font-size: 14px;
        font-family: Segoe UI;
        font-style: normal;
        font-weight: 600;
        font-size: 14px;
        line-height: 20px;
        color: #f3f2f1;
        letter-spacing: 0.005em;
        display: table-cell;
        vertical-align: middle;
        padding: 13px 0px 0px 20px;
      }

      #login {
        position: fixed;
        margin-left: 150px;
      }

      .span {
        font-weight: bold;
      }
      #myBtn {
        position: fixed;
        float: right;
        outline: none;
        width: 60px;
        height: 80px;
        margin: auto auto auto 10px;
      }
      button:hover {
        background-color: transparent;
      }
    </style>

</head>
  <body>
    <button id="myBtn" type="button">Power Virtual Agent</button>

    <div id="myModal" class="modal">
      <!-- Modal content -->
      <div class="modal-content" style="background-color: #ffd933">
        <span class="close">&times;</span>
        <div id="chatwindow">
          <div id="heading">
            <img src="https://www.flaticon.com/svg/vstatic/svg/4061/4061262.svg?token=exp=1611082398~hmac=d7fe65d90930596808248cc855fd1fda" width="42" height="30" alt="KMT-logo"/>
            <span class="span"><strong>Virtual Agent</strong></span>
          </div>
          <div id="webchat"></div>
        </div>
      </div>
    </div>

    <!--Button code begins here-->

    <script>
      // Get the modal
      var modal = document.getElementById("myModal");

      // Get the button that opens the modal
      var btn = document.getElementById("myBtn");

      // Get the <span> element that closes the modal
      var span = document.getElementsByClassName("close")[0];

      // When the user clicks the button, open the modal
      btn.onclick = function () {
        modal.style.display = "block";
      };

      // When the user clicks on <span> (x), close the modal
      span.onclick = function () {
        modal.style.display = "none";
      };

      // When the user clicks anywhere outside of the modal, close it
      window.onclick = function (event) {
        if (event.target == modal) {
          modal.style.display = "none";
        }
      };
    </script>

    <!--Button code ends here-->
    <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);
   }
}

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

       if (!res.ok) {
         console.log(`KMT - Failed to fetch JSON due to ${res.status}`);
         throw new Error(`Failed to fetch JSON due to ${res.status}`);
       }

       return await res.json();
     }
</script>

<script>
    (async function main() {

        // Add your BOT ID below
        var BOT_ID = "<BOT ID I HAVE REMOVED>";
        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.name,
                                    role: "user"
                                }
                            }).subscribe(
                                id => {
                                  console.log("KMT - id: " + 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
          botAvatarInitials: "BT",
          userAvatarInitials: "UR",
          //accent: '#00809d',
          botAvatarBackgroundColor: "#FFFFFF",
          userAvatarBackgroundColor: "#FFFFFF",
          botAvatarImage:
            "https://www.flaticon.com/svg/vstatic/svg/1587/1587565.svg?token=exp=1611082485~hmac=740caa18cae9c7b8ba42daccc841eef0",
          userAvatarImage:
            "https://www.flaticon.com/svg/vstatic/svg/64/64572.svg?token=exp=1611082510~hmac=c15408c5ec67720b3be4b75976161466",
          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>

Thanks in advance!

[BoLi]

you can refer the sample code on our github to get an insight of how to pass token to PVA. you can find the github file link in SSO configuration page