Securely pass token from client to bot via token service

samples/07.advanced-web-chat-apps/e.sso-on-behalf-of-authentication/app/package.json

@@ -22,7 +22,8 @@
   },
   "devDependencies": {
     "http-proxy-middleware": "^2.0.6",
-    "react-scripts": "^5.0.1"
+    "react-scripts": "^5.0.1",
+    "@babel/preset-env": "^7.22.3"
   },
   "scripts": {
     "auditfix": "npm audit fix --legacy-peer-deps || exit 0",

samples/07.advanced-web-chat-apps/e.sso-on-behalf-of-authentication/app/src/oauth/fetchProfilePhotoAsBase64.js

@@ -11,7 +11,7 @@ export default async function fetchProfilePhotoInBase64(accessToken) {
     });
 
     if (!res.ok) {
-      if (res.status === 401) {
+      if (res.status === 401 || res.status === 404) {
         // Personal account does not have profile photo
         return 'images/Microsoft-Graph-64px.png';
       } else {

samples/07.advanced-web-chat-apps/e.sso-on-behalf-of-authentication/app/src/ui/MicrosoftGraphProfileMenu/ProfileMenu.css

@@ -107,7 +107,6 @@
 }
 
 .sso__profileAvatarBadge__microsoft {
-  background-image: url(/images/Microsoft-32px.png);
   background-position: 50% 50%;
   background-repeat: no-repeat;
   background-size: contain;

samples/07.advanced-web-chat-apps/e.sso-on-behalf-of-authentication/app/src/ui/WebChat/Notifications/BotSignInToast.js

@@ -5,6 +5,7 @@ import random from 'math-random';
 
 import './index.css';
 import OAuthContext from '../../../oauth/Context';
+import fetchJSON from '../../../utils/fetchJSON';
 
 const { useActivities, useDismissNotification, usePostActivity, useSetNotification } = hooks;
 
@@ -15,7 +16,7 @@ export const BotSignInToast = ({ notification }) => {
   } = notification;
   const [authenticating, setAuthenticating] = useState();
   const { acquireToken, getAccount, onSignIn } = useContext(OAuthContext);
-  const { connectionName, tokenExchangeResource: { id: oauthId, uri } = {} } = content;
+  const { connectionName, tokenExchangeResource: { id: oauthId, uri } = {}, tokenPostResource: {sasUrl} = {} } = content;
   const { current: invokeId } = useRef(random().toString(36).substr(2, 10));
 
   const [activities] = useActivities();
@@ -69,17 +70,51 @@ export const BotSignInToast = ({ notification }) => {
       (async function () {
         try {
           const token = await exchangeToken(uri);
-          token &&
-            postActivity({
-              channelData: { invokeId },
-              type: 'invoke',
-              name: 'signin/tokenExchange',
-              value: {
-                id: oauthId,
-                connectionName,
-                token
+          if (token) {
+          //   postActivity({
+          //   channelData: { invokeId },
+          //   type: 'invoke',
+          //   name: 'signin/tokenExchange',
+          //   value: {
+          //     id: oauthId,
+          //     connectionName,
+          //     token
+          //   }
+          // });
+          // Check https://github.com/microsoft/botbuilder-dotnet/blob/c0917dd7332e5cd0b621e34f2024692bddfe548a/libraries/Microsoft.Bot.Builder.Dialogs/Prompts/OAuthPrompt.cs#L277
+            const { failureDetail } = await fetchJSON(
+              sasUrl,
+              {
+                method: "POST",
+                headers: {
+                  'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(
+                  {
+                    token: token,
+                    type: "TokenExchangeRequest",
+                    exchangeResourceId: oauthId
+                  }
+                )
               }
-            });
+            );
+            if (failureDetail) {
+              dismissNotification(id);
+              setNotification({
+                id: 'traditionalbotauthentication',
+                data: { content },
+                level: 'error',
+                message: 'There was an error authenticating the bot.'
+              });
+            } else {
+              dismissNotification(id);
+              setNotification({
+                id: 'signinsuccessful',
+                level: 'success',
+                message: 'The bot was authenticated successfully.'
+              });
+            }
+          }          
         } catch (error) {
           dismissNotification(id);
           setNotification({
@@ -102,7 +137,8 @@ export const BotSignInToast = ({ notification }) => {
     oauthId,
     postActivity,
     setNotification,
-    uri
+    uri,
+    sasUrl
   ]);
 
   const handleAgreeClick = useCallback(() => {

samples/07.advanced-web-chat-apps/e.sso-on-behalf-of-authentication/app/src/ui/WebChat/index.js

@@ -7,7 +7,7 @@ import OAuthContext from '../../oauth/Context';
 import './index.css';
 
 const WebChat = () => {
-  const [directLine, setDirectLine] = useState(createDirectLine({}));
+  const [directLine, setDirectLine] = useState(null);
   const { onSignIn } = useContext(OAuthContext);
 
   const styleOptions = useMemo(
@@ -72,11 +72,11 @@ const WebChat = () => {
   useEffect(() => {
     (async function() {
       const { token } = await fetchJSON('/api/directline/token');
-      setDirectLine(createDirectLine({ token }));
+      setDirectLine(createDirectLine({ token, domain: "https://directline.scratch.botframework.com/v3/directline" }));
     })().catch(error => console.log(error));
   }, []);
 
-  return (
+  return (directLine &&
     <div className="webchat">
       <ReactWebChat
         directLine={directLine}

samples/07.advanced-web-chat-apps/e.sso-on-behalf-of-authentication/rest-api/src/generateDirectLineToken.js

@@ -6,7 +6,7 @@ module.exports = async function generateDirectLineToken(secret) {
   // You should consider using Enhanced Direct Line Authentication to protect the user ID.
   // https://blog.botframework.com/2018/09/25/enhanced-direct-line-authentication-features/
   const userID = uniqueID().substr(0, 10);
-  const { token } = await fetchJSON('https://directline.botframework.com/v3/directline/tokens/generate', {
+  const { token } = await fetchJSON('https://directline.scratch.botframework.com/v3/directline/tokens/generate', {
     body: JSON.stringify({ user: { id: `dl_${userID}`, name: 'username' } }),
     headers: {
       authorization: `Bearer ${secret}`,

samples/07.advanced-web-chat-apps/e.sso-on-behalf-of-authentication/rest-api/src/index.js

@@ -40,7 +40,7 @@ server.post('/api/messages', require('./routes/botMessages'));
 // We will use the REST API server to serve static web content to simplify deployment for demonstration purposes.
 STATIC_FILES &&
   server.get(
-    '/**/*',
+    '/*',
     restify.plugins.serveStatic({
       default: 'index.html',
       directory: join(__dirname, '..', STATIC_FILES)

samples/07.advanced-web-chat-apps/e.sso-on-behalf-of-authentication/rest-api/src/routes/aad/settings.js

@@ -2,7 +2,7 @@ const { AAD_OAUTH_CLIENT_ID, AAD_OAUTH_REDIRECT_URI, AAD_OAUTH_TENANT_ID } = pro
 
 // GET /api/aad/settings
 // Sends the OAuth configuration to browser
-module.exports = (_, res) => {
+module.exports = (req, res, next) => {
   res.json({
     authorizeURL: '/api/aad/oauth/authorize',
     clientId: AAD_OAUTH_CLIENT_ID,

samples/07.advanced-web-chat-apps/e.sso-on-behalf-of-authentication/rest-api/src/routes/botMessages.js

@@ -11,13 +11,13 @@ if (PROXY_BOT_URL) {
 
   console.log(`Will redirect /api/messages to ${new URL('api/messages', PROXY_BOT_URL).href}`);
 
-  module.exports = (req, res) => {
+  module.exports = (req, res, next) => {
     proxy.web(req, res, { target: PROXY_BOT_URL });
   };
 } else {
   let warningShown;
 
-  module.exports = (_, res) => {
+  module.exports = (req, res, next) => {
     if (!warningShown) {
       warningShown = true;
       console.warn('PROXY_BOT_URL is not set, we are not reverse-proxying /api/messages.');