{"id":28524919,"url":"https://github.com/microsoftgraph/msgraph-sample-office-addin","last_synced_at":"2025-06-17T09:07:06.604Z","repository":{"id":44609822,"uuid":"307414424","full_name":"microsoftgraph/msgraph-sample-office-addin","owner":"microsoftgraph","description":"This sample demonstrates how to use the Microsoft Graph JavaScript SDK to access data in Office 365 from Office Add-ins.","archived":false,"fork":false,"pushed_at":"2025-05-26T16:14:01.000Z","size":2053,"stargazers_count":13,"open_issues_count":7,"forks_count":7,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-06-09T11:12:55.200Z","etag":null,"topics":["devxsample","microsoft-graph","office-addin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/microsoftgraph.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-10-26T15:16:41.000Z","updated_at":"2025-05-11T19:05:12.000Z","dependencies_parsed_at":"2023-10-17T01:45:16.758Z","dependency_job_id":"4f4c5ac2-6240-4a1d-a4e3-8fb550cdffae","html_url":"https://github.com/microsoftgraph/msgraph-sample-office-addin","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/microsoftgraph/msgraph-sample-office-addin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoftgraph%2Fmsgraph-sample-office-addin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoftgraph%2Fmsgraph-sample-office-addin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoftgraph%2Fmsgraph-sample-office-addin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoftgraph%2Fmsgraph-sample-office-addin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/microsoftgraph","download_url":"https://codeload.github.com/microsoftgraph/msgraph-sample-office-addin/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/microsoftgraph%2Fmsgraph-sample-office-addin/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260326686,"owners_count":22992382,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["devxsample","microsoft-graph","office-addin"],"created_at":"2025-06-09T11:12:14.052Z","updated_at":"2025-06-17T09:07:06.591Z","avatar_url":"https://github.com/microsoftgraph.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"---\npage_type: sample\ndescription: This sample demonstrates how to use the Microsoft Graph JavaScript SDK to access data in Office 365 from Office Add-ins.\nproducts:\n- ms-graph\n- office-exchange-online\nlanguages:\n- typescript\n- javascript\n---\n\n# Microsoft Graph sample Office Add-in\n\n[![Node.js build](https://github.com/microsoftgraph/msgraph-training-office-addin/actions/workflows/node.js.yml/badge.svg)](https://github.com/microsoftgraph/msgraph-training-office-addin/actions/workflows/node.js.yml) ![License.](https://img.shields.io/badge/license-MIT-green.svg)\n\nThis sample demonstrates how to use the Microsoft Graph JavaScript SDK to access data in Office 365 from Office Add-ins.\n\n## Prerequisites\n\nTo run the completed project in this folder, you need the following:\n\n- [Node.js](https://nodejs.org) and [Yarn](https://yarnpkg.com/) installed on your development machine. (**Note:** This sample was written with Node version 16.14.2 and Yarn version 1.22.19. The steps in this guide may work with other versions, but that has not been tested.)\n- Either a personal Microsoft account with a mailbox on Outlook.com, or a Microsoft work or school account.\n\nIf you don't have a Microsoft account, there are a couple of options to get a free account:\n\n- You can [sign up for a new personal Microsoft account](https://signup.live.com/signup?wa=wsignin1.0\u0026rpsnv=12\u0026ct=1454618383\u0026rver=6.4.6456.0\u0026wp=MBI_SSL_SHARED\u0026wreply=https://mail.live.com/default.aspx\u0026id=64855\u0026cbcxt=mai\u0026bk=1454618383\u0026uiflavor=web\u0026uaid=b213a65b4fdc484382b6622b3ecaa547\u0026mkt=E-US\u0026lc=1033\u0026lic=1).\n- You can [sign up for the Microsoft 365 Developer Program](https://developer.microsoft.com/microsoft-365/dev-program) to get a free Microsoft 365 subscription.\n\n## Register a web application with the Microsoft Entra admin center\n\n1. Open a browser and navigate to the [Microsoft Entra admin center](https://entra.microsoft.com). Login using a **Work or School Account**.\n\n1. Select **Applications** in the left-hand navigation bar, then select **App registrations**.\n\n1. Select **New registration**. On the **Register an application** page, set the values as follows.\n\n    - Set **Name** to `Office Add-in Graph Sample`.\n    - Set **Supported account types** to **Accounts in any organizational directory and personal Microsoft accounts**.\n    - Under **Redirect URI**, set the first drop-down to `Single-page application (SPA)` and set the value to `https://localhost:3000/consent.html`.\n\n1. Select **Register**. On the **Office Add-in Graph Sample** page, copy the value of the **Application (client) ID** and save it, you will need it in the next step.\n\n1. Select **Certificates \u0026 secrets** under **Manage**. Select the **New client secret** button. Enter a value in **Description** and select one of the options for **Expires** and select **Add**.\n\n1. Copy the client secret value before you leave this page. You will need it in the next step.\n\n    \u003e [!IMPORTANT]\n    \u003e This client secret is never shown again, so make sure you copy it now.\n\n1. Select **API permissions** under **Manage**, then select **Add a permission**.\n\n1. Select **Microsoft Graph**, then **Delegated permissions**.\n\n1. Select the following permissions, then select **Add permissions**.\n\n    - **Calendars.ReadWrite** - this will allow the app to read and write to the user's calendar.\n    - **MailboxSettings.Read** - this will allow the app to get the user's time zone from their mailbox settings.\n\n## Configure Office Add-in single sign-on\n\nUpdate the app registration to support [Office Add-in single sign-on (SSO)](https://learn.microsoft.com/office/dev/add-ins/develop/sso-in-office-add-ins).\n\n1. Select **Expose an API**. In the **Scopes defined by this API** section, select **Add a scope**. When prompted to set an **Application ID URI**, set the value to `api://localhost:3000/YOUR_APP_ID_HERE`, replacing `YOUR_APP_ID_HERE` with the application ID. Choose **Save and continue**.\n\n1. Fill in the fields as follows and select **Add scope**.\n\n    - **Scope name:** `access_as_user`\n    - **Who can consent?: Admins and users**\n    - **Admin consent display name:** `Access the app as the user`\n    - **Admin consent description:** `Allows Office Add-ins to call the app's web APIs as the current user.`\n    - **User consent display name:** `Access the app as you`\n    - **User consent description:** `Allows Office Add-ins to call the app's web APIs as you.`\n    - **State: Enabled**\n\n1. In the **Authorized client applications** section, select **Add a client application**. Enter a client ID from the following list, enable the scope under **Authorized scopes**, and select **Add application**. Repeat this process for each of the client IDs in the list.\n\n    - `d3590ed6-52b3-4102-aeff-aad2292ab01c` (Microsoft Office)\n    - `ea5a67f6-b6f3-4338-b240-c655ddc3cc8e` (Microsoft Office)\n    - `57fb890c-0dab-4253-a5e0-7188c88b2bb4` (Office on the web)\n    - `08e18876-6177-487e-b8b5-cf950c1e598c` (Office on the web)\n\n## Install development certificates\n\n1. Run the following command to generate and install development certificates for your add-in.\n\n    ```Shell\n    npx office-addin-dev-certs install\n    ```\n\n    If prompted for confirmation, confirm the actions. Once the command completes, you will see output similar to the following.\n\n    ```Shell\n    You now have trusted access to https://localhost.\n    Certificate: \u003cpath\u003e\\localhost.crt\n    Key: \u003cpath\u003e\\localhost.key\n    ```\n\n1. Copy the paths to localhost.crt and localhost.key, you'll need them in the next step.\n\n## Update the manifest\n\n1. Open the **manifest.xml** file and make the following changes.\n    1. Replace `NEW_GUID_HERE` with a new GUID, like `b4fa03b8-1eb6-4e8b-a380-e0476be9e019`.\n    1. Replace all instances of `YOUR_CLIENT_ID_HERE` with the application ID from your app registration.\n\n## Configure the sample\n\n1. Rename the `example.env` file to `.env`.\n1. Edit the `.env` file and make the following changes.\n    1. Replace `YOUR_APP_ID_HERE` with the **Application Id** you got from the App Registration Portal.\n    1. Replace `YOUR_CLIENT_SECRET_HERE` with the client secret you got from the App Registration Portal.\n    1. Replace `PATH_TO_LOCALHOST.CRT` with the path to your localhost.crt file from the output of the `npx office-addin-dev-certs install` command.\n    1. Replace `PATH_TO_LOCALHOST.KEY` with the path to your localhost.key file from the output of the `npx office-addin-dev-certs install` command.\n\n1. Rename the `config.example.js` file to `config.js`.\n1. Edit the `config.js` file and make the following changes.\n    1. Replace `YOUR_APP_ID_HERE` with the **Application Id** you got from the App Registration Portal.\n1. In your command-line interface (CLI), navigate to this directory and run the following command to install requirements.\n\n    ```Shell\n    yarn install\n    ```\n\n## Run the sample\n\n1. Run the following command in your CLI to start the application.\n\n    ```Shell\n    yarn start\n    ```\n\n1. In your browser, go to [Office.com](https://www.office.com/) and sign in. Select **Create** in the left-hand toolbar, then select **Workbook**.\n\n1. Select the **Home** tab, then select **Add-ins**.\n\n1. Select **More Add-ins**, then select **My Add-ins**.\n\n1. Select **Upload My Add-in**, then select **Browse**. Upload your **manifest.xml** file.\n\n1. Select the **Import Calendar** button on the **Home** tab to open the task pane.\n\n## Code of conduct\n\nThis 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 [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.\n\n## Disclaimer\n\n**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.**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicrosoftgraph%2Fmsgraph-sample-office-addin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmicrosoftgraph%2Fmsgraph-sample-office-addin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmicrosoftgraph%2Fmsgraph-sample-office-addin/lists"}