Microsoft 365 Community Identity, 21 Jan 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Community Demo: OAuth 2.0 Authentication Flow

Description

Watch this community demo by Ramin Ahmadi, Content and Cloud, to learn about implementing Microsoft Teams OAuth 2.0 Authentication Flow.

Ramin Ahmadi | @raminahmadi1986 | https://ramin.expert

Stay connected
Twitter https://twitter.com/microsoft365dev
YouTube https://aka.ms/M365DevYouTube
Blogs https://aka.ms/M365DevBlog

A

Hello, everyone, my name is ramin and I work at content cloud today. I'm going to show you how you can implement microsoft teams, os authentication flow. You can find me on social media, as you can see here.

A

So I know this is not the intention of this demo, but as a basic understanding of us is a prerequisite for working with authentication in teams. I think it's a good idea to just to have a really quick recap on what is oas.

A

So us is an opening standard for authentication and authorization used by many identity providers like microsoft, salesforce sparks and other providers. So, as you can see here, we have a client application which wants to get access to a protected resource which is in a resource server.

A

So what we need to do. First, we take the client application request, an access token from the authorization server. Then the authorization server asks the user, whether the whether to grant the requested permissions to the client application and if the user allows the authorization server to issue an access token. The server generates an access token and issues that to the client application and then, with the access token client application can access to that protected resource.

A

So this is ost that has a standardized access, token request and response. So um everything between the client application and the authorization server, which is the request and response, is os 2..

A

So we have different flows of ost authorization code like authorization called impla in place, implicit flow, client credentials, resource owner, password credentials and some other type of flows. On top of these, like on behalf of flows and flow and other type of flows. But today I'm going to show you how you can implement the authorization code flow.

A

And also it's important to know uh how we implement that authentication flow in microsoft teams. So, as you can see here in this diagram, first, the user interacts with the content on the tab, configuration or content page. The tab constructs the url url for its us start page and then uh tab calls the microsoft teams authenticate method, which is in the microsoft teams, sdk to register the success, callback and failure callback functions.

A

Then teams opens the start page in an iframe in a pop-up window. To start the start page generates random estate data, save it for a feature, validation and redirects to the identity providers authorized endpoint on the provided side, the user sign in and grants access to the app the provider take the user to the tabs os redirect page with an access token, and if everything is okay and their state is valid, uh it's going to call a notify successes, function and teams closes the pop-up and render the ui.

A

We will that I will show you in a before. Second show you uh the demo. I just wanted to talk some some about microsoft teams, development, how you can basically build app for microsoft teams, because there are different ways to do that. I choose sharepoint framework because um it has really. uh It has many many advantages, uh for example, uh automatic hosting automatic deployment uh single sign-on through sharepoint.

A

It is cdn optimized, it's really easy debugging. If you know sharepoint framework you can you know that you can do that in the through workbench. You have access to sharepoint context, as well as consuming microsoft, graph, api and other azure ad securities api, which is facilitated by aadhd client factory class.

A

You can define some custom properties to configure your tab when you add your tab to to a channel, so you can configure that customize that and it's reusable, so you can use it as a web part in sharepoint or as a tab in microsoft teams, but there are also some disadvantages of using sharepoint framework. For example, it doesn't support the static tabs yet and only tabs and messaging extensions supported in sharepoint framework solution, messaging extensions added in the recent release of 1.11, and if you want to programmatically, you know add that tab to a channel.

A

It's not that easy, because it uses dynamic url. For example. If you create a team, it has a url behind the scene and it uses that to basically render the page- and there is another way of developing app for microsoft teams, which is nodejs or asp.net.

A

We support all project types such as bots messaging, extensions, tab, connectors and outgoing webhooks. It supports server side code like you, can use express for node.js and if you're using asp.net, you can use c-sharp for the server-side code. It supports routing and also aesthetic page url. Provisioning is more simpler than the sharepoint framework and it's configurable. For example, you can pass some queries in parameters for uh customizing your tab and it also has some disaster and disadvantages.

A

Like the deployment is not that easy, and if you want to debug it, you need to use ngrok for node.js projects and pay for a subscription. If you don't want to, you know, change the settings each time you run the project and if you want to host it in azure website, you need to you need a custom domain because it doesn't support uh sso, it's just a security risk um and hosting is not free. You have to pay for that.

A

So, let's jump to the demo, and after that I can show you the code and the steps you can implement the rst authentication flow. So here in microsoft teams, as you can see, I added this tab to one of the channel, and here we can see the login button. If you want to see the box folders and files first, we need to log in if I click on that it opens up a pop-up.

A

So if you haven't already signed in you need to sign in first with your username and password, and here it asks you to grant access to to this application and give this permission to this app and if you grant access to that, you can see if we render re-render the page, basically refresh the page and displays the files and folders here as you can see, and you can just click on the files view the files or remove them, rename them share them or any anything you can do with this, and also, as I said, there's a settings for this tab and there are some properties you can set for for this sample.

A

