site/HJR.CopilotAgent.html at master · hernan-ramirez/site · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
<!DOCTYPE html>
<html lang="en">

<head>
    <title>HJR - Sample Web Agent - SSO</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
    <script type="text/javascript" src="https://alcdn.msauth.net/browser/2.32.0/js/msal-browser.min.js"></script>
    <script type="text/javascript">
        if (typeof msal === 'undefined') document.write(unescape("%3Cscript src='https://alcdn.msftauth.net/browser/2.32.0/js/msal-browser.min.js' type='text/javascript' %3E%3C/script%3E"));
    </script>

    <!-- This styling is for the canvas demonstration purposes. It is recommended
    that style is moved to separate file for organization in larger projects -->
    <style>
        html,
        body {
            height: 100%;
        }

        body {
            margin: 0;
            font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
            -webkit-font-smoothing: antialiased;
        }

        #header {
            background-color: rgb(11, 85, 106);
            color: rgb(255, 255, 255);
            font-weight: 600;
            height: 48px;
            padding: 0px 13px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        #subheader {
            background-color: rgb(243, 242, 241);
            padding: 7px 13px;
            font-size: 12px;
            font-weight: 400;
        }

        a {
            color: rgb(0, 90, 158);
        }

        a:hover {
            color: rgb(0, 69, 120);
        }

        #webchat {
            position: fixed;
            height: calc(100% - 75px);
            width: 100%;
            top: 75px;
            overflow: hidden;
        }

        #logout {
            display: none;
        }
    </style>

</head>

