OfficeDev · vamagra · Jan 4, 2018 · Jan 5, 2018 · Jan 9, 2018 · Feb 3, 2018
diff --git a/public/botViews/popUpSignin.html b/public/botViews/popUpSignin.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>    
+</head>
+<!-- This simulates a login page to show what happens when the user clicks on a button with the signin action.
+When the user clicks on the Login button, it calls notifySuccess() to fake a successful login and trigger a new message to the bot -->
+<body>
+    <div>
+        User Name : <input type="text"/>
+    </div>
+    <br />
+    <div>
+        Password : <input type="password" />
+    </div>
+    <br />
+    <div>
+        Magic Number : <input type="magicnumber" id="txtMagicNumber" disabled="disabled"/>
+    </div>
+
+    <button onClick="submit()">Login</button> 
+
+    <script src="https://statics.teams.microsoft.com/sdk/v1.0/js/MicrosoftTeams.min.js"></script>
+
+    <script>
+        var elem = document.getElementById("txtMagicNumber");        
+        if(elem!=null)
+        {
+            elem.value = Math.floor((Math.random() * 10000) + 1);
+        }
+
+        microsoftTeams.initialize();        
+
+        function submit()
+        {
+            var magicNumber;
+            if(document.getElementById('txtMagicNumber')!=null)
+            {
+              magicNumber = document.getElementById('txtMagicNumber').value;
+            }
+
+            microsoftTeams.authentication.notifySuccess(magicNumber);
+        }
+
+    </script>
+</body>
+</html>
diff --git a/src/Bot.ts b/src/Bot.ts
@@ -43,13 +43,16 @@ export class Bot extends builder.UniversalBot {
 
         // setup invoke payload handler
         this._connector.onInvoke(this.getInvokeHandler(this));
-
         // setup O365ConnectorCard action handler
         this._connector.onO365ConnectorCardAction(this.getO365ConnectorCardActionHandler(this));
-
         // setup conversation update handler for things such as a memberAdded event
         this.on("conversationUpdate", this.getConversationUpdateHandler(this));
 
+        this._connector.onSigninStateVerification((event, query, callback) =>
+        {
+            this.verifySigninState(event, query, callback);
+        });
+
         // setup compose extension handlers
         // onQuery is for events that come through the compose extension itself including
         // config and auth responses from popups that were started in the compose extension
@@ -74,7 +77,6 @@ export class Bot extends builder.UniversalBot {
                 // Clear the stack on invoke, as many builtin dialogs don't play well with invoke
                 // Invoke messages should carry the necessary information to perform their action
                 session.clearDialogStack();
-
                 let payload = (event as any).value;
 
                 // Invokes don't participate in middleware
@@ -91,11 +93,28 @@ export class Bot extends builder.UniversalBot {
         };
     }
 
+    private async verifySigninState(
+        event: builder.IEvent,
+        query: teams.ISigninStateVerificationQuery,
+        callback: (err: Error, body: any, status?: number) => void): Promise<void>
+    {
+        let session = await loadSessionAsync(this, event);
+        let magicNumber = '';
+
+        if (session)
+        {
+            magicNumber = query.state;
+
+            session.clearDialogStack();
+            session.send(session.gettext(Strings.popupsignin_successful) + magicNumber);
+        }
+        callback(null, "", 200);
+    }
+
     // set incoming event to any because membersAdded is not a field in builder.IEvent
     private getConversationUpdateHandler(bot: builder.UniversalBot): (event: any) => void {
         return async function(event: any): Promise<void> {
             let session = await loadSessionAsync(bot, event);
-
             if (event.membersAdded && event.membersAdded[0].id && event.membersAdded[0].id.endsWith(config.get("bot.botId"))) {
                 session.send(Strings.bot_introduction); // probably only works in Teams
             } else {

diff --git a/src/dialogs/RootDialog.ts b/src/dialogs/RootDialog.ts
@@ -12,6 +12,7 @@ import { GetLastDialogUsedDialog } from "./examples/basic/GetLastDialogUsedDialo
 import { HelloDialog } from "./examples/basic/HelloDialog";
 import { HelpDialog } from "./examples/basic/HelpDialog";
 import { HeroCardDialog } from "./examples/basic/HeroCardDialog";
+import { PopupSignInDialog } from "./examples/basic/PopupSignInDialog";
 import { MessageBackReceiverDialog } from "./examples/basic/MessageBackReceiverDialog";
 import { MultiDialog } from "./examples/basic/MultiDialog";
 import { O365ConnectorCardActionsDialog } from "./examples/basic/O365ConnectorCardActionsDialog";
@@ -72,6 +73,7 @@ export class RootDialog extends builder.IntentDialog {
         new HelloDialog(bot);
         new HelpDialog(bot);
         new HeroCardDialog(bot);
+        new PopupSignInDialog(bot);
         new MessageBackReceiverDialog(bot);
         new MultiDialog(bot);
         new O365ConnectorCardActionsDialog(bot);

diff --git a/src/dialogs/examples/basic/PopupSignInDialog.ts b/src/dialogs/examples/basic/PopupSignInDialog.ts
@@ -0,0 +1,35 @@
+import * as builder from "botbuilder";
+import { TriggerActionDialog } from "../../../utils/TriggerActionDialog";
+import { DialogIds } from "../../../utils/DialogIds";
+import { DialogMatches } from "../../../utils/DialogMatches";
+import { Strings } from "../../../locale/locale";
+import * as config from "config";
+
+// Demonstrates using a signin action to show a login page in a popup
+export class PopupSignInDialog extends TriggerActionDialog {
+
+    private static async sendPopupSigninCard(session: builder.Session, args?: any | builder.IDialogResult<any>, next?: (args?: builder.IDialogResult<any>) => void): Promise<void> {
+        let popUpUrl = config.get("app.baseUri") + "/botViews/popUpSignin.html";
+
+        session.send(
+            new builder.Message(session).addAttachment(
+                new builder.HeroCard(session)
+                .title(Strings.popupsignin_card_title)
+                .buttons([
+                    new builder.CardAction(session)
+                    .type("signin")
+                    .title(Strings.popupsignin_button_title)
+                    .value(popUpUrl)])));
+        session.endDialog();
+    }
+
+    constructor(
+        bot: builder.UniversalBot,
+    ) {
+        super(bot,
+            DialogIds.PopupSignInDialogId,
+            DialogMatches.PopUpSignInDialogMatch,
+            PopupSignInDialog.sendPopupSigninCard,
+        );
+    }
+}
diff --git a/src/locale/en/index.json b/src/locale/en/index.json
@@ -119,5 +119,8 @@
     "open_uri": "Open Uri",
     "message_summary": "A sample O365 actionable card",
     "o365connectorcard_action_response": "<h2>Thanks, %s!</h2><br/><h3>Your input action ID:</h3><br/><pre>%s</pre><br/><h3>Your input body:</h3><br/><pre>%s</pre>",
+    "popupsignin_card_title":"Please click below for Popup Sign-In experience",
+    "popupsignin_button_title":"Sign In",
+    "popupsignin_successful":"Authentication popup closed, Magic number passed through - ",
     "end_of_example_string_responses": "******************************* EVERYTHING ABOVE HERE IS FOR A TEMPLATE EXAMPLE DIALOG *******************************"
 }
diff --git a/src/utils/DialogIds.ts b/src/utils/DialogIds.ts
@@ -12,6 +12,7 @@ export const DialogIds = {
     HelloDialogId: "HelloDialog",
     HelpDialogId: "HelpDialog",
     HeroCardDialogId: "HeroCardDialog",
+    PopupSignInDialogId: "PopupSignInDialog",
     MessageBackReceiverDialogId: "MessageBackReceiverDialog",
     MultiDialogId: "MultiDialog",
     MultiDialog2Id: "MultiDialog2",

diff --git a/src/utils/DialogMatches.ts b/src/utils/DialogMatches.ts
@@ -11,6 +11,7 @@ export const DialogMatches = {
     HelloDialogMatch2: /hi/i,
     HelpDialogMatch: /help/i,
     HeroCardDialogMatch: /hero card/i,
+    PopUpSignInDialogMatch: /signin/i,
     MessageBackReceiverDialogMatch: /incoming message from messageBack button/i,
     MultiDialogMatch: /multi dialog 1/i,
     MultiDialog2Match: /multi dialog 2/i,