swagger azure ad authentication | web api azure ad authentication | Swagger Azure AD Login

welcome to Azure teach.net in this demo we are going to develop an API and integrate Swagger with Azure ID authentication once the login is successful Swagger will receive the token and we can use the token to access our APA before we start please subscribe to Azure teach.net channel for more videos on azure and.net here I have created a.net 6 web API project I am going to the connected Services clicking on add a service dependency and after that here I am choosing Microsoft identity platform because I want to add Azure ready to this application later I want to add Azure ID authentication to Swagger as well now here it is showing all the app registrations which are there inside my Azure ID tenant for this demo I want to create a new app registration so here I'm clicking on this plus symbol and here I'm giving a name as Swagger Azure ready API so here it has created the app registration and also displaying over here and selecting this clicking on next and clicking on next again and clicking on finish it will generate the code at the required nokit packages modify the app settings.json and also it will update the Azure ID so here I'm clicking on finish it will take some time let us come back after it is completed now the configuration is completed I am clicking on close what it has done so if you go to the program.cs it added the Azure ID related settings over here so here if you see add Microsoft identity web API and here it is referring to the Azure ID configuration section that is there in the app settings.json that I am going to show you later and also it added use authentication and authorization now if you go to the app settings.json it has added this Azure ready configuration here instance means the server from which we can generate the token for authorization and this is the domain and this is related to my Azure account it has added the tenant ID this is also related to my Azure radio account this client ID is related to the app registration that we have created just before I'll show you the app registration on the Azure portal later it has added a default scope and we can use these Scopes to divide the permissions on our API it has added these two properties these are not required for our web API project it has added the required nuget packages as well now if you go to the default weather forecast controller here it has added this required scope attribute and it is referring to the Azure ready section that we have seen before and also it has added this authorized attribute if you are creating any new controllers you can simply copy paste these two things and if you want to add a different scope you can add that with a space over here and after that you can refer that on your controller using this required scope attribute here I am in portal.azual.com I am going to Azure active directory and here I am going to the app registrations and here if you see it has added this app registration and here if you see we have the tenant ID and also the client ID so if you go to our application at app settings.json here we have the same settings and also if you go to exports as an APA here we have the scope that is access as user now let us run this application and see if our Azure ready authentication is working fine or not I'm running this application I am clicking on this get button try it out clicking on execute if our Azure ready authentication is working fine it should have returned us the unauthorized error so if you see we have 401 response now let us add code related to the Swagger authentication so here we have builder.services.ad swaggergin so here we are going to use a different overload of this method here I am writing C Dot Swagger Dot and here it is V1 you can give any version I am giving V1 new open API info and here we can give the title as Wagner Azure ready demo and after that here we can give version as V1 this line of code is not required however Swagger UI will display this title this is the title of our API you can give any name over here and this is the version and after that here I am writing C dot add security definition we have to pass a name you can give any name I am writing auth to and after that new open API security scheme because we are going to use open API security scheme for our Swagger so we have to use this namespace and after that here we have to initialize few properties so the first one is description this will be displayed on the Swagger UI so here I am writing what 2.4 which uses authorization code flow there are different flows for the oauth 2.1 we are going to use authorization code flow and after that we have to give a name you can give any name here also I'm giving oauth 2.2 here we have to mention the type it should be security scheme type dot what to and after that here we have to mention the flows it should be new open APA auth flows and inside this we are going to use authorization code flow if you go inside this object definition here if you see we have different flows implicit password client credentials and authorization code these are different flows of oauth 2.4 we are going to use authorization code now here it should be new open API word flow and inside this we have to pass few properties that is authorization URL and token URL these are required as part of oauth 2.4 protocol so it should be new URI and we have to get it from the configuration of course you can do hard coding but I want to get these details from the configuration file so here I am writing Swagger as you ready colon authorization URL we are going to configure this later in the app settings.json and after that token URL so here I am simply copying this line and pasting it over here and here and naming it as token URL now here I am writing Scopes is equal to it's a dictionary new dictionary of string comma string and inside this here we have to get this scope so here I am writing Builder dot configuration and here I'm writing Swagger Azure ad colon scope at present we have only one scope we are going to configure this in the app settings.json later don't be confused here we have to give some description so here I am writing access API as user this security definition has the configuration to display the information on the Swagger UI that I'll show you later after running the application now let us add a security requirement so here I am writing C dot add security requirement it should be new open API security requirements so it's a kind of dictionary so here we have to pass an object so here I'm writing new open APA security scheme and inside this we have to pass a reference is equal to new open API reference and inside this we have to pass the type it should be reference type Dot security scheme and after that here we have to pass nid so here I am giving over to as the ID now here also we have to pass this groups so here I'm writing new array and inside this we have to pass this scope so here I'm writing this one last thing that we have to do here is we have to use a different overload so here I am writing C dot what client ID so this we are going to read from the configuration so here I am copying this and here I'm changing this to client ID and after that here I'm writing C dot o auth use pkc this is required for authorization code flow we are using authorization code flow over here so we have to use pkce at present we don't have more than one scope but if you have more than one scope you have to use this method and you have to pass the separator here I am using the separator as a white space if you are using a different characters you can mention that here now I am going to Azure portal and here I am in the app registrations I am clicking on new app registration I am giving the name as Swagger Client app registration so here we are creating this app registration because we are treating the Swagger UI as the client to the web APA generally the number of app registrations is equal to the number of apps those are using LG ready so here we have two apps those are using Azure ID that is web API and swaggery so here we are creating two app registrations please remember that we have created an App registrations from visual studio for web APA and clicking on register it has created the app registration so I am going to the visual studio now let us configure all these information that we are using over here so I'm copying this I'm going to app settings.json so here I'm adding one more property and after that here we have to use all the properties that we have configured and copying this and pasting it over here we'll get this information from the app registration that we have created and after that here we have to get the token URL so I am pasting it over here and after that we have to use the scope okay and now here I'm writing scope this also we are going to get from the app registration and here we have the client ID and copying this and pasting it over here now let us get this information from the app registration that we have created so here I'm clicking on this end points here if you see we have authorization endpoint I am copying this and pasting it over here and here we have token endpoint I am copying this and pasting it over here and after that we have to give this oops so here I am going to API permissions and after that add a permission and here we have my apis and here if you see we have the API that we have created I am clicking on this and here I'm choosing this clicking on ADD permission and after that I am clicking over here and copying this scope and I'm pasting the scope over here and here we have to give the client ID I am going to the overview section and here we have the client ID I'm copying this and pasting it over here and after that I am going to the app registrations again going to Swagger Azure ID APA and here I am going to expose an API and here I'm clicking on add a client application and here we have to give the client ID so here I am giving the client ID of r Swagger UI so here I am choosing this scope and clicking on ADD application one other configuration that we have to do is go to the app registrations and go to Swagger client type registration we have to add an authentication URL and also here we have to add a platform so I'm clicking on add a platform and here I am choosing the single page application you can choose any application but I prefer choosing single page application for Swagger and here we have to select these check boxes and also here we have to enter the redirect URI where we will be taking the token to frame this URL first we have to run the application so I am running this application now we could see a authorized button over here let us copy this URL go here paste it over here and after that here it will be o auth to hyphen redirect.html this is the URL that Swagger uses to take the token after the authorization and clicking on configure button now I am going over here and clicking on this authorize button so if you see here here we have or 2.0 which uses authorization code flow so this information we are getting from the security definition that we have added over here and also there is other information like token URL all those things which we have configured over here and we can see all that information over here and also it is showing the client ID over here now I am selecting the scope clicking on authorize button and it has redirected to the Azure login page and choosing the account now we got the token I am closing this pop-up clicking on the skate button clicking on try it out now as we got the token we should get a proper response from our API I am clicking on the execute button and here if you see we got the response previously we got 401 unauthorized error now we got the response and also here if you see it has added the token that it got from the Azure ready that is all in this demo if this video is helpful to you please like this video and also share it with your friends subscribe to the channel thank you

Channel: AzureTeach•Net

Views: 6,349

Keywords: swagger azure ad authentication, web api azure ad authentication, Swagger Azure AD Login, Azure AD Swagger, How to use Azure AD with Swagger, Swagger with Azure AD, Web API Swagger Azure AD, .Net6 Web API Swagger Azure Authentication, Swagger Azure Authentication, Swagger web api azure authentication, Swagger azure authenticaiton, webapi azure authentication, swagger azure active directory authentication, swagger with azure active directory, swagger authentication with azure ad

Id: r7gEKqSlb40

Length: 17min 27sec (1047 seconds)

Published: Mon Sep 26 2022

Reddit Comments

[u/MingZh]

Great! Thank you for sharing this video.