<body>
    <div id="chatwindow">
        <div id="header">
            SSO Test Agent by HJR
        </div>
        <div id="subheader">
            <span id="loginStatus">You are not logged in on the website.</span>
            <a id="login" href="#" onclick="onSignInClick()">Log in</a>
            <a id="logout" href="#" onclick="onSignOutClick()">Log out</a>
        </div>

        <div id="webchat"> </div>
    </div>

    <script>
        // TODO Change parameters below to your client id, tenant id and token endpoint.
        // See documentation (https://learn.microsoft.com/en-us/microsoft-copilot-studio/configure-sso?tabs=webApp)
        const clientId = "fadab903-8c3d-44cf-a47b-d279bcddf935"
        const tenantId = "186afc77-5aff-4e5d-a941-6f531599f97e"
        const tokenEndpoint = "https://d04902ba3cc8ea8588625afd66b410.0f.environment.api.powerplatform.com/powervirtualagents/botsbyschema/cre44_agentWebAppChannel/directline/token?api-version=2022-03-01-preview" // you can find the token URL via the Mobile app channel configuration

        // Config object to be passed to Msal on creation
        const msalConfig = {
            auth: {
                clientId: clientId,
                authority: "https://login.microsoftonline.com/" + tenantId
            },
            cache: {
                cacheLocation: "sessionStorage", // This configures where your cache will be stored
                storeAuthStateInCookie: true, // Set this to 'true' if you are having issues on IE11 or Edge
            }
        };

        // Add here scopes for id token to be used at MS Identity Platform endpoints.
        const loginRequest = {
            scopes: ["User.Read", "openid", "profile"]
        };

        const msalInstance = new msal.PublicClientApplication(msalConfig);

        // Handle login request after user clicks on login button
        async function onSignInClick() {
            try {
                const loginResponse = await msalInstance.loginPopup(loginRequest);
            } catch (err) {
                console.log(err)
            }

            const accounts = msalInstance.getAllAccounts();

            if (accounts.length > 0) {
                msalInstance.setActiveAccount(accounts[0]);
                user = accounts[0]
                document.getElementById("loginStatus").innerHTML = "Currently logged in as " + user.name + " on the website."

                // Hide login button and show logout button
                document.getElementById("login").style.display = "none"
                document.getElementById("logout").style.display = "inline"

                // Render chat widget again to demonstrate that login credentials can be passed
                await renderChatWidget()
            }
        }

        // Retrieve if user is currently logged in
        let user = null;
        const accounts = msalInstance.getAllAccounts();

        if (accounts.length > 0) {
            user = accounts[0]
            msalInstance.setActiveAccount(user);
            document.getElementById("loginStatus").innerHTML = "Currently logged in as " + user.name + " on the website."

            // Hide login button and show logout button
            document.getElementById("login").style.display = "none"
            document.getElementById("logout").style.display = "inline"
        }

        // Handle sign out request and refresh page
        async function onSignOutClick() {
            result = await msalInstance.logoutPopup({
                account: user,
            })
            location.reload();
        }

    </script>

    <script>
        /**
         * Retrieve tokenExchangeResource from OAuth card provided by the bot
         * This tokenExchangeResource will later be used to request an accessToken with the right scope.
         */
        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;
            }
        }

        /**
         * Retrieve a new access token from the user for the PVA scope based on the tokenExchangeResource
         */
        async function exchangeTokenAsync(resourceUri) {
            let user = msalInstance.getAllAccounts();

            if (user.length <= 0) {
                return null
            }

            const tokenRequest = {
                scopes: [resourceUri]
            };

            try {
                const tokenResponse = await msalInstance.acquireTokenSilent(tokenRequest)
                return tokenResponse.accessToken;
            } catch (err) {
                console.log(err)
                return null
            }

            return null
        }

        /**
         * Helper function to fetch a JSON API
         */
        async function fetchJSON(url, 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}`);
            }

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

    <script>
        async function renderChatWidget() {

            var userID = user?.localAccountId != null ?
                (user.localAccountId).substr(0, 36) :
                (Math.random().toString() + Date.now().toString()).substr(0, 64);

            const { token } = await fetchJSON(tokenEndpoint);
            const directLine = window.WebChat.createDirectLine({ token });

            const store = WebChat.createStore(
                {},
                ({ dispatch }) => next => action => {
                    const { type } = action;

                    // Configure your bot to start the conversation automatically
                    // See https://learn.microsoft.com/en-us/microsoft-copilot-studio/configure-bot-greeting?tabs=web
                    if (action.type === "DIRECT_LINE/CONNECT_FULFILLED") {
                        dispatch({
                            meta: {
                                method: "keyboard",
                            },
                            payload: {
                                activity: {
                                    channelData: {
                                        postBack: true,
                                    },
                                    // Web Chat will show the 'Greeting' System Topic message which has a trigger-phrase 'hello'
                                    name: 'startConversation',
                                    type: "event"
                                },
                            },
                            type: "DIRECT_LINE/POST_ACTIVITY",
                        });
                    }

                    // Filter incoming activities from Direct Line to intercept the Login Card
                    // If we are logged in and have a valid auth token, we will directly pass this in the background to the bot.
                    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((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: user.name,
                                            role: "user"
                                        }
                                    }).subscribe(
                                        id => {
                                            if (id === 'retry') {
                                                // Bot was not able to handle the invoke, so display the oauthCard
                                                return next(action);
                                            }
                                            // 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,
                botAvatarImage: 'https://bot-framework.azureedge.net/bot-icons-v1/6ab9b101-b65c-4357-9e9f-915cbf313a14_2K5Bt02aW8egEb97fxAgh7vqChK4UV3Nh3Lw3YYArhEKR8mB.png',
                botAvatarInitials: 'Bot',
                userAvatarImage: 'https://content.powerapps.com/resource/makerx/static/media/user.0d06c38a.svg',
                userAvatarInitials: 'User'
            };

            window.WebChat.renderWebChat(
                {
                    directLine: directLine,
                    store,
                    userID: userID,
                    styleOptions
                },
                document.getElementById('webchat')
            );
        }

        // Render the WebChat when the page loads
        (async () => {
            await renderChatWidget()
        })()

    </script>
</body>

</html>