Share login between .NET Core 2 web app and VueJS spa - api

Perhaps this is a stupid question, but I honestly don't know where to start.
I currently have a .NET Core 2 MVC project using Entity Framework. In this MVC app a user can:
sign up
confirm his email
login
change password and add basic profile information
reset his password using "forgot password"
Now I want to build a VueJS SPA in which the user can log in as well using .net core 2 webapi. All the hooks for this api are already build and are working as expected.
The MVC, API and SPA parts would all live on a separate subdomains:
www.site.com for MVC
app.site.com for SPA
api.site.com for API
My question: Is there a way to let the user:
Login using the MVC website or spa/webapi
Share the login on both systems (when going back to the marketing website, a "Go to app" button appears and the SPA recognizes the authenticated user
The same behavior can be found on the website www.clubhouse.io. This seems to be exactly how I'd like my website to work :)

The de-facto technology for what you're after is OAuth 2.0.
You'll need a component to act as an identity provider, which (depending on your requirements) may federate with social identity providers too.
As with most things security, rolling your own authorisation server is a really, really bad idea. Plus, it's already a (mostly) solved problem.
Realistically you've got a few choices:
Use a third party identity service (Okta, auth0, etc)
Use a standalone, off-the-shelf authorisation server product
Integrate an off-the-shelf authorisation server library
Given you already have a server-side rendered MVC application, #3 is probably the best approach.
Right now it looks like the best tool out there for .NET is IdentityServer.io. I'd head over that way and get cracking for implementation.
A helpful hint along the way: given your SPA application can't keep a secret (its source code is fully available to clients), the only appropriate authorization grant type is "Implicit".

Related

ASP.NET Core / Blazor / Web API : how to securely store user data?

I hope its possible someone can point me in the right direction. This is 100% a education issue.
Problem
I need to create a web application at the moment I would like to use with ASP.NET Core MVC or Blazor Server. But I would like to move this to either a Blazor Web Assembly or Angular application in the future.
I am creating what seems to be a very simple web application. Users can sign up and request a licence key. Users can have multiples of these keys. Once a form is filled in this is then awaiting authorization. This part isn't the problem.
I am finding it hard to work out how to and the best way to get this data stored in a database. The licences will be linked to the user stored in the Identity database. I have followed multiple tutorials and tech papers online on how to use authorisation and authentication but none seem to go into details about storing user data. Obviously only the logged in user can view/create their licences and will have no access to anyone else's.
I understand the process will be different for ASP.NET Core MVC/Blazor server and Angular/Blazor WA as these will require an API.
I hope that someone can point me in the right direction as I have been scanning online for 3 days now and kind of need to be put out of my misery.
Thanks in advance.
Below is one of the way to handle.
Create a table with UserId, license, Active, and any other required fields.
Expose a Web API Controller with the Authorize attribute. Only the users with valid JWT tokens will be able to access this Controller.
UserLicensesController will be talking to the table which stores the Licenses.
Use Blazor Web Assembly, OR Angular, OR React JS. Login with valid credentials.
Invoke the Get/Post/Put methods from UI to UserLicensesController Web API, and pass the JWT token.
Please let me know if you need any further assistance.
[19-May-2021] Here is a basic solution.
I have created a basic solution.
UserMgmtStore.sqlproj contains the Database Project.
UserMgmt.API.csproj contains the Web API with JWT authentication.
I am using Auth0 for the authentication and authorization platform.
UserMgmt.Web.csproj contains the Blazor Web Assembly Project.
I have used the Username and Password to retrieve the JWT token from Auth0.
As each individual project with have their own Identity/STS system. I have hard-coded the token just to complete the Proof Of Concept.
I have checked in the POC into my GitHub Repository.
URL: https://github.com/vishipayyallore/mini-projects-2021/tree/master/Projects/UserLicenses

Configure asp.net core 2 web application to use authentication from a separate IdentityServer4 server

I have a working implementation of IdentityServer4 with custom user stores, etc.
I have an asp.net core web app that I want to require user login for certain pages through the IdentityServer4 instance with my site having full ASP.Net Core Identity functionality e.g. my razor pages accessing User etc.
I have been searching for 3 days and while the internet seems to have lots of resources available on very similar topics, they all do things a little differently. I feel like I just don't know the right keywords to search for.
I have been following many online tutorials such as JWT Authentication on .Net Core and all of the quickstarts on identityserver4.io but they all leave out crucial steps.
IdentityServer is an implementation of oidc, which means that it serves as an independent, central authentication point. Client apps should be unaware of users credentials. That's part of the responsibility of IdentityServer.
So the reason you won't find answers and you think steps are missing, is because you are not implementing oidc.
It is not possible to 'hide' IdentityServer when a user has to login there.
That leaves you with three options:
implement Resource owner password flow. In that case you can collect the credentials and send it to IdentityServer. Please note that there may be security issues when you use this.
Do not use IdentityServer but instead implement Asp.Net Core Identity.
Send information to IdentityServer to identify the client and use custom presentation for that client. In that case the url may be different but the look and feel remains the same.

ASP.NET Core Web API + Angular 2 Authorization and Authentication

I have Angular 2 application which talks to the Web API and does some basic CRUD operations. I have few questions:
Is any way I can create a Login/Register page on Angular 2 using ASP.NET Identity?
How do I manipulate with a data only relates to the logged in user? (Token Based Authentication? How it works? Where to read about it?)
How can I implement login/register process on actual Angular 2 application without redirecting me to Identity Server?
I looked at IdentityServer4, OAuth2 and OpenID examples, it is a bit too complex to understand. I went thru every single step in quick start, it works but I don't understand how and what it does.
Can someone give me any resources where I can start from? Blogs, websites, books, step-by-step guides.
You're correct that at this point the most comprehensive solutions for authentication and authorization in systems that rely heavily on HTTP are based on OAuth 2.0 and OpenID Connect. This of course includes your specific scenario of a SPA calling a Web API back-end. For further read on this generic case you can check the Auth0 SPA + API Architecture Scenario or give a look at the quickstarts focused on your selected technologies:
Angular2 Quickstart
ASP.NET Core Web API Quickstart
Note: Auth0 supports OAuth 2.0/OpenID Connect so even though the docs may have additional features that are provider-specific, you may find them useful if you do indeed decide to go the OAuth 2.0/OpenID Connect route. It's one of the advantage points of relying on standards, it's easier to switch between implementation/providers.
However, you should also consider if you really need to go full OAuth 2.0/OpenID Connect as they aim to solve a lot of different use cases and as such also bring significant complexity with them. If you go that route, it's recommended that you leverage existing libraries like IdentityServer or cloud providers like Auth0, because doing your own implementation carries a lot of risk and requires significant effort.
In order to meet your requirement of providing an integrated login from within your own Angular2 front-end you could probably look into the resource owner password credentials grant specified by OAuth2.
Another alternative is doing your own custom solution, this is generally frowned upon, because it's easy to get wrong, but the theory would be:
Handle user authentication and registration (possibly using ASP .NET Identity)
Upon login exchange user credentials with some a token that you can later use to call into the API
The token could just be a random (not guessable) value used as a reference to some server-side storage that would contain information about the associated user.

Rest API authentication mechanism, what to do

I've been reading a lot lately about WEB API authentication mechanisms and I'm a little bit confused regarding how to implement my Web API authentication mechanism, I'm thinking on using Token based authentication but I'm not sure if it is the right choice.
Basically my Web API will manage all the operations needed and it will store the users of my website as well the API users(in case they have to be separated).
I want to support the following
User can register on my website and apps using their G+ or Facebook account or an already created username from my service, as well they will be to login using their social account.
If the user is not logged in they won't be able to post Items but they will be able to see the Items, think something like Craiglist.
Let's say the user is a developer and they want to post the items through some software they created instead of going through the website and posting one item at a time, how do I allow this?
Now, my questions are: 1) When a user registers on my website, do I have to create a (public key/ secret key) for it subsequent access token , so I can use my API from the website as the user checking if they have access to certain endpoints?
2) Do I have to assign a (public key / secret key) for my website so I can consume the API when the user is not logged in?
3) The same as above for mobile apps
4) How do I allow users to (sign up / sign in) using G+ or Facebook?, if they log in using any social network how am I going to secure my api?
Please, any answer will be really appreciated.
Thanks
For ASP.NET Web API 2, I would recommend you to use the default Owin OAuth2 authentication. It's a standard form of authentication well documented enough. If you do not have enough knowledge about OAuth2, read the RFC.
With Web API 2, ASP.NET moved to a new security model, called ASP.NET Identity. There is this really good video that explains the basics. The point is that starts from scratch, ignoring traditional basic, forms, or windows authentication.
A lot of learning material is on the ASP.NET website.
For local, individual accounts (questions #1, #2, and #3), look through this tutorial - here basically your own server will act as an OAuth authorization server, and the Owin OAuth2 implementation will take care of generating access token and authenticating them. Since you'll be using the OAuth 2 standard, it will be basically the same for mobile as well.
For external accounts (question #4), read through this tutorial. There are official libraries for third-party authentication for the major providers:
Microsoft.Owin.Security.Facebook
Microsoft.Owin.Security.Google
Microsoft.Owin.Security.Twitter
Microsoft.Owin.Security.MicrosoftAccount
It would helpful to also learn more and understand the new OWIN specification, that describes how web apps need to created for the .NET framework, and the Katana project (Microsoft's OWIN implementation).
Follow this tutorial for most of your requirements http://bitoftech.net/2015/01/21/asp-net-identity-2-with-asp-net-web-api-2-accounts-management/ Logging in via facebook/G+ MVC already has the helpers commented out. You would get the credentials by setting up key's via the third party apps and then store the identity.

Security in WebAPI App with MVC Client OpenID / OAuth

I know there is a lot of questions out there already and I've been reading blogs and looking at samples for well over a week and I'm still a little hazy on how some of this is going to work in the real world. The samples are very helpful, some are very complex some are simple, none have really clarified some of my questions.
The system comprises:
Web App (own IIS site, with SSL, consumes Public API)
Public API (own IIS site, with SSL)
Desktop Widget
Mobile (iOS, Android)
3rd Party apps
How best to handle user registration and account creation? Whilst offering OpenID there also needs to be a 'local' login to the web application. Having a method on the API that accepts base data types (strings/dates etc...) values and then creates an account is asking for trouble and a red flag to the spammers. Would it be best to handle this exclusively through the web site employing visual CAPTCHA checks? How does the Facebook mobile app handle this registration scenario?
Lots of samples also seem to use small subsets of the default Forms Authentication database for Membership. They then use Entity Framework and the Membership, WebSecurity or FormsAuthentication, Roles Provider classes in various different ways depending on use case. Are there any alternatives to this approach to consider for the security backend? Our DB guy is considering rolling our own but then we also need to build our own user management app :(
Once a user is registered and logged in to the web app I can't see any way around continuing to authenticate and authorize each call on the WebAPI. I'm assuming at the moment that the API should just implement OAuth and treat the web app as another client app like the mobile app and 3rd party apps.
I think I've read too much without playing with code to settle this in my head. There are so many approaches.
TIA,