ReactJs + Webapi How do you do external authentication? - c#

I am building a reactjs website that will communicate with asp.net web api 2 to save and retreive data.
but I am not sure how to do this.
I know to accomplish this on a high level it would be something like
User comes to my site and hits signup/log
Chooses which provider then want to use(google, facebook and etc). I am only want to support external providers(ie I don't want to have to deal with usernames/pwds)
User it sent to authenticated part of site
User clicks "add course" that data send via ajax to webapi with some sort of token to prove they have access to these methods.
I am not sure how to implement this problems I see is
Reactjs I guess is handling the authentication part? then once they been authenticated it would have to be saved in my db via webapi so it knows about this new user?
Reactjs would have to block users from going to secure pages till they are authenticated
Web api would have to generate a token for the user for that session so they can access the web api(I want to stop people from consuming my api).
Is there some simple example out there how to achieve this?

Reactjs I guess is handling the authentication part? then once they been authenticated it would have to be saved in my db via webapi so it knows about this new user
Better use some third party auth library here like PassportJS that does the auth for you using strategies like Passport-Facebook. This will give you an Oauth access token from Facebook upon authentication. You can now save this token in your cookies (or localStorage), take a look at the security considerations.
Should you store it in a DB? Here are some arguments about it.
Reactjs would have to block users from going to secure pages till they are authenticated
This can be done by checking if they have a valid token.
Web api would have to generate a token for the user for that session so they can access the web api(I want to stop people from consuming my api).
This can be easily achieved by using JSON Web Tokens. Note that you will have to store the JWT in your client side locally, along side your FB-Google oauth tokens (or you can relegate that to a single API by storing them in DB?. Its a design choice, I would prefer to store them separately and save a lot of hassle).

Related

External logins and c# web api

I am new to .NET core and while I have .NET experience, I have never built authentication, in the past I've always worked on project not started by me. I am just trying to learn and find good resources and I would greatly appreciate if anyone knows tutorial or if it can explain how to solve this.
When using external logins, I followed those instructions here. This all works well if I create simple web api project and run, I get a web page where I can login, authenticate, works perfect. But this is not my end goal, I am building Web APIs not a Web Application. In my case let's say I have iOS and Android apps and my external login is done on the app itself, how would I pass token to Web APIs? I want to use [Authorize] method in Web APIs to make sure that no un-authorized access is made agains APIs and in addition to that I would like to use roles.
I am assuming token information is passed in header. But what is the header name for token? Can external authentication be used with roles or that is only possible if I store username/password? Can you point me to some good tutorial or anywhere I can learn more because all google search returns back to same like I have mentioned above and it is not very descriptive.
In general , your web api will work like a identity provider , it will issue and validate the JWT tokens :
http://bitoftech.net/2014/06/01/token-based-authentication-asp-net-web-api-2-owin-asp-net-identity/
You can also implement authorization with the help of your external login provider .If you have SDK or own code in your client app to help do authentication , for authorization part , you can also register your web api in the same identity provider . For example , you are using the google authentication external login in your client app , you will should register your client app and web api on google's application registration page , then you could use OpenID Connect hybrid Flow to authentication user and get access token for accessing web api . Each identity provider provides how to implement authentication/authorization with lots of documents.
You can have an endpoint that allows anonymous access and takes the token and verifies it. Then it can send back a JWT that contains claims/roles that you want to enforce on the specific user. Every time the client accesses a secure endpoint, it can send your JWT in the header which gets verified before the specific method in your API controller is called. You can look into OAuth flows if you want to integrate social logins.
For example, Google has this documentation for OAuth-
https://developers.google.com/identity/sign-in/web/backend-auth

Javascript SPA, authenticate user with Hello.js social login and validate token from ASPNET5 C# WebApi backend

I'd like to create an application using Angular2 as frontend and the new ASPNET 5 WebApi as backend, but when it comes to authentication/authorisation I feel I'm totally missing the point despite all the reading...
Ideally I'd like to authenticate users using an identity provider such as Google or Facebook using Hello.js, I don't really want to have any sort of local registration for users. And then I'd also like to use an ASPNET 5 WebApi backend to access my database.
This article describes exactly what I want, but not with an ASPNET 5 WebApi backend: https://ole.michelsen.dk/blog/social-signin-spa-jwt-server.html
I'm not sure I understand the process right:
After receiving an access token from the identity provider, the SPA should send/forward it to the backend for verification. The WebApi backend should validate it against the provider (at least the first time), and create its own token (JWT) to be sent to the SPA. The SPA simply stores it (local store or session store) and the result is that the user is logged into my application.
Is this correct? Is what I want to achieve possible?
I've looked into other options such as OpenIddict, IdentityServer3/4 but as I understand it, I'd be creating my own identity provider using those, and it's not really what I need. Am I misunderstanding?
Thanks.
As far as i understand, you want:
Authentication with google(you don’t want to use google access token for using google resources)
Authorization with jwt token for web api backend.
So, you need Identity Server3/4, OpenIddict or writing own implementation for creating jwt token. There is similar question with good answers(especially #Tseng’s answer).
For managing jwt token in client side(angular2), see below links:
https://auth0.com/blog/2015/11/10/introducing-angular2-jwt-a-library-for-angular2-authentication/
https://damienbod.com/2016/03/02/angular2-openid-connect-implicit-flow-with-identityserver4/
There is an easy answer here. Use https://auth0.com/ It's free on a small scale and all the details are handled for you. Good samples and good open source participant. No affiliation, just a fan.

Asp.net authentication in its own web application

I currently have two web applications, one of which is a web api, which both have it's own implementation of ASP.NET Identity for authenticating users (first one is cookie and second one is bearer tokens).
I need, in the near future, to add a third web site to the family and was thinking to move the authentication logic in a standalone web application which could serve all the orhers.
For example: instead of authenticating to www.mysite.com and/or api.mysite.com, I would like that both the applications could authenticate against a new website, like e.g. login.mysite.com, as microsoft does.
How can I achieve something like this? Does somebody has any direction to start with?
What you need is an Identity Server which will authenticate the requests and give you back an access token. You can then use the access token to make subsequent requests to APIs and websites etc. As long as the access token is valid you will be able to make requests. There is great .net based open source solution available for Identity Server. Have a look at Thinktecture. You can download the source and demo projects to try yourself.

Secure webapi 2 without authorisation or user login

I looked everywhere for an answer about securing my webApi but always i'm pointed to OAuth or openID, but i don't want the user to login or authenticate. This is my problem:
I have a webapi which is called via Javascript to get the data in Json. This data is used in the Html of that page. (deployed on Azure)
Now i don't want someone else to get that data via Javascript or with a simple GET request. Only my html page is allowed to do so.
I'm looking for something to secure my Webapi to be only consumed by the applications i want. If i look to the OAuth and Azure stuff, people always have to login, but i want this page to be public, but only the webapi needs to be secure.
I can't check on IP, because the call is done at client side in the browser.
It is not possible to authenticate and thus secure the API to be used by a specific client (run entirely in the browser - like SPAs) app. You cannot protect the data the app sends to the API. (see for more details Protecting REST API behind SPA against data thiefs)
You could build some modules server side and then use some token based server to server communication if you do not want to introduce users and end user authentication.
Of course it is also a question of how you interpret security.
If it is just that you do not want other web apps to use the data -
CORS policies will do the job. It is unlikely that there will be more
than some isolated cases of users using a browser other than the
popular once which respect CORS.
If it is you do not want data to be mass downloaded you could
implement some client filtering based on IP. This could even be done
on the networking layer so the API do not need to be modified in any
way.
As a suggestion, you can have it secured making sure the request has some headers defined by you. For example, you can set an Authorization header with a token that only you know. You can for example, create a token based on a key that you and the webapi share, encrypt it with the time you are calling the api. The web api receives the request and:
1 - Check if the request has the token it requires;
2 - if it does, it creates a token the same way your page did;
3 - matches its token with the requests token;
If you are calling the webapi via javascript, the method may be exposed. However, it's one idea
Take a look to CORS (Cross Origin Resource Sharing), it may be your solution.
In synthesis you can allow requests to the Api only from some specific websites. Most, nearly all browsers, support it.
This is how you enable and configure it in Web Api 2.

Best way to get Google access token in ASP.NET MVC5 OWIN

I'm writing a tutorial of using IMAP XOAUTH2 authentication in .NET (the standard MVC5 web app which is created by the MVC5 wizard).
I now have all parts except access_token from which I'll create XOAUTH2 IMAP key (the app authenticates, token seems to get refreshed if required, and I know how to build XOAUTH2 IMAP key and do IMAP login when access_token is available). I just need that token.
Although I have some ideas how this can be done I need to make sure I'm not doing anything stupid. For instance, I think I can use something like context.Identity.AddClaim in ConfigureAuth to put the access_token to our identity and then get it from there when doing IMAP login (on another page) but not sure if this info isn't already available.
Maybe, I can have access to that access_token in any place in the code without the need to manually put it in some object (which would be redundant and look silly for a reader experienced in OWIN and MVC5)? I develop .net components for SMTP/IMAP, I'm not a MVC5 expert, just need to write a simple example for using my IMAP lib with it.
Well, looks like saving access/refresh token details in ASP.NET Identity database makes sense anyway (despite the fact is's stored in encrypted cookies). This lets the access token data be accessible even when the browser is not available. For instance, if someone registers in a web app with their Google and Microsoft account and then another app (e.g. Windows service) consumes the access token initially retrieved by the web app to access the user's account (to check for new e-mails or whatever).
Also, it's possible to make sure both versions of access token details (in ASP.NET Identity database and cookies) stay in sync. This is useful if the access token gets updated with a refresh token (as access tokens need to be updated every hour). The standard ASP.NET MVC5 app cannot refresh access access tokens so you need to refresh them by your own code. I extended ASP.NET MVC5 template with refresh tokens, saving access/refresh tokens in ASP.NET Identity database and updating access tokens in cookies to make sure that access tokens in both locations match.
If anyone interested, you can grab some code and explanations at:
http://www.afterlogic.com/mailbee-net/docs/OAuth2RegularAccountsWebApps.html#SyncingTokens

Categories

Resources