ASP NET Web API login page

In this video we will discuss implementing login page for ASP.NET Web API.
Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our KZbin channel. Hope you can help.
/ @aarvikitchen5572
We want to design a login page. If we provide invalid username and password an error should be displayed.
Add a new HTML page to the EmployeeService project. Name it Login.html.
Please note :
1. sessionStorage data is lost when the browser window is closed.
2. To store an item in the browser session storage use setItem() method
Example : sessionStorage.setItem("accessToken", response.access_token)
3. To retrieve an item from the browser session storage use getItem() method
Example : sessionStorage.getItem("accessToken")
4. To remove an item from the browser session storage use removeItem() method
Example : sessionStorage.removeItem('accessToken')
On the Register.html page, we do not have Login button, which takes us to the Login page if the user is already registered. So please include Login button just below "New User Registration" text in the th element on Register.html
Text version of the video
csharp-video-tu...
Slides
csharp-video-tu...
All ASP .NET Web API Text Articles and Slides
csharp-video-tu...
All ASP .NET Web API Videos
• ASP.NET Web API tutori...
All Dot Net and SQL Server Tutorials in English
www.youtube.co...
All Dot Net and SQL Server Tutorials in Arabic
/ kudvenkatarabic

[@ijeomaenem2671]

This is one of the best Web API videos so far, very illustrative and clear .

[@michaelhoward9928]

Venkat. I know this is old content, but man you are the best teacher on KZbin. I am a seasoned dev, but I learn stuff from you all the time.

[@gouthami6246]

Thank you so much Sir..I followed the same way as you suggested and I am now able to add authorization to my web api.

[@tanvirahmadarjel7802]

Dear Sir, I am a big fan of your videos and your teaching quality..May be you are the best in the world (at least to me) in this business... Although I know but still I want some extra videos on Authentication and Authorization in ASP.NET Web API with AngularJS from you along with these JQuery Version. Take Care..

[@dheeraj0076]

Very nice tutorials. Two suggestions: 1. Would you please upload videos in FullHD (1080p) resolution? 2. please record videos in full screen mode of power point slides. Thanks for bringing the great content to us. :)

[@chromedev9994]

I think that contentType set to 'application/json' is a bit confusing because the request payload is not JSON but simply form data. Otherwise the video is very, very helpful. Thanks a lot.

[@hamzanasirr]

The BESTESTEST tutorial. Bless you, mate!

[@AbhishekSharma-tk8ez]

ur doing great job sir..!!! keep it up ..hope to see more videos on asp

[@stephenwereko7377]

Sir thank you so much for making understand web api,

[@simplifiedlifehacks7839]

Thanks for the wonderful tutorials. I am having a challenge when creating a login controller in my asp.net web api with sql server database. I would like to know how to create a controller for the login process ,i want the controller to have both the password and username from the database so that hen the api is consumed in a mobile app someone can be able to login using the credentials in the database.Any advice and resources are highly welcome

[@palanivelrajan2504]

Please let me know the reason for sending plain user name and password with encrypting. We did Base64 encryption for basic authentication.

[@muhammadrehbarsheikh8498]

thank you venkat sir.

[@AnoopNakira]

Hello Venkat sir Thanks for everything! can you please post the video for consuming a web api(third party) in a client mvc application, where api sends token in the intial call which will expire after some time and this token has to be used for all other subsequent calls.

[@rconte]

your videos are outstanding... I am watchg and following instructions in the webAPI serie. May I ask one question ? When trying to make a get request using Fiddler, the token sent is transformed twice by web API, in line "decodedAuthenticationCode = Encoding.UTF8.GetString(Convert.FromBase64String(authenticationCode))". After that the code tries to split this string int username password, using ":" as separator, witch does not work, since there is no ": in the string, also I do not see any reconizable password... I guess something is missing... Thank you very much for any help. Regards, R. Conte

[@rconte]

Just a silly mistake. Somehow the class "public class BasicAuthenticationAttribute" was still active, and there remained "[BasicAuthentication]" in the employees controller...

[@smf6765]

How can I get userName inside 'response' value? I mean where do I implement it in my code for it to appear inside response. Please answer my question.

[@binbob007]

Hi sir, I'm new in web API. Here my doubt is if I've no registration form (User table is hardcoded) then how can i authenticate the web api or how can i create token with that user table..? Thanks in advance

[@GreeeenEagle]

Thank you Sir.

[@bartomiejzajdel4827]

Is it Single Page Application or not??

[@amjadaslam5270]

hi sir , i am very confuse you are not showing the controller.

[@its4zahoor]

please watch the per-requisite videos # 23,22,21

[@AhmedMohamed-jy3hb]

HI sir I have been tried to create authentication functions from the same project and it works well and I have no problem with that. my point here is when I started to call the authentication functions from cross domain using JQuery AJAX it doesn't work as expected .and I have other functions APIs when I call it works without any cors problem So could you please tell us how to deal with this issue?

[@JayAyers]

Hi Ahmed, I know this is a bit late, but perhaps this will help others. I did the following (after pulling the remaining bit of my hair out) -------------------------------------------------------------------------------------------------------- 1. PM > Install-Package Microsoft.Owin.Cors -Version 4.0.0 2. //In Startup.Auth.cs public void ConfigureAuth(IAppBuilder app) { //add the following code app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll); 3. //Comment out any config.EnableCors(cors); //In WebApiConfig.cs //EnableCorsAttribute cors = new EnableCorsAttribute("*", "*", "*"); //config.EnableCors(cors); --------------------------------------------------------------------------------------------------------- Cheers!

[@lakmalgunasekara4979]

@@JayAyers I really appreciate your answer. the best solution for all cors problems

[@ytfilastu]

gr8

[@niteshgtel]

is this posible make login page using curl if curl htt responce is your balance is xxx fs-0 its means user id password and authoris number match in database else if mag is invalid credential data lot match login again

[@hafizumer9424]

url:'/token' Sir where the token file exist in project. ? i don't understand

[@mickeysaini]

you need to watch the previous episode for this.

[@aneeshkp9889]

I tried the same but getting {"error":"unsupported_grant_type"} error. Anyone please help me?

[@upendraget2]

Sir, I am trying this example form Angular JS as client and sending the request localhost:49698/token. This works from FIddler, but the same request is not working from Angular JS app(different proj). I am getting 'Access-Control-Allow-Origin' header not present error, while I have enabled CORS in my WebAPI project. All my other URLs work from Angular JS like localhost:49698/api/employees, but this URL localhost:49698/token does not work. Can u pls guide what is the problem here ?

[@ambersamad7794]

Hi there, I am having same problem as your. How did you solve this problem? I dont know how to pass username, password and grant_type to the url localhost:49698/token in angular js. I am sure we cannot do that in the query string. Please suggest.

[@arieltriana3831]

Hi Teacher, I have the same problem that Upendra, I created a new proyect whit other different domain (I'm working in Jquery). I don't know where place of the proyect I can put EnableCros for avoid 'Access-Control-Allow-Origin' in localhost:49698/token. Thank you

[@kjellberstad3934]

Hi. I struggled also with this. The solution I found was configuring cors in web.api in stead of in webapiconfig. Ref forums.asp.net/p/2115286/6116063.aspx?Re+Web+API+doesn+t+return+token+in+Chrome

[@ashutosh889]

your videos are outstanding and always informative. I am trying to implement this authentication with angular 2 and i get error {"error":"unsupported_grant_type"} in response when i call to localhost:54312/token.

[@aligeovany4645]

angular gard

[@rohitsakalle]

I got this error as well but was fixed after 1) removing space between type' and keyword 2) keeping p to small case. grant_type:'password'