Create new sample - Tab-nested-auth - csharp (#1372)

* Create new sample tab-nested-auth csharp

* Adding User File

* Update sample name

* Update NAA Auth

* Update app reg auth tab

* Add Build Pipelie

* Update Main Readme

* Update Csharp Readme and images

* Update Readme

* Removed Un Used Code

* Update Auth Image

* Revert appsettings

* Update Images

* Update Readme and appsettings

* Add Await key word

* Remove Alert code

* Updated Code comments

* Update CS code comments

* Add Loading

.github/workflows/build-complete-samples.yml

@@ -479,6 +479,10 @@ jobs:
             - project_path: 'samples/tab-meeting-auto-recording/csharp/MeetingAutoRecording/MeetingAutoRecording.csproj'
               name: 'tab-meeting-auto-recording'
               version: '6.0.x'
+
+            - project_path: 'samples/tab-nested-auth/csharp/TabNestedAuth/TabNestedAuth.csproj'
+              name: 'tab-nested-auth'
+              version: '6.0.x'
 
       fail-fast: false
     name: Build All "${{ matrix.name }}" csharp

README.md

@@ -81,7 +81,7 @@ The [Teams Toolkit](https://marketplace.visualstudio.com/items?itemName=TeamsDev
 |26| Tab Meeting Tanscript Recording |This sample shows meeting transcripts and recordings. |[View][tab-meeting-transcript-recording#csharp]|[View][tab-meeting-transcript-recording#nodejs] ![toolkit-icon](assets/toolkit-icon.png)|
 |27| Tab DeepLink Pass Values |Microsoft Teams sample which displays deeplinks based on the values passed dynamically to the context. ||[View][tab-deeplink-pass-values#ts]|
 |28| Tab Meeting Recording and transcript with auto recording |This sample shows meeting recording and transcript with auto recording. |[View][tab-meeting-auto-recording#csharp]||
-|29| Nested App Authentication |This sample shows nested app authentication (NAA) is a new protocol that simplifies single sign-on (SSO) for single page applications. ||[View][tab-nested-auth#nodejs] ![toolkit-icon](assets/toolkit-icon.png)|
+|29| Nested App Authentication |This sample shows nested app authentication (NAA) is a new protocol that simplifies single sign-on (SSO) for single page applications. |[View][tab-nested-auth#cs]|[View][tab-nested-auth#nodejs] ![toolkit-icon](assets/toolkit-icon.png)|
 
 ## [Bots samples](https://docs.microsoft.com/microsoftteams/platform/bots/what-are-bots) (using the v4 SDK)
 >NOTE:
@@ -298,6 +298,7 @@ The [Teams Toolkit](https://marketplace.visualstudio.com/items?itemName=TeamsDev
 [tab-meeting-auto-recording#csharp]:samples/tab-meeting-auto-recording/csharp
 [tab-deeplink-pass-values#ts]:samples/tab-deeplink-pass-values/ts
 [tab-nested-auth#nodejs]:samples/tab-nested-auth/nodejs
+[tab-nested-auth#cs]:samples/tab-nested-auth/csharp
 [group-channel-tab#cs#razor]:samples/tab-channel-group/razor-csharp
 [group-channel-tab#cs#mvc]:samples/tab-channel-group/mvc-csharp
 [group-channel-tab#ts#spfx]:samples/tab-channel-group/spfx

samples/tab-nested-auth/csharp/README.md

@@ -0,0 +1,147 @@
+---
+page_type: sample
+description: Microsoft Teams sample app which showcases Azure AD SSO within teams tab using OBO flow to call Graph APIs in C#.
+products:
+- office-teams
+- office
+- office-365
+languages:
+- csharp
+extensions:
+ contentType: samples
+ createdDate: "12/03/2021 12:53:17 PM"
+urlFragment: officedev-microsoft-teams-samples-tab-sso-csharp
+---
+## Nested app authentication
+
+Nested app authentication (NAA) is a new authentication protocol for single page applications embedded in host environments like Teams, Outlook, and Microsoft 365, simplifying the authentication process to facilitate single sign-on (SSO) across nested applications and offering several advantages over the On-Behalf-Of (OBO) flow.
+
+**Interaction with app**
+![tab-nested-auth](Images/tab-nested-auth.gif)
+
+## Run the app (Using Teams Toolkit for Visual Studio)
+
+The simplest way to run this sample in Teams is to use Teams Toolkit for Visual Studio.
+1. Install Visual Studio 2022 **Version 17.10 Preview 4  or higher** [Visual Studio](https://visualstudio.microsoft.com/downloads/)
+1. Install Teams Toolkit for Visual Studio [Teams Toolkit extension](https://learn.microsoft.com/en-us/microsoftteams/platform/toolkit/toolkit-v4/install-teams-toolkit-vs?pivots=visual-studio-v17-7)
+1. In the debug dropdown menu of Visual Studio, select default startup project > **Microsoft Teams (browser)**
+1. In Visual Studio, right-click your **TeamsApp** project and **Select Teams Toolkit > Prepare Teams App Dependencies**
+1. Using the extension, sign in with your Microsoft 365 account where you have permissions to upload custom apps.
+1. Select **Debug > Start Debugging** or **F5** to run the menu in Visual Studio.
+1. In the browser that launches, select the **Add** button to install the app to Teams.
+> If you do not have permission to upload custom apps (sideloading), Teams Toolkit will recommend creating and using a Microsoft 365 Developer Program account - a free program to get your own dev environment sandbox that includes Teams.
+
+## Setup
+
+  1. Register a new application in the [Microsoft Entra ID – App Registrations](https://go.microsoft.com/fwlink/?linkid=2083908) portal.
+  2. Select **New Registration** and on the *register an application page*, set following values:
+      * Set **name** to your app name.
+      * Choose the **supported account types** (any account type will work)
+      * Leave **Redirect URI** empty.
+      * Choose **Register**.
+  3. On the overview page, copy and save the **Application (client) ID, Directory (tenant) ID**. You’ll need those later when updating your Teams application manifest and in the `appsettings.json` files.
+  4. Navigate to **Authentication**
+      If an app hasn't been granted IT admin consent, users will have to provide consent the first time they use an app.
+  - Set a redirect URI:
+      * Select **Add a platform**.
+      * Select **Single-page application**.
+      * Enter the **redirect URI** for the app in the following format: `brk-<broker_application_id>://<your_domain>`.
+
+      ![Authentication](Images/Authentication.png)
+      
+  5. Navigate to **API Permissions**, and make sure to add the follow permissions:
+    -   Select Add a permission
+    -   Select Microsoft Graph -\> Delegated permissions.
+        * User.Read (enabled by default)
+    -   Click on Add permissions. Please make sure to grant the admin consent for the required permissions.
+
+  6.  Navigate to the **Certificates & secrets**. In the Client secrets section, click on "+ New client secret". Add a description(Name of the secret) for the secret and select “Never” for Expires. Click "Add". Once the client secret is created, copy its value, it need to be placed in the appsettings.json.
+
+2. Setup NGROK
+ - Run ngrok - point to port 3978
+
+   ```bash
+   ngrok http 3978 --host-header="localhost:3978"
+   ```  
+
+   Alternatively, you can also use the `dev tunnels`. Please follow [Create and host a dev tunnel](https://learn.microsoft.com/en-us/azure/developer/dev-tunnels/get-started?tabs=windows) and host the tunnel with anonymous user access command as shown below:
+
+   ```bash
+   devtunnel host -p 3978 --allow-anonymous
+   ```
+
+3. Clone the repository
+
+    ```bash
+    git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git
+    ```
+
+4. Run the app from a terminal or from Visual Studio, choose option A or B.
+
+    A) From a terminal, navigate to `/samples/tab-nested-auth/csharp`
+
+    ```bash
+    # run the app
+    dotnet run
+    ```
+    B) Or from Visual Studio
+
+    - Launch Visual Studio
+    - File -> Open -> Project/Solution
+    - Navigate to `/samples/tab-nested-auth/csharp` folder
+    - Select `TabNestedAuth.sln` file
+    - Press `F5` to run the project
+
+5. Modify the `/appsettings.json` and fill in the following details:
+  - `{{ AzureAD Client Id }}` - Generated from Step 1 while doing Microsoft Entra ID app registration in Azure portal.
+  - `{{ AzureAD Tenant Id }}` - Generated from Step 1, also referred to as Directory Tenant Id
+  - `{{ Application ID URI }}` - Your Application ID URI.  ex: `https://1234.ngrok-free.app`
+
+6. Setup Manifest for Teams
+- __*This step is specific to Teams.*__
+    - **Edit** the `manifest.json` contained in the ./appPackage folder to replace your Microsoft App Id (that was created when you registered your app registration earlier) *everywhere* you see the place holder string `{{Microsoft-App-Id}}` (depending on the scenario the Microsoft App Id may occur multiple times in the `manifest.json`)
+    - **Edit** the `manifest.json` for `validDomains` and replace `{{domain-name}}` with base Url of your domain. E.g. if you are using ngrok it would be `https://1234.ngrok-free.app` then your domain-name will be `1234.ngrok-free.app` and if you are using dev tunnels then your domain will be like: `12345.devtunnels.ms`.
+    - **Zip** up the contents of the `appPackage` folder to create a `manifest.zip` (Make sure that zip file does not contains any subfolder otherwise you will get error while uploading your .zip package)
+
+- Upload the manifest.zip to Teams (in the Apps view click "Upload a custom app")
+   - Go to Microsoft Teams. From the lower left corner, select Apps
+   - From the lower left corner, choose Upload a custom App
+   - Go to your project directory, the ./appPackage folder, select the zip folder, and choose Open.
+   - Select Add in the pop-up dialog box. Your app is uploaded to Teams.
+
+## Running the sample
+
+You can interact with Teams Tab meeting sidepanel.
+
+**Install app:**
+![InstallApp ](Images/1.InstallApp.png)
+
+**Click Login:**
+![2.LoginPage ](Images/2.LoginPage.png)
+
+![Permissions ](Images/Permissions.png)
+
+![PermissionsAccepts ](Images/PermissionsAccepts.png)
+
+![UserInformation ](Images/3.UserInformation.png)
+
+## Outlook on the web
+In the debug dropdown menu of Visual Studio, select default startup project > **Outlook (browser)**
+
+## Running the sample
+
+**Click Login:**
+![OutlookLogin ](Images/2.OutlookLogin.png)
+
+**Login Details:**
+![OutlookLoginDetails ](Images/3.OutlookLoginDetails.png)
+
+## Further reading
+
+- [Nested app authentication](https://review.learn.microsoft.com/en-us/microsoftteams/platform/concepts/authentication/nested-authentication?branch=pr-en-us-10768)
+
+- [SPA Redirect URL](https://learn.microsoft.com/en-us/office/dev/add-ins/develop/enable-nested-app-authentication-in-your-add-in#add-a-trusted-broker-through-spa-redirect)
+
+
+
+<img src="https://pnptelemetry.azurewebsites.net/microsoft-teams-samples/samples/tab-nested-auth-csharp" />

samples/tab-nested-auth/csharp/TabNestedAuth.sln

@@ -0,0 +1,36 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.10.34804.81
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "TabNestedAuth", "TabNestedAuth\TabNestedAuth.csproj", "{DD8A1EAC-6947-423D-A135-8D6B22E7E857}"
+EndProject
+Project("{A9E3F50B-275E-4AF7-ADCE-8BE12D41E305}") = "TeamsApp", "TeamsApp\TeamsApp.ttkproj", "{42A0237C-30E0-42AE-B6ED-50F318517E77}"
+EndProject
+Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Items", "Solution Items", "{19FDF20A-BA94-408B-8DCE-7BC39A2CAC50}"
+	ProjectSection(SolutionItems) = preProject
+		TabNestedAuth.slnLaunch.user = TabNestedAuth.slnLaunch.user
+	EndProjectSection
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{DD8A1EAC-6947-423D-A135-8D6B22E7E857}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{DD8A1EAC-6947-423D-A135-8D6B22E7E857}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{DD8A1EAC-6947-423D-A135-8D6B22E7E857}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{DD8A1EAC-6947-423D-A135-8D6B22E7E857}.Release|Any CPU.Build.0 = Release|Any CPU
+		{42A0237C-30E0-42AE-B6ED-50F318517E77}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{42A0237C-30E0-42AE-B6ED-50F318517E77}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{42A0237C-30E0-42AE-B6ED-50F318517E77}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{42A0237C-30E0-42AE-B6ED-50F318517E77}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {F99814E0-F3D5-4C00-8506-FE5FBA22BC84}
+	EndGlobalSection
+EndGlobal

samples/tab-nested-auth/csharp/TabNestedAuth.slnLaunch.user

@@ -0,0 +1,32 @@
+[
+  {
+    "Name": "Microsoft Teams (browser)",
+    "Projects": [
+      {
+        "Path": "TabNestedAuth\\TabNestedAuth.csproj",
+        "Action": "Start",
+        "DebugTarget": "Start Project"
+      },
+      {
+        "Path": "TeamsApp\\TeamsApp.ttkproj",
+        "Action": "StartWithoutDebugging",
+        "DebugTarget": "Microsoft Teams (browser)"
+      }
+    ]
+  },
+  {
+    "Name": "Outlook (browser)",
+    "Projects": [
+      {
+        "Path": "TabNestedAuth\\TabNestedAuth.csproj",
+        "Action": "Start",
+        "DebugTarget": "Start Project"
+      },
+      {
+        "Path": "TeamsApp\\TeamsApp.ttkproj",
+        "Action": "StartWithoutDebugging",
+        "DebugTarget": "Outlook (browser)"
+      }
+    ]
+  }
+]

samples/tab-nested-auth/csharp/TabNestedAuth/.gitignore

@@ -0,0 +1,25 @@
+# TeamsFx files
+build
+appPackage/build
+env/.env.*.user
+env/.env.local
+appsettings.Development.json
+.deployment
+
+# User-specific files
+*.user
+
+# Build results
+[Dd]ebug/
+[Dd]ebugPublic/
+[Rr]elease/
+[Rr]eleases/
+x64/
+x86/
+bld/
+[Bb]in/
+[Oo]bj/
+[Ll]og/
+
+# Notification local store
+.notification.localstore.json

samples/tab-nested-auth/csharp/TabNestedAuth/Controllers/HomeController.cs

@@ -0,0 +1,33 @@
+// <copyright file="HomeController.cs" company="Microsoft">
+// Copyright (c) Microsoft. All Rights Reserved.
+// </copyright>
+
+// Declare the namespace for the controller
+namespace TabNestedAuth.Controllers
+{
+    // Import necessary namespaces
+    using Microsoft.AspNetCore.Mvc;  // Provides functionalities for building web applications, including controllers.
+    using Microsoft.Extensions.Configuration;  // Provides access to configuration settings.
+
+    // Define the HomeController class, which inherits from the ASP.NET Core Controller class
+    public class HomeController : Controller
+    {
+        // Private readonly field to store the injected IConfiguration instance
+        private readonly IConfiguration _configuration;
+
+        // Constructor that accepts an IConfiguration instance as a dependency and assigns it to the private field
+        public HomeController(
+            IConfiguration configuration)
+        {
+            _configuration = configuration;
+        }
+
+        // Action method that handles HTTP GET requests to the Index endpoint
+        public IActionResult Index()
+        {
+            // Set the clientId value in the ViewBag for use in the view
+            ViewBag.clientId = _configuration["AzureAd:ClientId"].ToString();
+            return View();  // Return the default view associated with this action
+        }
+    }
+}

samples/tab-nested-auth/csharp/TabNestedAuth/Program.cs

@@ -0,0 +1,24 @@
+// <copyright file="Program.cs" company="Microsoft">
+// Copyright (c) Microsoft. All Rights Reserved.
+// </copyright>
+
+namespace TabNestedAuth
+{
+    using Microsoft.AspNetCore.Hosting;
+    using Microsoft.Extensions.Hosting;
+
+    public class Program
+    {
+        public static void Main(string[] args)
+        {
+            CreateHostBuilder(args).Build().Run();
+        }
+
+        public static IHostBuilder CreateHostBuilder(string[] args) =>
+            Host.CreateDefaultBuilder(args)
+                .ConfigureWebHostDefaults(webBuilder =>
+                {
+                    webBuilder.UseStartup<Startup>();
+                });
+    }
+}

samples/tab-nested-auth/csharp/TabNestedAuth/Properties/launchSettings.json

@@ -0,0 +1,13 @@
+{
+	"profiles": {
+		"Start Project": {
+			"commandName": "Project",
+			"dotnetRunMessages": true,
+			"applicationUrl": "https://localhost:44302;http://localhost:2544",
+			"environmentVariables": {
+				"ASPNETCORE_ENVIRONMENT": "Development"
+			},
+			"hotReloadProfile": "aspnetcore"
+		}
+	}
+}