Add support for OAuthCards to WebChat (#954)

* Support for OAuthCard in WebChat * Support for OAuthCard attachments * CR feedback + tests
microsoft · Apr 26, 2018 · 617de0a · 617de0a
1 parent a35c8e5
commit 617de0a
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 6 deletions.
diff --git a/src/Attachment.tsx b/src/Attachment.tsx
@@ -259,6 +259,13 @@ export const AttachmentView = (props: {
                 <AdaptiveCardContainer className="signin" nativeCard={ CardBuilder.buildCommonCard(attachment.content) } onCardAction={ props.onCardAction } />
             );
 
+        case "application/vnd.microsoft.card.oauth":
+            if (!attachment.content)
+                return null;
+            return (
+                <AdaptiveCardContainer className="signin" nativeCard={ CardBuilder.buildOAuthCard(attachment.content) } onCardAction={ props.onCardAction } />
+            );
+
         case "application/vnd.microsoft.card.receipt":
             if (!attachment.content)
                 return null;

diff --git a/src/CardBuilder.tsx b/src/CardBuilder.tsx
@@ -43,22 +43,32 @@ export class AdaptiveCardBuilder {
         }
     }
 
-    addButtons(cardActions: CardAction[]) {
+
+    addButtons(cardActions: CardAction[], includesOAuthButtons?: boolean) {
         if (cardActions) {
             cardActions.forEach(cardAction => {
-                this.card.addAction(AdaptiveCardBuilder.addCardAction(cardAction));
+                this.card.addAction(AdaptiveCardBuilder.addCardAction(cardAction, includesOAuthButtons));
             });
         }
     }
 
-    private static addCardAction(cardAction: CardAction) {
+    private static addCardAction(cardAction: CardAction, includesOAuthButtons?: boolean) {
         if (cardAction.type === 'imBack' || cardAction.type === 'postBack') {
             const action = new SubmitAction();
             const botFrameworkCardAction: BotFrameworkCardAction = { __isBotFrameworkCardAction: true, ...cardAction };
 
             action.data = botFrameworkCardAction;
             action.title = cardAction.title;
 
+            return action;
+        } else if (cardAction.type === 'signin' && includesOAuthButtons) {
+            // Create a button specific for OAuthCard 'signin' actions (cardAction.type == signin and button action is Action.Submit)
+            const action = new SubmitAction();
+            const botFrameworkCardAction: BotFrameworkCardAction = { __isBotFrameworkCardAction: true, ...cardAction };
+
+            action.data = botFrameworkCardAction;
+            action.title = cardAction.title;
+
             return action;
         } else {
             const action = new OpenUrlAction();
@@ -71,10 +81,14 @@ export class AdaptiveCardBuilder {
         }
     }
 
-    addCommon(content: ICommonContent) {
+    addCommonHeaders(content: ICommonContent) {
         this.addTextBlock(content.title, { size: TextSize.Medium, weight: TextWeight.Bolder });
         this.addTextBlock(content.subtitle, { isSubtle: true, wrap: true });
         this.addTextBlock(content.text, { wrap: true });
+    }
+
+    addCommon(content: ICommonContent) {
+        this.addCommonHeaders(content);
         this.addButtons(content.buttons);
     }
 
@@ -109,3 +123,12 @@ export const buildCommonCard = (content: ICommonContent): AdaptiveCard => {
     cardBuilder.addCommon(content)
     return cardBuilder.card;
 };
+
+export const buildOAuthCard = (content: ICommonContent): AdaptiveCard => {
+    if (!content) return null;
+
+    const cardBuilder = new AdaptiveCardBuilder();
+    cardBuilder.addCommonHeaders(content);
+    cardBuilder.addButtons(content.buttons, true);
+    return cardBuilder.card;
+};
diff --git a/src/Chat.tsx b/src/Chat.tsx
@@ -323,9 +323,22 @@ export const doCardAction = (
         case "playVideo":
         case "showImage":
         case "downloadFile":
-        case "signin":
             window.open(text);
             break;
+        case "signin":
+            let loginWindow =  window.open();
+            if (botConnection.getSessionId)  {
+                botConnection.getSessionId().subscribe(sessionId => {
+                    konsole.log("received sessionId: " + sessionId);
+                    loginWindow.location.href = text + encodeURIComponent('&code_challenge=' + sessionId);
+                }, error => {
+                    konsole.log("failed to get sessionId", error);
+                });
+            }
+            else {
+                loginWindow.location.href = text;
+            }
+            break;
 
         default:
             konsole.log("unknown button type", type);

diff --git a/test/commands_map.ts b/test/commands_map.ts
@@ -446,6 +446,14 @@ var commands_map: CommandValuesMap = {
             sendActivity(conversationId, server_content.si_card);
         }
     },
+    "oauth": {
+        client: function () {
+            return document.querySelectorAll('button')[0].textContent == "Signin";
+        },
+        server: function (conversationId, sendActivity) {
+            sendActivity(conversationId, server_content.oauth_card);
+        }
+    },
     "suggested-actions": {
         client: function () {
             var ul_object = document.querySelectorAll('ul')[0];

diff --git a/test/mock_dl/index.ts b/test/mock_dl/index.ts
@@ -337,6 +337,10 @@ const getMessages = (conversationId: string, watermark: number, res: express.Res
     }
 }
 
+app.get('/mock/session/getsessionid', (req, res) => {
+    res.send({ sessionId: 'mock_session_id' });
+});
+
 const getCardJsonFromFs = (fsName: string): Promise<any> => {
     return readFileAsync(path.join(__dirname, '../cards/', fsName + '.json'))
         .then(function (res) {

diff --git a/test/package.json b/test/package.json
@@ -17,7 +17,7 @@
   "license": "MIT",
   "dependencies": {
     "body-parser": "^1.18.2",
-    "botframework-directlinejs": "^0.9.13",
+    "botframework-directlinejs": "^0.9.15",
     "chai": "^4.1.2",
     "chai-subset": "^1.6.0",
     "cors": "^2.8.4",

diff --git a/test/server_content.ts b/test/server_content.ts
@@ -500,6 +500,32 @@ export var si_card: dl.Message = {
     ]
 }
 
+/*
+ * Activity for OAuth SignIn
+ *
+ */
+export var oauth_card: dl.Message = {
+    type: "message",
+    from: bot,
+    timestamp: new Date().toUTCString(),
+    channelId: "webchat",
+    attachments: [
+        <dl.OAuth>{
+            contentType: "application/vnd.microsoft.card.oauth",
+            content: {
+                text: "Login to OAuth sample",
+                connectionname: "SampleConnection",
+                buttons: [
+                    {
+                        type: "signin",
+                        title: "Signin"
+                    }
+                ]
+            }
+        }
+    ]
+}
+
 /*
  * Activity for SuggestedActions
  *