Merge pull request #1 from OfficeDev/kepeng-naa

Import source code from https://github.com/OfficeDev/Office-Add-in-sa…

.eslintrc.json

@@ -0,0 +1,8 @@
+{
+  "plugins": [
+    "office-addins"
+  ],
+  "extends": [
+    "plugin:office-addins/recommended"
+  ]
+}

.gitignore

@@ -301,7 +301,7 @@ node_modules/
 *.dsw
 *.dsp
 
-# Visual Studio 6 technical files
+# Visual Studio 6 technical files 
 *.ncb
 *.aps
 
@@ -396,3 +396,133 @@ FodyWeavers.xsd
 
 # JetBrains Rider
 *.sln.iml
+
+########################################################################
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*

README.md

@@ -1,33 +1,115 @@
-# Project
+# Office Add-in with SSO using nested app authentication (preview)
 
-> This repo has been populated by an initial template to help get you started. Please
-> make sure to update the content to build a great experience for community-building.
+## Summary
 
-As the maintainer of this project, please make a few updates:
+This repository contains the source code used by the [Yo Office generator](https://github.com/OfficeDev/generator-office) when you create a new Office Add-in that appears in the task pane. You can also use this repository as a sample to base your own project from if you choose not to use the generator.
 
-- Improving this README.MD file to provide a great experience
-- Updating SUPPORT.MD with content about this project's support experience
-- Understanding the security reporting process in SECURITY.MD
-- Remove this section from the README
+This sample shows how to use MSAL.js nested app authentication (NAA) in an Office Add-in to access Microsoft Graph APIs for the signed in user. The sample displays the signed in user's name and email. It also inserts the names of files from the user's Microsoft OneDrive account into the document.
 
-## Contributing
+IMPORTANT: Nested app authentication is currently in preview. To try this feature you need to join the [Microsoft 365 Insider Program](https://insider.microsoft365.com/join) and choose the **Beta Channel**. Don't use NAA in production add-ins. We invite you to try out NAA in test or development environments and welcome feedback on your experience through GitHub (see https://github.com/OfficeDev/office-js/issues).
 
-This project welcomes contributions and suggestions.  Most contributions require you to agree to a
-Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us
-the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.
+## Features
 
-When you submit a pull request, a CLA bot will automatically determine whether you need to provide
-a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions
-provided by the bot. You will only need to do this once across all repos using our CLA.
+- Use MSAL.js NAA to get an access token to call Microsoft Graph APIs.
+- Use MSAL.js NAA to get information about the user signed in to Office.
 
-This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
-For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or
-contact [[email protected]](mailto:[email protected]) with any additional questions or comments.
+## Applies to
 
-## Trademarks
+- Word, Excel, and PowerPoint on Windows build 16.0.17531.20000 or later.
+- Word, Excel, and PowerPoint on Mac build 16.85.24040319 or later.
 
-This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft 
-trademarks or logos is subject to and must follow 
-[Microsoft's Trademark & Brand Guidelines](https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks/usage/general).
-Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship.
-Any use of third-party trademarks or logos are subject to those third-party's policies.
+## Prerequisites
+
+- Office connected to a Microsoft 365 subscription (including Office on the web).
+- You need to join the [Microsoft 365 Insider Program](https://insider.microsoft365.com/join) to use the NAA preview features. Choose the **Beta Channel** insider level.
+- [Node.js](https://nodejs.org/) version 16 or greater.
+- [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) version 8 or greater.
+
+## Build and run the solution
+
+### Create an application registration
+
+1. Go to the [Azure portal - App registrations](https://go.microsoft.com/fwlink/?linkid=2083908) page to register your app.
+1. Sign in with the ***admin*** credentials to your Microsoft 365 tenancy. For example, **[email protected]**.
+1. Select **New registration**. On the **Register an application** page, set the values as follows.
+
+    - Set **Name** to `Office-Add-in-SSO-NAA`.
+    - Set **Supported account types** to **Accounts in any organizational directory (Any Microsoft Entra ID tenant - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox)**.
+    - In the **Redirect URI** section, ensure that **Single-page application (SPA)** is selected in the drop down and then set the URI to `brk-multihub://localhost:3000`.
+    - Select **Register**.
+
+1. On the **Office-Add-in-SSO-NAA** page, copy and save the value for the **Application (client) ID**. You'll use it in the next section.
+
+For more information on how to register your application, see [Register an application with the Microsoft Identity Platform](https://learn.microsoft.com/graph/auth-register-app-v2).
+
+### Configure the sample
+
+1. Clone or download this repository.
+1. From the command line, or a terminal window, go to the root folder of this sample at `/samples/auth/Office-Add-in-SSO-NAA`.
+1. Open the `src/taskpane/authConfig.ts` file.
+1. Replace the placeholder "Enter_the_Application_Id_Here" with the Application ID that you copied.
+1. Save the file.
+
+## Run the sample
+
+1. Run the following commands.
+
+`npm install`
+`npm run start`
+
+This will start the web server and sideload the add-in to Excel.
+
+1. In Excel, look for the **Show task pane** button and select it.
+1. When the task pane opens, there are two buttons: **Get user data** and **Get user files**.
+1. To see the signed in user's name and email, select **Get user data**.
+1. To insert the first 10 filenames from the signed in user's Microsoft OneDrive, select **Get user files**.
+
+You'll be prompted to consent to the scopes the sample needs when you select the buttons.  
+
+## Selecting hosts and debugging steps
+
+If you want to choose Word or PowerPoint, modify the `start` command in the `package.json` file to match one of the following entries.
+- For Word: `"start": "office-addin-debugging start manifest.xml desktop --app word",`
+- For PowerPoint: `"start": "office-addin-debugging start manifest.xml desktop --app powerpoint",`
+
+You can also debug the sample by opening the project in VS Code.
+
+1. Select the **Run and Debug** icon in the **Activity Bar** on the side of VS Code. You can also use the keyboard shortcut **Ctrl+Shift+D**.
+1. Select the launch configuration you want from the **Configuration dropdown** in the **Run and Debug** view. For example, **Word Desktop (Edge Chromium)**.
+1. Start your debug session with **F5**, or **Run > Start Debugging**.
+
+![VS Code debug view](./assets/vs-code-debug-view.png)
+
+For more information on debugging with VS Code, see [Debugging](https://code.visualstudio.com/Docs/editor/debugging). For more information on debugging Office Add-ins in VS Code, see [Debug Office Add-ins on Windows using Visual Studio Code and Microsoft Edge WebView2 (Chromium-based)](https://learn.microsoft.com/office/dev/add-ins/testing/debug-desktop-using-edge-chromium)
+
+## Key parts of this sample
+
+The `src/taskpane/authConfig.ts` file contains the MSAL code for configuring and using NAA. It contains a class named AccountManager which manages getting user account and token information.
+
+- The `initialize` function is called from Office.onReady to configure and intitialize MSAL to use NAA.
+- The `ssoGetToken` function gets an access token for the signed in user to call Microsoft Graph APIs.
+- The `ssoGetUserIdentity` function gets the account information of the signed in user. This can be used to get user details such as name and email.
+
+The `src/taskpane/document.ts` file contains code to write a list of file names, retrieved from Microsoft Graph, into the document. This works for Word, Excel, and PowerPoint documents.
+
+The `src/taskpane/taskpane.ts` file contains code that runs when the user chooses buttons in the task pane. They use the AccountManager class to get tokens or user information depending on which button is chosen.
+
+The `src/taskpane/msgraph-helper.ts` file contains code to construct and make a REST call to the Microsoft Graph API.
+
+## Security reporting
+
+If you find a security issue with our libraries or services, report the issue to [[email protected]](mailto:[email protected]) with as much detail as you can provide. Your submission may be eligible for a bounty through the [Microsoft Bounty](https://aka.ms/bugbounty) program. Don't post security issues to [GitHub Issues](https://github.com/AzureAD/microsoft-authentication-library-for-android/issues) or any other public site. We'll contact you shortly after receiving your issue report. We encourage you to get new security incident notifications by visiting [Microsoft technical security notifications](https://technet.microsoft.com/security/dd252948) to subscribe to Security Advisory Alerts.
+
+## Questions and feedback
+
+- Did you experience any problems with the sample? [Create an issue](https://github.com/OfficeDev/Office-Add-in-samples/issues/new/choose) and we'll help you out.
+- We'd love to get your feedback about this sample. Go to our [Office samples survey](https://aka.ms/OfficeSamplesSurvey) to give feedback and suggest improvements.
+- For general questions about developing Office Add-ins, go to [Microsoft Q&A](https://learn.microsoft.com/answers/topics/office-js-dev.html) using the office-js-dev tag.
+
+## Copyright
+
+Copyright (c) 2024 Microsoft Corporation. All rights reserved.
+
+This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information, see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [[email protected]](mailto:[email protected]) with any additional questions or comments.
+
+<img src="https://pnptelemetry.azurewebsites.net/pnp-officeaddins/samples/office-add-in-sso-naa" />

assets/sample.json

@@ -0,0 +1,41 @@
+[
+    {
+      "name": "office-add-in-sso-naa",
+      "reponame": "office-add-in-samples",
+      "source": "officedev",
+      "title": "Office Add-in with SSO using nested app authentication (preview)",
+      "shortDescription": "This sample shows how to implement SSO in an Office Add-in by using nested app authentication.",
+      "url": "https://github.com/OfficeDev/Office-Add-in-samples/tree/main/Samples/auth/Office-Add-in-SSO-NAA",
+      "longDescription": [
+        "This sample shows how to implement SSO in an Office Add-in by using nested app authentication."
+      ],
+      "creationDateTime": "2024-03-19",
+      "updateDateTime": "2024-03-19",
+      "products": [
+        "Office"
+      ],
+      "metadata": [
+        {
+          "key": "CLIENT-SIDE-DEV",
+          "value": "JavaScript"
+        }
+      ],
+      "thumbnails": [
+
+      ],
+      "authors": [
+        {
+          "gitHubAccount": "microsoft",
+          "pictureUrl": "https://github.com/microsoft.png",
+          "name": "Microsoft"
+        }
+      ],
+      "references": [
+        {
+          "name": "Enable SSO in an Office Add-in using nested app authentication (preview)",
+          "description": "Learn how to enable SSO in an Office Add-in using nested app authentication.",
+          "url": "https://learn.microsoft.com/office/dev/add-ins/develop/enable-nested-app-authentication-in-your-add-in"
+        }
+      ]
+    }
+  ] 

babel.config.json

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-typescript"]
+}