@microsoft/teamsfx-core 1.16.1 → 1.16.3-alpha.311dfaffe.0

package/templates/plugins/resource/aad/auth/bot/README.md

@@ -2,7 +2,7 @@
 
 Microsoft Teams provides a mechanism by which an application can obtain the signed-in Teams user token to access Microsoft Graph (and other APIs). Teams Toolkit facilitates this interaction by abstracting some of the Azure Active Directory (AAD) flows and integrations behind some simple, high level APIs. This enables you to add single sign-on (SSO) features easily to your Teams application.
 
-For a bot application, SSO manifests as an Adaptive Card which the user can interact with to invoke the AAD consent flow.
+For a bot application, user can invoke the AAD consent flow to obtain sso token to call Graph and other APIs. 
 
 # Changes to your project
 
@@ -12,8 +12,10 @@ After you successfully added SSO into your project, Teams Toolkit will create an
 
 | Action | File | Description |
 | - | - | - |
-| Create| `aad.template.json` under `templates/appPackage` | The Azure Active Directory application manifest that is used to register the application with AAD. |
+| Modify | `azureWebAppBotConfig.bicep` under `templates/azure/teamsFx` and `azure.parameters.dev.json` under `.fx/configs`| Insert environment variables used for bot web app to enable SSO feature |
 | Modify | `manifest.template.json` under `templates/appPackage` | An `webApplicationInfo` object will be added into your Teams app manifest template. This field is required by Teams when enabling SSO. |
+| Modify | `projectSettings.json` under `.fx/configs` | Add bot sso capability, which will be used internally by Teams Toolkit. |
+| Create| `aad.template.json` under `templates/appPackage` | The Azure Active Directory application manifest that is used to register the application with AAD. |
 | Create | `auth/bot` | Reference code, redirect pages and a `README.md` file. These files are provided for reference. See below for more information. |
 
 # Update your code to add SSO
@@ -25,39 +27,47 @@ As described above, the Teams Toolkit generated some configuration to set up you
 ## Set up the AAD redirects
 
 1. Move the `auth/bot/public` folder to `bot/src`. This folder contains HTML pages that the bot application hosts. When single sign-on flows are initiated with AAD, AAD will redirect the user to these pages.
-2. Modify your `bot/src/index.ts` to add the appropriate `restify` routes to these pages.
+1. Modify your `bot/src/index` to add the appropriate `restify` routes to these pages.
+
+    ```ts
+    const path = require("path");
+
+    server.get(
+        "/auth-*.html",
+        restify.plugins.serveStatic({
+            directory: path.join(__dirname, "public"),
+        })
+    );
+    ```
 
 ## Update your business logic
 
-The sample business logic provides a function `showUserInfo` that requires an AAD token to call Microsoft Graph. This token is obtained by using the logged-in Teams user token. The flow is brought together in a dialog that will display a consent dialog if required; otherwise it will go straight to `showUserInfo`.
+The sample business logic provides a sso command handler `ProfileSsoCommandHandler` that use an AAD token to call Microsoft Graph. This token is obtained by using the logged-in Teams user token. The flow is brought together in a dialog that will display a consent dialog if required.
 
 To make this work in your application:
 
-1. Move `auth/bot/public` folder to `bot/src`.
-These folder contains HTML pages used for auth redirect, please note that you need to modify `bot/src/index` file to add routing to these pages.
 
