Implementation of Spring security in AngularJS - angularjs

I am new to Spring security. I want to implement it in my AngularJS app. After authentication it must redirect to a page based on roles, like if is it admin it must redirect to admin.html and if it is user it must redirect to user.html.

Going through Spring security documentation can be of great help.
If you want to be more familiar with some working project model. This site offers some great working project.
This project will give you an easier understanding of ROLE based authentication.
I have also done a simple project for my office internship. if it is any help to you, heres the link.

Related

IdentityServer4 implementation with React SPA and Asp.net Core backend

We have asp.net core(v3.0) Web API backend(no auth yet). A frontend is going to be a SPA(React).
A frontend basically will be an admin panel, it means the website's home page should be just the login page. We are planning on using IdentityServer4 for auth(separate project). If we create the IdentityServer4 project(MVC) it will have its own login form/page. Since opening our client website(react) login form should be opened, popout and iframe is not the way we are considering to use, what is the best way to accomplish this?
I've done some research and it seems it is possible to make our login form in react client and send the users login and password to IdentityServer4 if the client is set as ResourceOwnerPassword flow. But, it is not a secure and recommended way. I've read a lot of questions in SO and a lot of articles, but that is outdated and most of the samples are in IdentityServer4's repo is deprecated.
Questions:
Another way we are thinking is, on home page load, just redirect to the IdentityServer4 login page(MVC) and after login redirects back to our website. Is this a proper way of doing it? will the user see the redirection or it will not be much difference since the user opens our website and it seems like the home page?
What type of GrantType should I use for this case? Hybrid?
Is it possible to make a custom login page like in React?
What is the best way of implementing it?
Thanks for any advice, and my bad if the question is duplicated since I spend a couple of days to figure this out but couldn't.
Edit:
Now, IdentityServer4 with JavaScript client is available in IdneityServer4 official repositoty:https://github.com/IdentityServer/IdentityServer4/tree/master/samples/Quickstarts/4_JavaScriptClient
Also, I cloned and changed a little bit, so IdentityServer4 and WebApi are in a single project: https://github.com/Jamaxack/IdentityServerSPA
Is this a proper way of doing it? will the user see the redirection or it will not be much difference since the user opens our website and it seems like the home page?
That is recommended by redirecting user to identity provider's login page for sign-in , Resource Onwer Flow is not recommended as you said for security reasons.
What type of GrantType should I use for this case? Hybrid?
You can use Proof Key for Code Exchange (PKCE) which is already the official recommendation for native applications and SPAs . See Grant Types for more details .
Is it possible to make a custom login page like in React?
You can fully custmize the identity server's login user interface and identity management system , custmize the IdentityServer4.Quickstart.UI/ASP.NET Identity/Your own identity provider services .
In addition , ASP.NET Core 3.0 or later offers authentication in Single Page Apps (SPAs) using the support for API authorization. ASP.NET Core Identity for authenticating and storing users is combined with IdentityServer for implementing Open ID Connect :
https://learn.microsoft.com/en-us/aspnet/core/security/authentication/identity-api-authorization?view=aspnetcore-3.1
1) You can use a flow something like below
'First, load the react project. then check for the token/user object. If there is no token/user, then redirect to the MVC project from react project. You can have the login page in MVC'
2) Use Implicit grant type
3) Yes. You can make customization in MVC login page
4) In order to do that, you can use the oidc-client npm package in react project. For the identity, use the Quickstart template from identity server 4 documentation.
Here it is

REST API social Login in cakephp

i am a newbie to Cakephp 3.*, I was playing around with cakephp REST API and angularjs. So far i was able to successfully integrate the registeration and login using the ADmad/JwtAuth (Link). I want to add social login as well (My application is a stateless, as all the back-end related queries are in the REST API)how can i do this?
Please Help.
Thanks

Use API key between angularJS and Laravel

I'm building an API based application, which uses Laravel as the backend and AngularJS for the front-end.
User Authentication between the front-end and the API is relatively straightforward, using JSON web-tokens (JWT). This tutorial was especially helpful
But much of my front end app is not user-authenticated, it simply needs to be protected by an API key.
I would like to continue using the JWT approach if possible, but i can't find a single package or guide for securing a front-end application with a simple API key (with no initial user login). I don't want to re-invent the wheel, there must be existing solutions for this common problem..
Does anyone have any experience securing and API based AngularJS frount end for use with a custom API? Are there any packages which exist to do this?
NOTE: I have investigated Auth0, which is great, but it is has several problems (the cost, no free support for a custom user DB, no built-in support for a simple API-key)
Thanks
The best way I can think of to handle this is to create a new Laravel user for your angular site.
You will also need a proxy script which contains the site's user credentials. It would reach out to Laravel with
those credentials and return the JWT. Then you just call this proxy script from Angular to get your token. The purpose
of the proxy script being a good way to hide those credentials from users.
This way, you don't need to change anything in your API as it's really just a new user accessing the site. If or when
the user needs to elevate his credentials by signing in as himself, you can also continue to use the proxy script and
have it replace those default site credentials with the user credentials before grabbing the JWT from Laravel.

Securing AngularJS SPA with Spring Security 3.2

Any help, advice and experience is welcome.
Im currently having a separate AngularJS SPA on a Apache HTTP Server and a Spring Backend on a Tomcat 7 Servlet. The backend serves as a Rest API for the SPA.
Some rest resources will require a user to have a certain role.
I've been searching the internet for days on what and how to implement the best security strategy:
Basic Auth
Digest
oAuth
Stateless, Cookies? Sessions? Tokens? CSRF?
How would you go about communicating Spring Security in Json or XML to your SPA to show the user an authentication page or an "your successfully authenticated page"?
Any help is appreciated.
I finally figured out how to make the SPA authenticate with my Rest Backend.
In spring security I created a
Custom SimpleUrlAuthenticationFailureHandler which returns a HTTP-Unauthorizated if a login attempt fails.
Custom SavedrequestAwareAuthenticationSuccessHandler which returns Http-Oke if a login attempt is successful.
Custom AuthenticationEntryPoint which returns Http-Unauthorizated instead of a redirect.
Custom LogoutSuccessHandler which returns Http-OK.
I disabled CSRF.
If anyone needs more help feel free to let me know or message me.
I highly recommend watching this Spring's introductory video. It explains usage of Spring Security from ground up using Java configuration. Apart basic configuration, authentication and CLRF token usage also dive into field security. Uses templating on server with Thymeleaf though, but can provide a lot of wisdom for REST based app also.

User authentication and roles in AngularJS

Can anybody suggest me a good tutorial for handling user authentication and roles using AngularJS.
I just want to lock down certain areas of the site to certain users etc just like privileges.
I have googled but didn't find any tutorial speaks about it.
You should look at the angular-app project (more particularly its security module) : https://github.com/angular-app/angular-app/tree/master/client/src/common/security (which internally uses angular-http-auth module)
This module handles the authentication and securing of routes based on a two-level access : loggedin user and administrator. You can easily update code to handle more roles...

Resources