{"id":186,"date":"2017-11-16T00:00:00","date_gmt":"2017-11-16T00:00:00","guid":{"rendered":"http:\/\/officedevblogs.wpengine.com\/?p=186"},"modified":"2017-11-16T00:00:00","modified_gmt":"2017-11-16T00:00:00","slug":"authentication-in-microsoft-teams-apps-tabs","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/authentication-in-microsoft-teams-apps-tabs\/","title":{"rendered":"Authentication in Microsoft Teams Apps: Tabs"},"content":{"rendered":"
\n

Introduction<\/h2>\n

Some of the most common questions we receive from Microsoft Teams developers concern authentication to Azure Active Directory (Azure AD), single sign-on (SSO) to Azure AD, and how to access Microsoft Graph APIs from within a Microsoft Teams app. Here, we’ll explain in detail how to do these things, going above and beyond authentication basics<\/a>.<\/p>\n

The TypeScript source code shown here can be found in our comprehensive sample apps: https:\/\/github.com\/OfficeDev\/microsoft-teams-sample-complete-node<\/a>. There’s also a C# version<\/a>.<\/p>\n

First Things First<\/h2>\n

Don’t rely on the information from tab context to establish the user’s identity, whether you get it as URL parameters to your tab content URL or by calling the microsoftTeams.getContext() function in the Microsoft Teams client SDK. A malicious actor could invoke your tab content URL with its own parameters, and a web page impersonating Microsoft Teams could load your tab content URL in an <iframe> and return its own data to the getContext() function. You should treat the identity-related information in the tab context as \u00e2\u20ac\u0153hints,\u00e2\u20ac\u009d and validate them before use.<\/p>\n

The Basics<\/h2>\n

The help topic Authenticate a user in your Microsoft Teams tab<\/a> covers the basics of tab authentication. Here I’ll present a working example of a static tab that requests an access token for Microsoft Graph and shows the current user’s basic profile information from Azure AD.<\/p>\n

Configuring your Azure AD Application<\/h2>\n

To authenticate with Azure AD, you will need to register an application and configure it correctly. If your Microsoft Teams app has a bot or a compose extension, an Azure AD application was created for you when you registered your bot with the Bot Framework. If your Microsoft Teams app just has a tab, you can create a new application through the Application Registration Portal (https:\/\/apps.dev.microsoft.com<\/a>).<\/p>\n

The examples below use the OAuth2 Implicit Grant flow<\/a> via the V1 endpoint, and reads the user’s profile information. Here’s how to configure your application:<\/p>\n

1. Open the Application Registration Portal<\/a>, locate your app, and click on it to see its properties.<\/p>\n

2. For the TypeScript\/Node.js<\/a> and C#<\/a> sample apps on GitHub, the redirect URLs will be similar to what’s below, but the hostname will be different. That is, the redirect URLs for the sample app will be https:\/\/yourhost<\/em>\/tab-auth\/simple-end and https:\/\/yourhost<\/em>\/tab-auth\/silent-end.<\/p>\n

\"User.Read<\/p>\n

3. In the “Microsoft Graph Permissions”\u009d section, add the permissions your app requires. The examples below assume the User.Read delegated permission, which newly-created apps will have by default.<\/p>\n

\"TypeScript\/Node.js<\/p>\n

Step 1: Initiate Authentication Flow<\/h2>\n

In the tab content or configuration page, call the microsoftTeams.authenticate() function of the Microsoft Teams client SDK to launch a popup that will host the authentication flow.<\/p>\n

microsoftTeams.authentication.authenticate({\n\u00a0\u00a0\u00a0 url: window.location.origin + \"\/tab-auth\/simple-start\",\n\u00a0\u00a0\u00a0 width: 600,\n\u00a0\u00a0\u00a0 height: 535,\n\u00a0\u00a0\u00a0 successCallback: function (result) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 getUserProfile(result.accessToken);\n\u00a0\u00a0\u00a0 },\n\u00a0\u00a0\u00a0 failureCallback: function (reason) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 handleAuthError(reason);\n\u00a0\u00a0\u00a0 }\n});<\/pre>\n
 <\/p>\n
Here are some important things to understand about the above function:<\/p>\n