npm - @microsoft/teamsfx-core - Versions diffs - 1.7.0 → 1.7.1-alpha.8d048e1f1.0 - Mend

@microsoft/teamsfx-core 1.7.0 → 1.7.1-alpha.8d048e1f1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (226) hide show

package/templates/plugins/resource/aad/auth/bot/ts/public/auth-start.html ADDED Viewed

@@ -0,0 +1,177 @@
+<!--This file is used during the Teams Bot authentication flow to assist with retrieval of the access token.-->
+<!--If you're not familiar with this, do not alter or remove this file from your project.-->
+<html>
+  <head>
+    <title>Login Start Page</title>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <script type="text/javascript">
+      popUpSignInWindow();
+      async function popUpSignInWindow() {
+        // Generate random state string and store it, so we can verify it in the callback
+        let state = _guid();
+        localStorage.setItem("state", state);
+        localStorage.removeItem("codeVerifier");
+        var currentURL = new URL(window.location);
+        var clientId = currentURL.searchParams.get("clientId");
+        var tenantId = currentURL.searchParams.get("tenantId");
+        var loginHint = currentURL.searchParams.get("loginHint");
+        if (!loginHint) {
+          loginHint = "";
+        }
+        var scope = currentURL.searchParams.get("scope");
+        var originalCode = _guid();
+        var codeChallenge = await pkceChallengeFromVerifier(originalCode);
+        localStorage.setItem("codeVerifier", originalCode);
+        let queryParams = {
+          client_id: clientId,
+          response_type: "code",
+          response_mode: "fragment",
+          scope: scope,
+          redirect_uri: window.location.origin + "/auth-end.html",
+          nonce: _guid(),
+          login_hint: loginHint,
+          state: state,
+          code_challenge: codeChallenge,
+          code_challenge_method: "S256",
+        };
+        let authorizeEndpoint = `https://login.microsoftonline.com/${tenantId}/oauth2/v2.0/authorize?${toQueryString(
+          queryParams
+        )}`;
+        window.location.assign(authorizeEndpoint);
+      }
+      // Build query string from map of query parameter
+      function toQueryString(queryParams) {
+        let encodedQueryParams = [];
+        for (let key in queryParams) {
+          encodedQueryParams.push(key + "=" + encodeURIComponent(queryParams[key]));
+        }
+        return encodedQueryParams.join("&");
+      }
+      // Converts decimal to hex equivalent
+      // (From ADAL.js: https://github.com/AzureAD/azure-activedirectory-library-for-js/blob/dev/lib/adal.js)
+      function _decimalToHex(number) {
+        var hex = number.toString(16);
+        while (hex.length < 2) {
+          hex = "0" + hex;
+        }
+        return hex;
+      }
+      // Generates RFC4122 version 4 guid (128 bits)
+      // (From ADAL.js: https://github.com/AzureAD/azure-activedirectory-library-for-js/blob/dev/lib/adal.js)
+      function _guid() {
+        // RFC4122: The version 4 UUID is meant for generating UUIDs from truly-random or
+        // pseudo-random numbers.
+        // The algorithm is as follows:
+        //     Set the two most significant bits (bits 6 and 7) of the
+        //        clock_seq_hi_and_reserved to zero and one, respectively.
+        //     Set the four most significant bits (bits 12 through 15) of the
+        //        time_hi_and_version field to the 4-bit version number from
+        //        Section 4.1.3. Version4
+        //     Set all the other bits to randomly (or pseudo-randomly) chosen
+        //     values.
+        // UUID                   = time-low "-" time-mid "-"time-high-and-version "-"clock-seq-reserved and low(2hexOctet)"-" node
+        // time-low               = 4hexOctet
+        // time-mid               = 2hexOctet
+        // time-high-and-version  = 2hexOctet
+        // clock-seq-and-reserved = hexOctet:
+        // clock-seq-low          = hexOctet
+        // node                   = 6hexOctet
+        // Format: xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx
+        // y could be 1000, 1001, 1010, 1011 since most significant two bits needs to be 10
+        // y values are 8, 9, A, B
+        var cryptoObj = window.crypto || window.msCrypto; // for IE 11
+        if (cryptoObj && cryptoObj.getRandomValues) {
+          var buffer = new Uint8Array(16);
+          cryptoObj.getRandomValues(buffer);
+          //buffer[6] and buffer[7] represents the time_hi_and_version field. We will set the four most significant bits (4 through 7) of buffer[6] to represent decimal number 4 (UUID version number).
+          buffer[6] |= 0x40; //buffer[6] | 01000000 will set the 6 bit to 1.
+          buffer[6] &= 0x4f; //buffer[6] & 01001111 will set the 4, 5, and 7 bit to 0 such that bits 4-7 == 0100 = "4".
+          //buffer[8] represents the clock_seq_hi_and_reserved field. We will set the two most significant bits (6 and 7) of the clock_seq_hi_and_reserved to zero and one, respectively.
+          buffer[8] |= 0x80; //buffer[8] | 10000000 will set the 7 bit to 1.
+          buffer[8] &= 0xbf; //buffer[8] & 10111111 will set the 6 bit to 0.
+          return (
+            _decimalToHex(buffer[0]) +
+            _decimalToHex(buffer[1]) +
+            _decimalToHex(buffer[2]) +
+            _decimalToHex(buffer[3]) +
+            "-" +
+            _decimalToHex(buffer[4]) +
+            _decimalToHex(buffer[5]) +
+            "-" +
+            _decimalToHex(buffer[6]) +
+            _decimalToHex(buffer[7]) +
+            "-" +
+            _decimalToHex(buffer[8]) +
+            _decimalToHex(buffer[9]) +
+            "-" +
+            _decimalToHex(buffer[10]) +
+            _decimalToHex(buffer[11]) +
+            _decimalToHex(buffer[12]) +
+            _decimalToHex(buffer[13]) +
+            _decimalToHex(buffer[14]) +
+            _decimalToHex(buffer[15])
+          );
+        } else {
+          var guidHolder = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx";
+          var hex = "0123456789abcdef";
+          var r = 0;
+          var guidResponse = "";
+          for (var i = 0; i < 36; i++) {
+            if (guidHolder[i] !== "-" && guidHolder[i] !== "4") {
+              // each x and y needs to be random
+              r = (Math.random() * 16) | 0;
+            }
+            if (guidHolder[i] === "x") {
+              guidResponse += hex[r];
+            } else if (guidHolder[i] === "y") {
+              // clock-seq-and-reserved first hex is filtered and remaining hex values are random
+              r &= 0x3; // bit and with 0011 to set pos 2 to zero ?0??
+              r |= 0x8; // set pos 3 to 1 as 1???
+              guidResponse += hex[r];
+            } else {
+              guidResponse += guidHolder[i];
+            }
+          }
+          return guidResponse;
+        }
+      }
+      // Calculate the SHA256 hash of the input text.
+      // Returns a promise that resolves to an ArrayBuffer
+      function sha256(plain) {
+        const encoder = new TextEncoder();
+        const data = encoder.encode(plain);
+        return window.crypto.subtle.digest("SHA-256", data);
+      }
+      // Base64-urlencodes the input string
+      function base64urlencode(str) {
+        // Convert the ArrayBuffer to string using Uint8 array to convert to what btoa accepts.
+        // btoa accepts chars only within ascii 0-255 and base64 encodes them.
+        // Then convert the base64 encoded to base64url encoded
+        //   (replace + with -, replace / with _, trim trailing =)
+        return btoa(String.fromCharCode.apply(null, new Uint8Array(str)))
+          .replace(/\+/g, "-")
+          .replace(/\//g, "_")
+          .replace(/=+$/, "");
+      }
+      // Return the base64-urlencoded sha256 hash for the PKCE challenge
+      async function pkceChallengeFromVerifier(v) {
+        hashed = await sha256(v);
+        return base64urlencode(hashed);
+      }
+    </script>
+  </body>
+</html>

package/templates/plugins/resource/aad/auth/bot/ts/sso/showUserInfo.ts ADDED Viewed

@@ -0,0 +1,24 @@
+import { createMicrosoftGraphClient, TeamsFx } from "@microsoft/teamsfx";
+import { TurnContext } from "botbuilder";
+import { DialogTurnResult } from "botbuilder-dialogs";
+export async function showUserInfo(
+  context: TurnContext,
+  ssoToken: string
+): Promise<DialogTurnResult> {
+  await context.sendActivity("Retrieving user information from Microsoft Graph ...");
+  const teamsfx = new TeamsFx().setSsoToken(ssoToken);
+  const graphClient = createMicrosoftGraphClient(teamsfx, ["User.Read"]);
+  const me = await graphClient.api("/me").get();
+  if (me) {
+    await context.sendActivity(
+      `You're logged in as ${me.displayName} (${me.userPrincipalName})${
+        me.jobTitle ? `; your job title is: ${me.jobTitle}` : ""
+      }.`
+    );
+  } else {
+    await context.sendActivity("Could not retrieve profile information from Microsoft Graph.");
+  }
+  return;
+}

package/templates/plugins/resource/aad/auth/bot/ts/sso/ssoDialog.ts ADDED Viewed

@@ -0,0 +1,182 @@
+import {
+  ComponentDialog,
+  WaterfallDialog,
+  Dialog,
+  DialogTurnResult,
+  DialogSet,
+  DialogTurnStatus,
+} from "botbuilder-dialogs";
+import { ActivityTypes, Storage, tokenExchangeOperationName, TurnContext } from "botbuilder";
+import { TeamsBotSsoPrompt, TeamsBotSsoPromptTokenResponse, TeamsFx } from "@microsoft/teamsfx";
+import "isomorphic-fetch";
+const DIALOG_NAME = "SSODialog";
+const TEAMS_SSO_PROMPT_ID = "TeamsFxSsoPrompt";
+const COMMAND_ROUTE_DIALOG = "CommandRouteDialog";
+export class SsoDialog extends ComponentDialog {
+  private requiredScopes: string[];
+  private dedupStorage: Storage;
+  private dedupStorageKeys: string[] = [];
+  private commandMapping: Map<string, string | RegExp> = new Map<string, string | RegExp>();
+  constructor(dedupStorage: Storage, requiredScopes: string[]) {
+    super(DIALOG_NAME);
+    this.initialDialogId = COMMAND_ROUTE_DIALOG;
+    this.dedupStorage = dedupStorage;
+    this.dedupStorageKeys = [];
+    this.requiredScopes = requiredScopes;
+    const teamsFx = new TeamsFx();
+    const ssoDialog = new TeamsBotSsoPrompt(teamsFx, TEAMS_SSO_PROMPT_ID, {
+      scopes: this.requiredScopes,
+      endOnInvalidMessage: true,
+    });
+    this.addDialog(ssoDialog);
+    const commandRouteDialog = new WaterfallDialog(COMMAND_ROUTE_DIALOG, [
+      this.commandRouteStep.bind(this),
+    ]);
+    this.addDialog(commandRouteDialog);
+  }
+  public addCommand(
+    commandId: string,
+    commandText: string | RegExp,
+    operation: (context: TurnContext, ssoToken: string) => Promise<DialogTurnResult>
+  ): void {
+    const dialog = new WaterfallDialog(commandId, [
+      this.ssoStep.bind(this),
+      this.dedupStep.bind(this),
+      async (stepContext: any) => {
+        const tokenResponse: TeamsBotSsoPromptTokenResponse = stepContext.result;
+        const context: TurnContext = stepContext.context;
+        if (tokenResponse) {
+          await operation(context, tokenResponse.ssoToken);
+        } else {
+          await context.sendActivity("Failed to retrieve user token from conversation context.");
+        }
+        return await stepContext.endDialog();
+      },
+    ]);
+    if (this.commandMapping.has(commandId)) {
+      throw new Error(`Cannot add command. There is already a command with same id ${commandId}`);
+    }
+    this.commandMapping.set(commandId, commandText);
+    this.addDialog(dialog);
+  }
+  /**
+   * The run method handles the incoming activity (in the form of a DialogContext) and passes it through the dialog system.
+   * If no dialog is active, it will start the default dialog.
+   * @param {*} dialogContext
+   */
+  public async run(context: TurnContext, accessor: any) {
+    const dialogSet = new DialogSet(accessor);
+    dialogSet.add(this);
+    const dialogContext = await dialogSet.createContext(context);
+    const results = await dialogContext.continueDialog();
+    if (results && results.status === DialogTurnStatus.empty) {
+      await dialogContext.beginDialog(this.id);
+    }
+  }
+  private async commandRouteStep(stepContext: any) {
+    const turnContext = stepContext.context as TurnContext;
+    // remove the mention of this bot
+    let text = TurnContext.removeRecipientMention(turnContext.activity);
+    if (text) {
+      // remove the line break
+      text = text.toLowerCase().replace(/\n|\r/g, "").trim();
+    }
+    const commandId = this.matchCommands(text);
+    if (commandId) {
+      return await stepContext.beginDialog(commandId);
+    }
+    return await stepContext.endDialog();
+  }
+  private async ssoStep(stepContext: any) {
+    return await stepContext.beginDialog(TEAMS_SSO_PROMPT_ID);
+  }
+  private async dedupStep(stepContext: any) {
+    const tokenResponse = stepContext.result;
+    // Only dedup after ssoStep to make sure that all Teams client would receive the login request
+    if (tokenResponse && (await this.shouldDedup(stepContext.context))) {
+      return Dialog.EndOfTurn;
+    }
+    return await stepContext.next(tokenResponse);
+  }
+  public async onEndDialog(context: TurnContext) {
+    const conversationId = context.activity.conversation.id;
+    const currentDedupKeys = this.dedupStorageKeys.filter((key) => key.indexOf(conversationId) > 0);
+    await this.dedupStorage.delete(currentDedupKeys);
+    this.dedupStorageKeys = this.dedupStorageKeys.filter((key) => key.indexOf(conversationId) < 0);
+  }
+  // If a user is signed into multiple Teams clients, the Bot might receive a "signin/tokenExchange" from each client.
+  // Each token exchange request for a specific user login will have an identical activity.value.Id.
+  // Only one of these token exchange requests should be processed by the bot. For a distributed bot in production,
+  // this requires a distributed storage to ensure only one token exchange is processed.
+  private async shouldDedup(context: TurnContext): Promise<boolean> {
+    const storeItem = {
+      eTag: context.activity.value.id,
+    };
+    const key = this.getStorageKey(context);
+    const storeItems = { [key]: storeItem };
+    try {
+      await this.dedupStorage.write(storeItems);
+      this.dedupStorageKeys.push(key);
+    } catch (err) {
+      if (err instanceof Error && err.message.indexOf("eTag conflict")) {
+        return true;
+      }
+      throw err;
+    }
+    return false;
+  }
+  private getStorageKey(context: TurnContext): string {
+    if (!context || !context.activity || !context.activity.conversation) {
+      throw new Error("Invalid context, can not get storage key!");
+    }
+    const activity = context.activity;
+    const channelId = activity.channelId;
+    const conversationId = activity.conversation.id;
+    if (activity.type !== ActivityTypes.Invoke || activity.name !== tokenExchangeOperationName) {
+      throw new Error("TokenExchangeState can only be used with Invokes of signin/tokenExchange.");
+    }
+    const value = activity.value;
+    if (!value || !value.id) {
+      throw new Error("Invalid signin/tokenExchange. Missing activity.value.id.");
+    }
+    return `${channelId}/${conversationId}/${value.id}`;
+  }
+  private matchCommands(text: string): string {
+    for (const command of this.commandMapping) {
+      const pattern: string | RegExp = command[1];
+      let matchResult: RegExpExecArray | boolean;
+      if (typeof pattern == "string") {
+        matchResult = text === pattern;
+      } else {
+        matchResult = pattern.exec(text);
+      }
+      if (matchResult) {
+        return command[0]; // Return the command id
+      }
+    }
+    return undefined;
+  }
+}

package/templates/plugins/resource/aad/auth/bot/ts/sso/teamsSsoBot.ts ADDED Viewed

@@ -0,0 +1,69 @@
+import {
+  BotState,
+  ConversationState,
+  MemoryStorage,
+  SigninStateVerificationQuery,
+  StatePropertyAccessor,
+  TeamsActivityHandler,
+  TurnContext,
+  UserState,
+} from "botbuilder";
+import { showUserInfo } from "./showUserInfo";
+import { SsoDialog } from "./ssoDialog";
+export class TeamsSsoBot extends TeamsActivityHandler {
+  private dialog: SsoDialog;
+  private userState: BotState;
+  private conversationState: BotState;
+  private dialogState: StatePropertyAccessor;
+  constructor() {
+    super();
+    // Define the state store for your bot.
+    // See https://aka.ms/about-bot-state to learn more about using MemoryStorage.
+    // A bot requires a state storage system to persist the dialog and user state between messages.
+    const memoryStorage = new MemoryStorage();
+    // Create conversation and user state with in-memory storage provider.
+    this.conversationState = new ConversationState(memoryStorage);
+    this.userState = new UserState(memoryStorage);
+    this.dialog = new SsoDialog(new MemoryStorage(), ["User.Read"]);
+    this.dialogState = this.conversationState.createProperty("DialogState");
+    // Add commands that requires user authentication
+    this.dialog.addCommand("ShowUserProfile", "show", showUserInfo);
+    // call the `addCommand` function to add more customized commands
+    this.onMessage(async (context, next) => {
+      console.log("Running with Message Activity.");
+      // Run the Dialog with the new message Activity.
+      await this.dialog.run(context, this.dialogState);
+      // By calling next() you ensure that the next BotHandler is run.
+      await next();
+    });
+  }
+  async run(context: TurnContext) {
+    await super.run(context);
+    // Save any state changes. The load happened during the execution of the Dialog.
+    await this.conversationState.saveChanges(context, false);
+    await this.userState.saveChanges(context, false);
+  }
+  async handleTeamsSigninVerifyState(context: TurnContext, query: SigninStateVerificationQuery) {
+    console.log("Running dialog with signin/verifystate from an Invoke Activity.");
+    await this.dialog.run(context, this.dialogState);
+  }
+  async handleTeamsSigninTokenExchange(context: TurnContext, query: SigninStateVerificationQuery) {
+    await this.dialog.run(context, this.dialogState);
+  }
+  async onSignInInvoke(context: TurnContext) {
+    await this.dialog.run(context, this.dialogState);
+  }
+}

package/templates/plugins/resource/aad/auth/tab/README.md ADDED Viewed

@@ -0,0 +1,49 @@
+## How to enable SSO in TeamsFx Tab projects
+This doc will show you how to add Single Sign On feature to TeamsFx Tab projects. Note that this article is only for Teams Toolkit Visual Studio Code Extension version after x.x.x or TeamsFx CLI version after x.x.x.
+*Note: This article is only for TeamsFx projects by Javascript and Typescript. For Dotnet, please refer to ${help link}.*
+### Step 1: Enable Single Sign On with TeamsFx commands
+You can follow the following steps to add SSO feature to your TeamsFx projects.
+- From Visual Studio Code: open the command palette and select: `Teams: Add SSO`.
+- From TeamsFx CLI: run command `teamsfx add sso` in your project directory.
+What TeamsFx will do when trigger this command:
+1. Create Azure AD app template under `template\appPackage\aad.template.json`
+1. Add `webApplicationInfo` object in Teams App manifest
+1. Create `README.md` and sample code under `auth/tab/`
+### Step 2: Update your source code
+There are two folders under `auth/tab`: `public` and `sso`.
+1. In `public`, there are two html files which is used for authentication. You can simply copy the files under the folder and place it under `tabs/public/`.
+2. In `sso`, there is one file. You can simply copy the folder and place it under `tabs/src/sso/`.
+    - `GetUserProfile`: This file implement a function that calls Microsoft Graph API to get user info.
+    - You need to manually run the following commands under `tabs/`:
+        ```
+        npm install @microsoft/teamsfx-react
+        ```
+    - You need to manually add the following lines to `tabs/src/components/sample/Welcome.tsx` to import `GetUserProfile`:
+        ```
+        import { GetUserProfile } from "../sso/GetUserProfile";
+        ```
+        and replace the following line:
+        ```
+        <AddSSO />
+        ```
+        with:
+        ```
+        <GetUserProfile />
+        ```
+### Step 3: Provision Azure AD app and deploy latest code
+After running `add sso` command and updating source code, you need to run `Provision` + `Deploy` or `Local Debug` again to provision an Azure AD app for Single Sign On. After the above steps, Single Sign On is successfully added in your Teams App.

package/templates/plugins/resource/aad/auth/tab/js/public/auth-end.html ADDED Viewed

@@ -0,0 +1,58 @@
+<!--This file is added by us when enable SSO. Developers can use it directly, or reference this sample to create their own auth end page.-->
+<!--This file is used during the Teams authentication flow to assist with retrieval of the access token.-->
+<!--If you're not familiar with this, do not alter or remove this file from your project.-->
+<html>
+  <head>
+    <title>Login End Page</title>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <script
+      src="https://statics.teams.cdn.office.net/sdk/v1.6.0/js/MicrosoftTeams.min.js"
+      integrity="sha384-mhp2E+BLMiZLe7rDIzj19WjgXJeI32NkPvrvvZBrMi5IvWup/1NUfS5xuYN5S3VT"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      type="text/javascript"
+      src="https://alcdn.msauth.net/browser/2.21.0/js/msal-browser.min.js"
+      integrity="sha384-s/NxjjAgw1QgpDhOlVjTceLl4axrp5nqpUbCPOEQy1PqbFit9On6uw2XmEF1eq0s"
+      crossorigin="anonymous">
+    </script>
+    <script type="text/javascript">
+      var currentURL = new URL(window.location);
+      var clientId = currentURL.searchParams.get("clientId");
+      microsoftTeams.initialize();
+      microsoftTeams.getContext(async function (context) {
+        const msalConfig = {
+          auth: {
+            clientId: clientId,
+            authority: `https://login.microsoftonline.com/${context.tid}`,
+            navigateToLoginRequestUrl: false
+          },
+          cache: {
+            cacheLocation: "sessionStorage",
+          },
+        }
+        const msalInstance = new window.msal.PublicClientApplication(msalConfig);
+        msalInstance.handleRedirectPromise()
+          .then((tokenResponse) => {
+            if (tokenResponse !== null) {
+              microsoftTeams.authentication.notifySuccess(JSON.stringify({
+                sessionStorage: sessionStorage
+              }));
+            } else {
+              microsoftTeams.authentication.notifyFailure("Get empty response.");
+            }
+          })
+          .catch((error) => {
+            microsoftTeams.authentication.notifyFailure(error);
+          });
+      })
+    </script>
+  </body>
+</html>

package/templates/plugins/resource/aad/auth/tab/js/public/auth-start.html ADDED Viewed

@@ -0,0 +1,57 @@
+<!--This file is added by us when enable SSO. Developers can use it directly, or reference this sample to create their own auth end page.-->
+<!--This file is used during the Teams authentication flow to assist with retrieval of the access token.-->
+<!--If you're not familiar with this, do not alter or remove this file from your project.-->
+<html>
+  <head>
+    <title>Login Start Page</title>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <script
+      src="https://statics.teams.cdn.office.net/sdk/v1.6.0/js/MicrosoftTeams.min.js"
+      integrity="sha384-mhp2E+BLMiZLe7rDIzj19WjgXJeI32NkPvrvvZBrMi5IvWup/1NUfS5xuYN5S3VT"
+      crossorigin="anonymous"
+    ></script>
+    <script
+      type="text/javascript"
+      src="https://alcdn.msauth.net/browser/2.21.0/js/msal-browser.min.js"
+      integrity="sha384-s/NxjjAgw1QgpDhOlVjTceLl4axrp5nqpUbCPOEQy1PqbFit9On6uw2XmEF1eq0s"
+      crossorigin="anonymous">
+    </script>
+    <script type="text/javascript">
+      microsoftTeams.initialize();
+      // Get the tab context, and use the information to navigate to Azure AD login page
+      microsoftTeams.getContext(async function (context) {
+        // Generate random state string and store it, so we can verify it in the callback
+        var currentURL = new URL(window.location);
+        var clientId = currentURL.searchParams.get("clientId");
+        var scope = currentURL.searchParams.get("scope");
+        var loginHint = currentURL.searchParams.get("loginHint");
+        const msalConfig = {
+          auth: {
+            clientId: clientId,
+            authority: `https://login.microsoftonline.com/${context.tid}`,
+            navigateToLoginRequestUrl: false
+          },
+          cache: {
+            cacheLocation: "sessionStorage",
+          },
+        }
+        const msalInstance = new msal.PublicClientApplication(msalConfig);
+        const scopesArray = scope.split(" ");
+        const scopesRequest = {
+          scopes: scopesArray,
+          redirectUri: window.location.origin + `/auth-end.html?clientId=${clientId}`,
+          loginHint: loginHint
+        };
+        await msalInstance.loginRedirect(scopesRequest);
+      });
+      </script>
+  </body>
+</html>

package/templates/plugins/resource/aad/auth/tab/js/sso/GetUserProfile.jsx ADDED Viewed

@@ -0,0 +1,34 @@
+import { Button } from "@fluentui/react-northstar";
+import { useGraph, useTeamsFx } from "@microsoft/teamsfx-react";
+export function GetUserProfile() {
+  const { teamsfx } = useTeamsFx();
+  const { loading, error, data, reload } = useGraph(
+    async (graph, teamsfx, scope) => {
+      // Call graph api directly to get user profile information
+      const profile = await graph.api("/me").get();
+      let photoUrl = "";
+      try {
+        const photo = await graph.api("/me/photo/$value").get();
+        photoUrl = URL.createObjectURL(photo);
+      } catch {
+        // Could not fetch photo from user's profile, return empty string as placeholder.
+      }
+      return { profile, photoUrl };
+    },
+    { scope: ["User.Read"], teamsfx: teamsfx }
+  );
+  return (
+    <div>
+      <h2>GetUserProfile</h2>
+      <p>Click below to authorize button to grant permission to using Microsoft Graph.</p>
+      <Button primary content="Authorize" disabled={loading} onClick={reload} />
+      {!loading && error && (
+        <div className="error">Failed to read your profile. Please try again later.</div>
+      )}
+      {!loading && data && <div>Hello {data.profile.displayName}</div>}
+    </div>
+  );
+}