Name		Name	Last commit message	Last commit date
parent directory ..
Images		Images
TabExternalAuth		TabExternalAuth
assets		assets
README.md		README.md
TabExternalAuth.sln		TabExternalAuth.sln

README.md

page_type

description

products

languages

extensions

urlFragment

sample

This sample app demonstrates the integration of Google OAuth2 for user authentication within Microsoft Teams. It features a tab-based interface that allows users to log in using their Google accounts and interact with the application seamlessly.

office-teams

office

office-365

csharp

contentType	createdDate
samples	24/08/2023 11:20:17 AM

officedev-microsoft-teams-samples-tab-external-auth-csharp

Tab external auth - C#

This Microsoft Teams sample app illustrates the implementation of Google authentication using OAuth2, enabling seamless user sign-in via external providers. It includes a tab interface for easy interaction, showcasing best practices for integrating authentication within Teams applications.

Included Features

External Auth (Google Oauth2)
Tabs

Interaction with app

Prerequisites

.NET Core SDK version 6.0

determine dotnet version
```
dotnet --version
```
devtunnel or ngrok (For local environment testing) latest version (any other tunneling software can also be used)
Teams Microsoft Teams is installed and you have an account

Setup

Create Google OAuth app Google API Console

Create project
Enter project name
Click configure consent screen
Select Oauth client Id for app creation
Select application type as Web application and give a suitable app name
For authorized javascript url, provide your app's base URL
For redirect url, give the URL in the format below https://<<base-url>>/Auth/GoogleEnd where base-url is your application's base url. For eg,
Once the app is created, copy the client id and client secret
OAuth Created
Enable access to the Google People API.

Setup NGROK

Run ngrok - point to port 3978

   ngrok http 3978 --host-header="localhost:3978"

Alternatively, you can also use the dev tunnel. Please follow Create and host a Dev tunnel and host the tunnel with anonymous user access command as shown below:

devtunnel host -p 3978 --allow-anonymous

Setup for code

Clone the repository

git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git

Modify the /appsettings.json and fill in the following details:
- {{GoogleAppId}} - Generated from Step 1, while registrating google oauth app.
- {{GoogleAppPassword}} - Generated from Step 1, while registrating google oauth app.
- {{ApplicationBaseUrl}} - Your application's base url. For eg https://123.ngrok.io.
If you are using Visual Studio
Launch Visual Studio
File -> Open -> Project/Solution
Navigate to /samples/tab-external-auth/csharp/TabExternalAuth folder
Select TabExternalAuth.csproj file

Setup Manifest for App
- Edit the manifest.json contained in the ./AppManifest folder to replace placeholder {{GUID-ID}} with any guid id.
- 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 tunnel, your URL will be https://12345.devtunnels.ms.
- Zip up the contents of the Manifest 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 ./Manifest 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

Note: Supported on Teams, Outlook, and Office for Desktop, as well as Outlook and Office for Mobile. Not supported on Teams Mobile or on Teams, Outlook, and Office for Web.