-1. Move `auth/bot/sso` folder to `bot/src`.
-These folder contains three files as reference for sso implementation:
-    * `showUserInfo`: This implements a function to get user info with SSO token. You can follow this method and create your own method that requires SSO token.
-    * `ssoDialog`: This creates a [ComponentDialog](https://docs.microsoft.com/en-us/javascript/api/botbuilder-dialogs/componentdialog?view=botbuilder-ts-latest) that used for SSO.
-    * `teamsSsoBot`: This create a [TeamsActivityHandler](https://docs.microsoft.com/en-us/javascript/api/botbuilder/teamsactivityhandler?view=botbuilder-ts-latest) with `ssoDialog` and add `showUserInfo` as a command that can be triggered. 
+1. Move `profileSsoCommandHandler` file under `auth/bot/sso` folder to `bot/src`. ProfileSsoCommandHandler class is a sso command handler to get user info with SSO token. You can follow this method and create your own sso command handler.
 
-1. (Optional) Follow the code sample and register your own command with `addCommand` in this file.
-1. Execute the following commands under `bot/`: `npm install isomorphic-fetch`
-1. (For ts only) Execute the following commands under `bot/`: `npm install copyfiles` and replace following line in package.json:
-    ```
-    "tsc --build && shx cp -r ./src/adaptiveCards ./lib/src",
+1. Open `package.json` file, make sure that teamfx SDK version >= 1.2.0
+1. Execute the following commands under `bot` folder: `npm install isomorphic-fetch --save`
+1. (For ts only) Execute the following commands under `bot` folder: `npm install copyfiles --save-dev` and replace following line in package.json:
+
+    ```json
+    "build": "tsc --build && shx cp -r ./src/adaptiveCards ./lib/src",
     ```
+
     with:
-    ```
-    "tsc --build && shx cp -r ./src/adaptiveCards ./lib/src && copyfiles src/public/*.html lib/",
+
+    ```json
+    "build": "tsc --build && shx cp -r ./src/adaptiveCards ./lib/src && copyfiles src/public/*.html lib/",
     ```
     By doing this, the HTML pages used for auth redirect will be copied when building this bot project.
 
-1. After adding the following files, you need to create a new `teamsSsoBot` instance in `bot/src/index` file. 
-Please replace the following code:
-    ```
-    // Process Teams activity with Bot Framework.
+1. After adding the following files, you need to update `bot/src/index` file.
+Please replace the following code to make sso consent flow works:
+
+    ```ts
     server.post("/api/messages", async (req, res) => {
         await commandBot.requestHandler(req, res);
     });
@@ -65,14 +75,9 @@ Please replace the following code:
 
     with:
 
-    ```
-    const handler = new TeamsSsoBot();
-    // Process Teams activity with Bot Framework.
+    ```ts
     server.post("/api/messages", async (req, res) => {
-        await commandBot.requestHandler(req, res, async (context)=> {
-            await handler.run(context);
-        })
-        .catch((err) => {
+        await commandBot.requestHandler(req, res).catch((err) => {
             // Error message including "412" means it is waiting for user's consent, which is a normal process of SSO, sholdn't throw this error.
             if (!err.message.includes("412")) {
                 throw err;
@@ -81,138 +86,194 @@ Please replace the following code:
     });
     ```
 
-1. Add routing in `bot/src/index` file as below:
+1. Replace the options for `ConversationBot` instance in `bot/src/internal/initialize` to add the sso config and sso command handler:
 
-    ```
-    server.get(
-        "/auth-*.html",
-        restify.plugins.serveStatic({
-            directory: path.join(__dirname, "public"),
-        })
-    );
+    ```ts
+    export const commandBot = new ConversationBot({
+        ...
+        command: {
+            enabled: true,
+            commands: [new HelloWorldCommandHandler()],
+        },
+    });
     ```
 
-1. Add the following lines to `bot/src/index` to import `teamsSsoBot` and `path`:
-
-    ```
-    // For ts:
-    import { TeamsSsoBot } from "./sso/teamsSsoBot";
-    const path = require("path");
+    with:
 
-    // For js:
-    const { TeamsSsoBot } = require("./sso/teamsSsoBot");
-    const path = require("path");
+    ```ts
+    import { ProfileSsoCommandHandler } from "../profileSsoCommandHandler";
+
+    export const commandBot = new ConversationBot({
+        ...
+        // To learn more about ssoConfig, please refer teamsfx sdk document: https://docs.microsoft.com/microsoftteams/platform/toolkit/teamsfx-sdk
+        ssoConfig: {
+            aad :{
+                scopes:["User.Read"],
+            },
+        },
+        command: {
+            enabled: true,
+            commands: [new HelloWorldCommandHandler() ],
+            ssoCommands: [new ProfileSsoCommandHandler()],
+        },
+    });
     ```
 
 1. Register your command in the Teams app manifest. Open `templates/appPackage/manifest.template.json`, and add following lines under `commands` in `commandLists` of your bot:
 
-    ```
+    ```json
     {
-        "title": "show",
+        "title": "profile",
         "description": "Show user profile using Single Sign On feature"
     }
     ```
 
-## (Optional) Add a new command to the bot
+## (Optional) Add a new sso command to the bot
 
-After successfully add SSO in your project, you can also add a new command.
+After successfully add SSO in your project, you can also add a new sso command.
 
-1. Create a new file (e.g. `todo.ts` or `todo.js`) under `bot/src/` and add your own business logic to call Graph API:
+1. Create a new file (e.g. `photoSsoCommandHandler.ts` or `photoSsoCommandHandler.js`) under `bot/src/` and add your own business logic to call Graph API:
 
     ```TypeScript
     // for TypeScript:
-    export async function showUserImage(
-        context: TurnContext,
-        ssoToken: string,
-        param: any[]
-    ): Promise<DialogTurnResult> {
-        await context.sendActivity("Retrieving user photo from Microsoft Graph ...");
-
-        // Init TeamsFx instance with SSO token
-        const teamsfx = new TeamsFx().setSsoToken(ssoToken);
-
-        // Update scope here. For example: Mail.Read, etc.
-        const graphClient = createMicrosoftGraphClient(teamsfx, param[0]);
-        
-        // You can add following code to get your photo:
-        // let photoUrl = "";
-        // try {
-        //   const photo = await graphClient.api("/me/photo/$value").get();
-        //   const arrayBuffer = await photo.arrayBuffer();
-        //   const buffer=Buffer.from(arrayBuffer, 'binary');
-        //   photoUrl = "data:image/png;base64," + buffer.toString("base64");
-        // } catch {
-        //   // Could not fetch photo from user's profile, return empty string as placeholder.
-        // }
-        // if (photoUrl) {
-        //   await context.sendActivity(
-        //     `You can find your photo here: ${photoUrl}`
-        //   );
-        // } else {
-        //   await context.sendActivity("Could not retrieve your photo from Microsoft Graph. Please make sure you have uploaded your photo.");
-        // }
-
-        return;
+    import { Activity, TurnContext, ActivityTypes } from "botbuilder";
+    import "isomorphic-fetch";
+    import {
+        CommandMessage,
+        TriggerPatterns,
+        TeamsFx,
+        createMicrosoftGraphClient,
+        TeamsFxBotSsoCommandHandler,
+        TeamsBotSsoPromptTokenResponse,
+    } from "@microsoft/teamsfx";
+
+    export class PhotoSsoCommandHandler implements TeamsFxBotSsoCommandHandler {
+        triggerPatterns: TriggerPatterns = "photo";
+
+        async handleCommandReceived(
+            context: TurnContext,
+            message: CommandMessage,
+            tokenResponse: TeamsBotSsoPromptTokenResponse,
+        ): Promise<string | Partial<Activity> | void> {
+            await context.sendActivity("Retrieving user information from Microsoft Graph ...");
+
+            const teamsfx = new TeamsFx().setSsoToken(tokenResponse.ssoToken);
+
+            const graphClient = createMicrosoftGraphClient(teamsfx, ["User.Read"]);
+
+            let photoUrl = "";
+            try {
+                const photo = await graphClient.api("/me/photo/$value").get();
+                const arrayBuffer = await photo.arrayBuffer();
+                const buffer=Buffer.from(arrayBuffer, 'binary');
+                photoUrl = "data:image/png;base64," + buffer.toString("base64");
+            } catch {
+                // Could not fetch photo from user's profile, return empty string as placeholder.
+            }
+            if (photoUrl) {
+                const photoMessage: Partial<Activity> = {
+                    type: ActivityTypes.Message, 
+                    text: 'This is your photo:', 
+                    attachments: [
+                        {
+                            name: 'photo.png',
+                            contentType: 'image/png',
+                            contentUrl: photoUrl
+                        }
+                    ]
+                };
+                return photoMessage;
+            } else {
+                return "Could not retrieve your photo from Microsoft Graph. Please make sure you have uploaded your photo.";
+            }
+        }
     }
     ```
 
     ```javascript
     // for JavaScript:
-    async function showUserImage(context, ssoToken, param) {
-        await context.sendActivity("Retrieving user photo from Microsoft Graph ...");
-    
-        // Init TeamsFx instance with SSO token
-        const teamsfx = new TeamsFx().setSsoToken(ssoToken);
-    
-        // Update scope here. For example: Mail.Read, etc.
-        const graphClient = createMicrosoftGraphClient(teamsfx, param[0]);
+    const { ActivityTypes } = require("botbuilder");
+    require("isomorphic-fetch");
+    const { createMicrosoftGraphClient, TeamsFx } = require("@microsoft/teamsfx");
+
+    class PhotoSsoCommandHandler {
+        triggerPatterns = "photo";
+
+        async handleCommandReceived(context, message, tokenResponse) {
+            await context.sendActivity("Retrieving user information from Microsoft Graph ...");
+
+            const teamsfx = new TeamsFx().setSsoToken(tokenResponse.ssoToken);
+
+            const graphClient = createMicrosoftGraphClient(teamsfx, ["User.Read"]);
         
-        // You can add following code to get your photo:
-        // let photoUrl = "";
-        // try {
-        //   const photo = await graphClient.api("/me/photo/$value").get();
-        //   const arrayBuffer = await photo.arrayBuffer();
-        //   const buffer=Buffer.from(arrayBuffer, 'binary');
-        //   photoUrl = "data:image/png;base64," + buffer.toString("base64");
-        // } catch {
-        //   // Could not fetch photo from user's profile, return empty string as placeholder.
-        // }
-        // if (photoUrl) {
-        //   await context.sendActivity(
-        //     `You can find your photo here: ${photoUrl}`
-        //   );
-        // } else {
-        //   await context.sendActivity("Could not retrieve your photo from Microsoft Graph. Please make sure you have uploaded your photo.");
-        // }
-    
-        return;
+            let photoUrl = "";
+            try {
+                const photo = await graphClient.api("/me/photo/$value").get();
+                const arrayBuffer = await photo.arrayBuffer();
+                const buffer=Buffer.from(arrayBuffer, 'binary');
+                photoUrl = "data:image/png;base64," + buffer.toString("base64");
+            } catch {
+            // Could not fetch photo from user's profile, return empty string as placeholder.
+            }
+            if (photoUrl) {
+                const photoMessage = {
+                    type: ActivityTypes.Message, 
+                    text: 'This is your photo:', 
+                    attachments: [
+                        {
+                            name: 'photo.png',
+                            contentType: 'image/png',
+                            contentUrl: photoUrl
+                        }
+                    ]
+                };
+                return photoMessage;
+            } else {
+                return "Could not retrieve your photo from Microsoft Graph. Please make sure you have uploaded your photo.";
+            }
+        }
     }
 
     module.exports = {
-      showUserImage,
+        PhotoSsoCommandHandler,
     };
-    ```
-
-1. Register a new command using `addCommand` in `teamsSsoBot`:
-
-    Find the following line:
 
     ```
-    this.dialog.addCommand("ShowUserProfile", "show", showUserInfo);
+
+1. Put `PhotoSsoCommandHandler` instance to `ssoCommands` array in `bot/src/internal/initialize.ts` as below:
+    
+    ```ts
+    // for TypeScript:
+    import { PhotoSsoCommandHandler } from "../photoSsoCommandHandler";
+
+    export const commandBot = new ConversationBot({
+        ...
+        command: {
+            ...
+            ssoCommands: [new ProfileSsoCommandHandler(), new PhotoSsoCommandHandler()],
+        },
+    });
     ```
 
-    and add following lines after the above line to register a new command `photo` and hook up with method `showUserImage` added above:
+    ```javascript
+    // for JavaScript:
+    ...
+    const { PhotoSsoCommandHandler } = require("../photoSsoCommandHandler");
+
+    const commandBot = new ConversationBot({
+        ...
+        command: {
+            ...
+            ssoCommands: [new ProfileSsoCommandHandler(), new PhotoSsoCommandHandler()]
+        },
+    });
+    ...
 
     ```
-    // As shown here, you can add your own parameter into the `showUserImage` method
-    // You can also use regular expression for the command here
-    const scope = ["User.Read"];
-    this.dialog.addCommand("ShowUserPhoto", new RegExp("photo\s*.*"), showUserImage, scope);
-    ```
 
 1. Register your command in the Teams app manifest. Open 'templates/appPackage/manifest.template.json', and add following lines under `commands` in `commandLists` of your bot:
 
-    ```
+    ```json
     {
         "title": "photo",
         "description": "Show user photo using Single Sign On feature"
@@ -234,3 +295,20 @@ The AAD [manifest](https://docs.microsoft.com/azure/active-directory/develop/ref
 Follow this [document](https://aka.ms/teamsfx-aad-manifest#customize-aad-manifest-template) if you need to include additional API permissions to access your desired APIs.
 
 Follow this [document](https://aka.ms/teamsfx-aad-manifest#How-to-view-the-AAD-app-on-the-Azure-portal) to view your AAD application in Azure Portal.
+
+# Trouble Shooting
+
+## Login page does not pop up after clicking `continue`
+
+First check whether your auth-start page is available by directly go to "{your-bot-endpoint}/auth-start.html" in your browser. You can find your-bot-endpoint in `.fx/states/state.{env}.json`.
+
+  - If the auth-start page can be opened in your browser, please try sign out current account in Teams app page and sign in again and run the command again.
+  - If encounter with ngrok page below when local debug, please follow the steps to solve this issue.
+  
+    1. Stop debugging in Visual Studio Code.
+    1. Sign up an ngrok account in https://dashboard.ngrok.com/signup.
+    1. Copy your personal ngrok authtoken from https://dashboard.ngrok.com/get-started/your-authtoken.
+    1. Run `npx ngrok authtoken <your-personal-ngrok-authtoken>` in Visual Studio Code terminal.
+    1. Start debugging the project again by hitting the F5 key in Visual Studio Code.
+
+    ![ngrok auth page](https://user-images.githubusercontent.com/63089166/190566043-6957edc9-c5b8-409d-b532-979ee0ef6ce5.png)

package/templates/plugins/resource/aad/auth/bot/js/sso/profileSsoCommandHandler.js

@@ -0,0 +1,30 @@
+const { createMicrosoftGraphClient, TeamsFx } = require("@microsoft/teamsfx");
+require("isomorphic-fetch");
+
+class ProfileSsoCommandHandler {
+  triggerPatterns = "profile";
+
+  async handleCommandReceived(context, message, tokenResponse) {
+    await context.sendActivity("Retrieving user information from Microsoft Graph ...");
+
+    // Init TeamsFx instance with SSO token
+    const teamsfx = new TeamsFx().setSsoToken(tokenResponse.ssoToken);
+
+    // Add scope for your Azure AD app. For example: Mail.Read, etc.
+    const graphClient = createMicrosoftGraphClient(teamsfx, ["User.Read"]);
+
+    // Call graph api use `graph` instance to get user profile information
+    const me = await graphClient.api("/me").get();
+
+    if (me) {
+      // Bot will send the user profile info to user
+      return `Your command is '${message.text}' and you're logged in as ${me.displayName} (${me.userPrincipalName}).`;
+    } else {
+      return "Could not retrieve profile information from Microsoft Graph.";
+    }
+  }
+}
+
+module.exports = {
+  ProfileSsoCommandHandler,
+};

package/templates/plugins/resource/aad/auth/bot/ts/sso/profileSsoCommandHandler.ts

@@ -0,0 +1,38 @@
+import { Activity, TurnContext } from "botbuilder";
+import {
+  CommandMessage,
+  TriggerPatterns,
+  TeamsFx,
+  createMicrosoftGraphClient,
+  TeamsFxBotSsoCommandHandler,
+  TeamsBotSsoPromptTokenResponse,
+} from "@microsoft/teamsfx";
+import "isomorphic-fetch";
+
+export class ProfileSsoCommandHandler implements TeamsFxBotSsoCommandHandler {
+  triggerPatterns: TriggerPatterns = "profile";
+
+  async handleCommandReceived(
+    context: TurnContext,
+    message: CommandMessage,
+    tokenResponse: TeamsBotSsoPromptTokenResponse
+  ): Promise<string | Partial<Activity> | void> {
+    await context.sendActivity("Retrieving user information from Microsoft Graph ...");
+
+    // Init TeamsFx instance with SSO token
+    const teamsfx = new TeamsFx().setSsoToken(tokenResponse.ssoToken);
+
+    // Add scope for your Azure AD app. For example: Mail.Read, etc.
+    const graphClient = createMicrosoftGraphClient(teamsfx, ["User.Read"]);
+
+    // Call graph api use `graph` instance to get user profile information
+    const me = await graphClient.api("/me").get();
+
+    if (me) {
+      // Bot will send the user profile info to user
+      return `Your command is '${message.text}' and you're logged in as ${me.displayName} (${me.userPrincipalName}).`;
+    } else {
+      return "Could not retrieve profile information from Microsoft Graph.";
+    }
+  }
+}

package/templates/plugins/resource/spfx/solution/prereleaseREADME.md

@@ -0,0 +1,82 @@
+# SPFx (SharePoint Framework) App
+
+## Summary
+
+The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development, easy integration with SharePoint data, and extending Microsoft Teams. This project applies SPFx to Teams personal tab and group tab support.
+
+## Used SharePoint Framework Version
+
+![version](https://img.shields.io/badge/version-1.16.0%20beta.1-green.svg)
+
+## Applies to
+
+- [SharePoint Framework](https://aka.ms/spfx)
+- [Microsoft 365 tenant](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
+
+## Prerequisites
+
+> - Node.js v16
+> - An Microsoft 365 account. Get your own free Microsoft 365 tenant from [Microsoft 365 developer program](https://developer.microsoft.com/en-us/microsoft-365/dev-program)
+
+## Solution
+
+Solution|Author(s)
+--------|---------
+folder name | Author details (name, company, twitter alias with link)
+
+## Version history
+
+Version|Date|Comments
+-------|----|--------
+1.1|March 10, 2021|Update comment
+1.0|January 29, 2021|Initial release
+
+## Disclaimer
+
+**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
+
+---
+
+## Minimal Path to Awesome
+
+1. Install the latest version of [Node.js LTS 16.x](https://nodejs.org/en/download/releases/) (Note: SPFx v1.16.0-beta.1 support Node.js v16).
+2. You can either download [Visual Studio Code](https://code.visualstudio.com) and install [Teams Toolkit Visual Studio Code Extension](https://aka.ms/teams-toolkit) or download TeamsFx CLI.
+3. Open the project with VSCode, click `Provision in the cloud` in DEPLOYMENT panel of Teams Toolkit extension.
+
+    Or you can use TeamsFx CLI with running this cmd under your project path:
+    `teamsfx provision`
+
+    It will provision an app in Teams App Studio. You may need to login with your Microsoft 365 tenant admin account.
+
+4. Build and Deploy your SharePoint Package.
+    - Click `Deploy to the cloud` in DEPLOYMENT panel of Teams Toolkit extension, or run `Teams: Deploy to the cloud` from command palette. This will generate a SharePoint package (*.sppkg) under sharepoint/solution folder.
+  
+    Or you can use TeamsFx CLI with running this cmd under your project path:
+        `teamsfx deploy`
+
+    - After building the *.sppkg, the Teams Toolkit extension will upload and deploy it to your tenant App Catalog. Only tenant App Catalog site admin has permission to do it. You can create your test tenant following [Setup your Microsoft 365 tenant](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant).
+5. Go back to Teams Toolkit extension, click `Teams: Publish to Teams` in DEPLOYMENT panel.
+
+    Or you can use TeamsFx CLI with running this cmd under your project path:
+        `teamsfx publish`
+
+    You will find your app in [Microsoft Teams admin center](https://admin.teams.microsoft.com/policies/manage-apps). Enter your app name in the search box. Click the item and select `Publish` in the Publishing status.
+
+6. You may need to wait for a few minutes after publishing your teams app. And then login to Teams, and you will find your app in the `Apps - Built for {your-tenant-name}` category.
+
+7. Click "Add" to use the app as a personal tab. Click "Add to a team" to use the app as a group tab.
+
+## Debug
+
+Start debugging the project by hitting the `F5` key in Visual Studio Code. Alternatively use the `Run and Debug Activity Panel` in Visual Studio Code and click the `Start Debugging` green arrow button.
+
+- `Teams workbench` is the default debug configuration. Using this configuration, you can install the SPFx app within Teams context as a Teams app.
+- `Hosted workbench`. You need to navigate to [launch.json](.vscode/launch.json), replace `enter-your-SharePoint-site` with your SharePoint site, eg. `https://{your-tenant-name}.sharepoint.com/sites/{your-team-name}/_layouts/workbench.aspx`. You can also use root site if you haven't created one, eg. `https://{your-tenant-name}.sharepoint.com/_layouts/workbench.aspx`.
+
+## References
+
+- [Getting started with SharePoint Framework](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
+- [Building for Microsoft teams](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/build-for-teams-overview)
+- [Use Microsoft Graph in your solution](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis)
+- [Publish SharePoint Framework applications to the Marketplace](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/publish-to-marketplace-overview)
+- [Microsoft 365 Patterns and Practices](https://aka.ms/m365pnp) - Guidance, tooling, samples and open-source controls for your Microsoft 365 development

package/build/common/index.d.ts

@@ -1,10 +0,0 @@
-export * from "./correlator";
-export * from "./deps-checker";
-export * from "./featureFlags";
-export * from "./globalState";
-export * from "./local";
-export * from "./permissionInterface";
-export * from "./projectSettingsHelper";
-export * from "./samples";
-export * from "./tools";
-//# sourceMappingURL=index.d.ts.map

package/build/common/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/common/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC"}

package/build/common/index.js

@@ -1,15 +0,0 @@
-// Copyright (c) Microsoft Corporation.
-// Licensed under the MIT license.
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./correlator"), exports);
-tslib_1.__exportStar(require("./deps-checker"), exports);
-tslib_1.__exportStar(require("./featureFlags"), exports);
-tslib_1.__exportStar(require("./globalState"), exports);
-tslib_1.__exportStar(require("./local"), exports);
-tslib_1.__exportStar(require("./permissionInterface"), exports);
-tslib_1.__exportStar(require("./projectSettingsHelper"), exports);
-tslib_1.__exportStar(require("./samples"), exports);
-tslib_1.__exportStar(require("./tools"), exports);
-//# sourceMappingURL=index.js.map

package/build/common/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/common/index.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,YAAY,CAAC;;;AAEb,uDAA6B;AAC7B,yDAA+B;AAC/B,yDAA+B;AAC/B,wDAA8B;AAC9B,kDAAwB;AACxB,gEAAsC;AACtC,kEAAwC;AACxC,oDAA0B;AAC1B,kDAAwB"}

package/build/component/resource/simpleAuth.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"simpleAuth.d.ts","sourceRoot":"","sources":["../../../src/component/resource/simpleAuth.ts"],"names":[],"mappings":"AAIA,OAAO,EACL,OAAO,EACP,qBAAqB,EAErB,iBAAiB,EACjB,MAAM,EACP,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC5D,OAAO,kBAAkB,CAAC;AAY1B,qBACa,UAAU;IASf,SAAS,CACb,OAAO,EAAE,iBAAiB,EAC1B,MAAM,EAAE,qBAAqB,GAC5B,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IAsBhC,SAAS,CACb,OAAO,EAAE,iBAAiB,EAC1B,MAAM,EAAE,qBAAqB,GAC5B,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;IAkBtC,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,SAAS,SAAgB;IAM/D,eAAe,CAAC,OAAO,EAAE,SAAS,GAAG;QAAE,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE;CAiCxE"}

package/build/component/resource/simpleAuth.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"simpleAuth.js","sourceRoot":"","sources":["../../../src/component/resource/simpleAuth.ts"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;;;;AAElC,+CAA8C;AAC9C,wDAMgC;AAEhC,4BAA0B;AAC1B,mCAAiC;AACjC,gFAAkF;AAClF,0EAA4E;AAC5E,8CAAsD;AACtD,2EAAkF;AAClF,qEAA+F;AAC/F,qEAAyE;AACzE,2EAAuE;AACvE,4CAA8C;AAC9C,uEAAoE;AAGpE,IAAa,UAAU,GAAvB,MAAa,UAAU;IASrB,KAAK,CAAC,SAAS,CACb,OAA0B,EAC1B,MAA6B;QAE7B,IAAI,OAAO,CAAC,OAAO,CAAC,OAAO,KAAK,OAAO,EAAE;YACvC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,oBAAQ,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;YACvD,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,0BAAc,CAAC,UAAU,CAAC;gBAC9C,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,0BAAc,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;YACzD,MAAM,kBAAkB,GAAG,cAAK,CAAC,qBAAqB,EAAE,CAAC;YACzD,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,0BAAc,CAAC,UAAU,CAAC,CAC9C,oDAA2B,CAAC,kBAAkB,CAC/C,GAAG,kBAAkB,CAAC;YACvB,MAAM,cAAK,CAAC,WAAW,CAAC,kBAAkB,CAAC,CAAC;YAC5C,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,oBAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;SACtD;QACD,OAAO,gBAAE,CAAC,SAAS,CAAC,CAAC;IACvB,CAAC;IASD,KAAK,CAAC,SAAS,CACb,OAA0B,EAC1B,MAA6B;QAE7B,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,oBAAQ,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC;QAC3D,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,0BAAc,CAAC,UAAU,CAAC;YAC9C,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,0BAAc,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;QACzD,MAAM,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;QACzD,IAAI,OAAO,CAAC,OAAO,CAAC,OAAO,KAAK,OAAO,EAAE;YACvC,MAAM,WAAW,GAAG,EAAE,CAAC;YACvB,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;gBAClD,WAAW,CAAC,IAAI,CAAC,GAAG,GAAG,KAAK,KAAK,GAAG,CAAC,CAAC;aACvC;YACD,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,0BAAc,CAAC,UAAU,CAAC,CAC9C,8CAAwB,CAAC,yBAAyB,CACnD,GAAG,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YAC1B,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,oBAAQ,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC;SAC1D;QACD,OAAO,gBAAE,CAAC,SAAS,CAAC,CAAC;IACvB,CAAC;IAED,YAAY,CAAC,GAAW,EAAE,KAAU,EAAE,SAAS,GAAG,aAAa;QAC7D,IAAI,CAAC,KAAK,EAAE;YACV,MAAM,sBAAa,CAAC,WAAW,CAAC,sBAAa,CAAC,IAAI,EAAE,sBAAa,CAAC,OAAO,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,CAAC;SAC5F;IACH,CAAC;IAED,eAAe,CAAC,OAAkB;QAChC,MAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,CAAC,0BAAc,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC;QAC/D,MAAM,YAAY,GAAG,OAAO,CAAC,KAAK,CAAC,0BAAc,CAAC,MAAM,CAAC,CAAC,YAAY,CAAC;QACvE,MAAM,cAAc,GAAG,OAAO,CAAC,KAAK,CAAC,0BAAc,CAAC,MAAM,CAAC,CAAC,cAAc,CAAC;QAC3E,MAAM,iBAAiB,GAAG,OAAO,CAAC,KAAK,CAAC,0BAAc,CAAC,MAAM,CAAC,CAAC,iBAAiB,CAAC;QACjF,MAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,CAAC,0BAAc,CAAC,QAAQ,CAAC,CAAC,QAAkB,CAAC;QAC3E,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;QACxC,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;QAChD,IAAI,CAAC,YAAY,CAAC,gBAAgB,EAAE,cAAc,CAAC,CAAC;QACpD,IAAI,CAAC,YAAY,CAAC,mBAAmB,EAAE,iBAAiB,CAAC,CAAC;QAC1D,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC;QACrD,MAAM,aAAa,GAAG,wBAAgB,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACnD,MAAM,kBAAkB,GAAG,GAAG,cAAc,wCAAwC,CAAC;QACrF,IAAI,WAAW,CAAC;QAChB,IAAI;YACF,WAAW,GAAG,IAAI,GAAG,CAAC,QAAQ,CAAC,CAAC;SACjC;QAAC,OAAO,KAAU,EAAE;YACnB,MAAM,sBAAa,CAAC,WAAW,CAC7B,6BAAoB,CAAC,IAAI,EACzB,6BAAoB,CAAC,OAAO,CAAC,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,CACtD,CAAC;SACH;QACD,MAAM,cAAc,GAAG,WAAW,CAAC,MAAM,CAAC;QAC1C,OAAO;YACL,CAAC,qBAAS,CAAC,uBAAuB,CAAC,QAAQ,CAAC,EAAE,QAAQ;YACtD,CAAC,qBAAS,CAAC,uBAAuB,CAAC,YAAY,CAAC,EAAE,YAAY;YAC9D,CAAC,qBAAS,CAAC,uBAAuB,CAAC,cAAc,CAAC,EAAE,cAAc;YAClE,CAAC,qBAAS,CAAC,uBAAuB,CAAC,iBAAiB,CAAC,EAAE,iBAAiB;YACxE,CAAC,qBAAS,CAAC,uBAAuB,CAAC,aAAa,CAAC,EAAE,aAAa;YAChE,CAAC,qBAAS,CAAC,uBAAuB,CAAC,cAAc,CAAC,EAAE,cAAc;YAClE,CAAC,qBAAS,CAAC,uBAAuB,CAAC,kBAAkB,CAAC,EAAE,kBAAkB;SAC3E,CAAC;IACJ,CAAC;CACF,CAAA;AArFC;IARC,WAAK,CAAC;QACL,qCAAiB,CAAC;YAChB,WAAW,EAAE,IAAI;YACjB,eAAe,EAAE,IAAI;YACrB,sBAAsB,EAAE,yBAAyB;YACjD,kBAAkB,EAAE,aAAa;SAClC,CAAC;KACH,CAAC;;;;2CAiBD;AASD;IARC,WAAK,CAAC;QACL,qCAAiB,CAAC;YAChB,WAAW,EAAE,IAAI;YACjB,eAAe,EAAE,IAAI;YACrB,sBAAsB,EAAE,yBAAyB;YACjD,kBAAkB,EAAE,WAAW;SAChC,CAAC;KACH,CAAC;;;;2CAoBD;AArDU,UAAU;IADtB,gBAAO,CAAC,0BAAc,CAAC,UAAU,CAAC;GACtB,UAAU,CA8FtB;AA9FY,gCAAU"}

package/build/core/middleware/index.d.ts

@@ -1,11 +0,0 @@
-export * from "./concurrentLocker";
-export * from "./contextInjector";
-export * from "./envInfoLoader";
-export * from "./envInfoWriter";
-export * from "./errorHandler";
-export * from "./projectMigrator";
-export * from "./projectSettingsLoader";
-export * from "./projectSettingsWriter";
-export * from "./questionModel";
-export * from "./solutionLoader";
-//# sourceMappingURL=index.d.ts.map

package/build/core/middleware/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/core/middleware/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC"}