csharp

page_type	description	products	languages	extensions	urlFragment
sample	This sample app demonstrates the integration of SharePoint Embedded for storage management within the Teams Tab Request Approval application, featuring Teams SSO, activity feed notifications, and Graph API support.	office-teams office office-365 sharepoint-repository-service	csharp	contentType createdDate samples 12/19/2023 12:00:01 PM	officedev-microsoft-teams-samples-sharepoint-tab-request-approval-csharp

Tab Request Approval app + SharePoint Embedded

Welcome to the documentation for the Tab Request Approval app leveraging the SharePoint Embedded API.

The Tab Request Approval app, now integrated with SharePoint Embedded, serves as a practical demonstration of utilizing the SharePoint Embedded API for storage management within Microsoft Teams. This enhanced version retains the original app's capabilities while introducing key features like Teams Single Sign-On, activity feed notifications, and Graph API integration, empowering developers to manage their Teams app's storage needs efficiently.

Included Features

• SharePoint Embedded
• Teams SSO (tabs)
• Activity Feed Notifications
• Graph API

Interaction with app

Overview

This is a modified version of the pre-existing Tab Request Approval app that has been integrated with SharePoint Embedded.

The original app's functionality has been maintained and now uses the SharePoint Embedded API. The purpose of this sample is to demonstrate the functionality of the SharePoint Embedded and how it can be used to programmatically manage storage requirements of a Teams app.

Please visit the original Tab-Request-Approval app to get a better understanding of the original application's functionality and to learn how to use the it. The following features and capabilities are available within the app:

• Teams SSO
• Activity Feed Notifications
• Graph API
• Change Notification Subscriptions
• SharePoint Embedded API

Set-up Overview

The following instructions will walk developers through the steps required to setup the application.

In this scenario, there are 2 key perspectives: Developer and Consumer. The developer refers to the app creator and the consumer refers to the customer/ client/ user of the developer's app.

Prerequisites

• Admin user credentials on 2 M365 Tenants
• Git
• Ngrok
• Microsoft Teams
• Visual Studio
• Windows PowerShell (as an Admin)
• Postman account, ideally with the desktop client installed
• SharePoint Embedded

Setup Instructions

1. Obtain pre-requisites for the original Tab Request Approval app.

2. Complete the setup for the original Tab Request Approval app under your developer tenant for this repo.

3. Complete reading the SharePoint Embedded documentation section for SharePoint Embedded under your developer tenant, the same one used in Step 2.

4. Configuring app secrets

   • Values to obtain from the developer tenant azure portal.

     • $TenantId represents the tenant id.
     • $ClientId represents the app id.
     • $ClientSecret represents the app secret.

   • Values to obtain from Ngrok or another hosting service

     • $BaseUrl represents the entire url. Ex: https://12345.ngrok-free.app or https://12345.devtunnels.ms
     • $DomainName represents the domain of the hosting service being used. Ex: 12345.ngrok-free.app instead of the entire base url.

   • Values to obtain from the SharePoint Embedded setup procedure.

     • $ContainerTypeId represents the container type id used for your storage purposes.
     • .cer and .key files. These files can be generated by following the instructions at this link
     • Store the files locally.
     • Navigate to the Certificates and Secrets tab on the developer azure portal and click on the Certificates section and upload the .cer.
     • Update the CertificatePath and CertificatePrivateKeyPath variables within in the SubscriberProvider.cs file.

   • Values to obtain from Teams Admin Center

     • $TeamsAppId represents the teams app id and is acquired once the app has been published into the store (next step).
     • $TeamsAppDisplayName represents the teams app display name. It is acquired once the app has been published into the store.

   • Once all the mentioned values have been obtained, replace them where necessary: appsettings.json, manifest.json, config.cshtml

     • In the config.cshtml file, the value to replace is the $BaseUrl which is found on the contentUrl key.

5. Install the Teams App on your consumer tenant

   • Once the Teams App is ready to be used by the consumer, upload the manifest.zip of the teams app into the Teams Admin Center by clicking on the Upload new app button
   • Once uploaded, the consumer needs to grant pemissions to the app. This is done by clicking on the Permissions tab. Then, clicking on the Grant Admin Consent button or Review permissions button.

Explanations

This section is dedicated to explaining particular parts of the code in greater detail.

TeamsAppInstallationScopeId

This id represents the scope from which the request is created. This is important because it helps to map which scopes SharePoint containers were generated in..

It offers the following benefits:

• Know which container stores a certain kind of data.
• Be able to perform operations on containers individually.
• Reduced time complexity by a factor of N (N is the number of containers).

Note: If you are facing any issue in your app, please uncomment this line and put your debugger for local debug.

Subscription Flow

This app provides users with the ability to establish change notification subscription. Subscriptions can be made to messages in teams or chats.

A subscription would be made by sending a POST request to either of the following endpoints: /Subscriptions/createTeamSubscription or Subscriptions/createChatSubscription.

• Teams Subscription

• Chat Subscription

Subscriptions have been made to inform developers of app installation or uninstallation events so that they would be able to leverage SharePoint Embedded APIs to provision or decommission storage respectively.

Ideally, the subscription should have been made to another resource that would inform developers when a customer installs or uninstalls an application. However, this resource does not yet exist on Microsoft Graph. To simulate these events, it was decided to rely on chat messages as those are the most easily accessible manually.

Installation and uninstallation events are simulated by entering the following respectively into a team or chat: #microsoft.graph.teamsAppInstalledEventMessageDetail and #microsoft.graph.teamsAppRemovedEventMessageDetail as shown below:

• Simulating installation in chat

• Simulating installation in team

• Simulating uninstallation in chat

• Simulating uninstallation in team

The purpose of providing these simulations is to show you how storage can be provisioned and decommissioned using SharePoint Embedded. To use this simulation, ensure that you create a subscription in the required chat or team resource via the ChangeNotification controller.

Recommendations and FAQs

1. I'm running into errors involving granting admin consent to my consumer tenant when I am uploading the manifest in the Teams Admin Center.

   • Undo/ delete the changes on Azure AD (Redirect URIs, API Permissions, Expos an API, Secrets, Certificates) that integrating SharePoint Embedded specifically made. Then upload the manifest with only the Tab Request Approval information and grant admin consent. Then integrate SharePoint Embedded, update the manifest and retry the upload process.

   • Ensure that a Service Principal for the Azure AD App that is hosting the Teams App exists. If it does not, please set it up manually by clicking on the Create Service Principal link.

   • Ensure that you are able to grant admin consent to that Service Principal (Enterprise Application). Restarting the process of setting up SharePoint Embedded manually will resolve this. You can do this by navigating to the API Permissions Tab and click on Grant Admin Consent for {{Tenant Name}}. Navigate to the app's Enterprise Application entity and click on the Grant Admin Consent for {{Tenant Name}} as well. Wait for a few minutes and refresh the permissions API Permissions Tab and the Enterprise Application Tab. If the statuses of the permissions have not been changed, then wait a few more minutes and repeat the above process again times.