I just added folder id. So if you want to go to another folder, for example, if I go to box.com and if I want to display this folder, I can just copy the copy. The folder id get back here, put it as a property and if you refresh the page again refresh the tab again, you can see it change the folder to this folder from the box.

A

So this is the this is how it works. It opens up the pop-up window you need to sign in. You need to gain access to the client application and with the access token, you can basically display all of the files and folders inbox.com.

A

If I want to show you how it works. uh So the first step is: let me open this one here.

A

So the first step is to register your app. Each provider has different way of registering the app or even different name. For example, you need to create application registration in azure or connected app in salesforce for box.com. You can navigate to the developer, console and select the create a new new app, and here you can just choose well the different type of app you can create for this sample. I just use the custom app and you can see we have several authentication which use jwt and user authentication. We use os2.

A

So I chose this authentication type and then, when you create the app you you need to navigate to the configuration. Some of these configurations are similar or are basically general to all of these um application types in different. You know providers, for example, you all of them provide you, the client id and client secret, which is very very important because we need them. When we want to talk to authorization server, then we have the redirect uri, which is absolute url in this sample. I uploaded this file in sharepoint.

A

As you can see here, there is a sharepoint url, but if you host your app in azure, you need to change this url to to your basically to your page, and then we have the application scopes. These are the payments. uh I want my app to basically get granted from the user uh for this app. I just added, read all files and write all files, and the other property you need to set here is the course.

A

So if you're using sharepoint, you need to add your sharepoint url and if you're using azure, you need to basically add url of your application and after that, let's go through the code.

A

So here this is a sharepoint framework solution, uh so we have different components and classes here. The most important one is this box content explorer.

A

I use box.com as an example here, because it has pre-built user interface components such as content explorer, which helps us to just focus on the code rather than the ui, but you can use any any other type of components or provide it.

A

So the box content explorer element allows allows developer to embed a folder view of content installing box in their application.

A

The library fetches information about a specific folder through the box api and then renders the content in a folder view, so user can navigate through the folder hierarchy and perform file operations like rename delete and share that he just saw in the demo. The only thing that is really important here is this token token property.

A

So this is the only thing this company expect from us. The other properties is just some permission that you need to set or, for example, the folder you want to display it's really. It's really simple. uh First, I check if a token is available or if there is any cache token available. If not, I just I render the box component, which is really simple.

A

If I go to the login component, you can see it's just a really simple component with a login button which, if you click on that it goes to get box access, token method, which is in our service class, and here first we use microsoft, microsoft teams sdk, which provides or provides us authenticated method which has some parameter, for example the url, which is the url of start page, which is in sharepoint, and I will show you in a minute.

A

This is the pop-up window read and hide. If you want to change that, you can easily change this settings, and this is success and failure callback functions. So if everything goes well and we get the code back or the access to came back, we can use this function and if something goes wrong, you can display error message or do whatever you want with the failure callback.

A

So after we open the pop-up user sign-in and get access to our application because we're using authorization code flow, uh we get the code which we need to exchange for another access token. So here um I use, I make another call which you can see. The ground type is authorization code. We have the client box, client, id and box client secret and also the code.

A

We got from the authorization server and we can use that to get to get the access token, um and this is not recommended to keep the client secret and client id in the client side.

A

It's better to have a server side code, for example, in azure or somewhere, that you can just send this code to the to the server side and get access token back, but for this sample. I just wanted to keep it simple and give you the idea how you can basically implement this authentication flow and if I just open those pages in sharepoint, uh this is the authentication start and authentication and page.

A

First, you need to reference to microsoft teams sdk at the top- and here you can see. I set the callback url, which is the redirect url and also the client id which I passed from the the web part or the sharepoint framework report in the code.

A

It generates a state for us which is a random grid and keep it in the local storage because we need to validate that state after we get the code back from the provider authorization provider and it redirectly redirects the uh the user to the authorized endpoint of the authorization server and after that, when a user grants a permission and it redirects the user.

A

Back to this, redirect url first evaluate the estate, get the local storage to get the estate, and if it's not equal to the state back from the server, you notify failure in the microsoft teams sdk. Otherwise, he just called and notified success with the code it retrieves from the authorization server and with that code we can get the access token back.

A

So I think uh yeah, that's it. uh So we have another configuration uh file here that I keep uh the endpoint urls like authorize, which we use for granting permission and the token to exchange the code with the with access token, and also the client id client secret and our authentication page, which is in sharepoint, and this is not just about box.com. You know you can use this flow uh to get the access token for um other other type of provider, for example.

A

If I can, if I want to show you, I implemented another tab which displays some data from salesforce.com and if you, if the user wants to edit the data it has to log in first and then they are allowed to edit the data. So if I click on the edit button, you can see a pop-up window, which is kind of same as the other window that we saw for the box.com, and here you can sign in with your username and password and then, when you log in you can edit the data here.

A

So based on the scenario you want to implement, you can use this ost authentication flow and yeah. That's it awesome. Thank you, ramen really appreciate it.