Authentication setup using HTML and Javascript or Angularjs - javascript

In my project, I implemented CRUD using Asp.net Web API 2 and consumed that using Angularjs. Now I want to build user and admin authentication as two location of the application be authorized to both accordingly. I am already familiar with PHP and ASP.net authentication, but this time I am building my application with HTML and Angularjs only, and I am asked (by a test) to implement user and admin authentication by HTML and Javascript.
1) Please guide me whether to use pure js or angularjs authentication, and what good step by step references.
2) please explain to me how can I secure two locations of the application, first of for registered users and second is for admins only.
I actually did basic search and got confused, I came here for guidance.
Thank you in advance.

Backend: ASP.Net Web API
Frontend: Angular/HTML
You can create a service endpoint for logging - something like this:
public partial class ContainerController
{
[AllowAnonymous]
public ActionResult Login (string success, string error, string returnUrl)
{
//Authenticate User
}
}
Once you've authenticated the user you can redirect the user to a new cshtml page (which is visible only to authenticated users).
Please note that since you're passing your username and id from JavaScript they can be easily detected from a third part intercepting your calls to the server. If you don't want that then you need to run your login page on https. Configuring security certificates and https is a bigger topic and I'll not be able to explain it here.

Related

Using IdentityServer with ASP.NET + embedded SPA JS framework

I'm sorry if the title is not very clear.
What I have: ASP.NET application with "embedded" Vue.js 2 from this repo: https://github.com/MarkPieszak/aspnetcore-Vue-starter
I already studied Identity Server 4 manuals so I tried hybrid flow with pure ASP.NET and implicit flow using oidc-client with pure JS. Both flows work for me.
But what I want is using JS page that hosted in ASP.NET to get access token and refresh token and store them in ASP.NET. ASP.NET in this case acts as a backend (but not the Resource API!).
Maybe (optional) there is a way to create custom login form. User fill this form, JS sends login and password to ASP.NET backend and than in turn transmits them to Identity Server and retrieves tokens.
I wonder if it is possible to use such a scenario at all and whether it is viable and sufficiently safe.
Any assumptions are welcome!
EDIT:
What I really want is to use Vue just for display my data while using ASP.NET as a backend-client which gathers information from resource API.
Regarding the Login page - no, you can't. Reason - when using OIDC authentication, you are delegating the login functionality to the provider (in your case Identity Server), and it takes care for the login page and etc.
Now regarding your Vue app. Vue is a SPA. SPA's can only use Implicit grant type and by this - they are not being issued a refresh token.
Your solution here is to use the oidc-client-js library with your Vue app. We have this scenario implemented (Vue on top of aspnet core) and it works perfectly fine.

laravel: Login form on non Laravel page

I'm building a web application which is accompanied by a small website that uses Jekyll. Reason for this being that the website will almost never change and this way it is able to run fast (pure HTML+CSS and some JavaScript) and semi-independent of the application.
The Jekyll site is placed inside the Laravel public folder and runs fine. As it stands a user that wants to use our application needs to visit the default Laravel auth route to login (/login).
I would like to add a login form on one of my site pages that enables the user to login without visiting the application first.
Of course I tried adding a simple form and posting it to /login (the default Laravel route) but this won't work because Laravel expects a csrf token to be set.
I know Laravel sets a cookie containing the encrypted token but I'm not sure if (and how) I'm able to use this.
Is there any (simple) way of adding a login form to a NON-Laravel page? And is it possible to do so using only HTML & JavaScript (maybe using Ajax)?
You have a couple of options.
1- Cheapest option: disable csrf_token on the login route only. Some will recommend this, others will say you shouldn't. You can research online if you want to go this way or not.
2- Make an ajax GET request to a route that will return you the csrf_token so you can use it in your form. In your Laravel controller you simply return the session token
public function getToken() {
return session()->token();
}
3 - Go the passport road for API requests the same as SPAs. https://laravel.com/docs/5.4/passport

Alfresco Aikau Login with existing ticket

I have a webscript to upload and list files which I authenticate via alf_ticket generated using login api of alfresco. I redirect my existing webscript to another webscript which is created using Aikau framework and is a stanalone Aikau Client app to preview the files. When it redirects to authentication page of Aikau(page/ap/ws/document/workspace/SpacesStore/83d72801-6a75-45ab-be8f-99245f3828a5)
it asks for credentials, I want to use the existing ticket generated in my webscript to authenticate the aikau webscript. By looking into login.get.js file of aikau project I couldn't able to identify where I could append ticket.
It's not clear from your question exactly how you're getting this behaviour. For example, is this all running as customization of Alfresco Share or are you building a standalone Aikau client?
For Share, once you have authenticated by logging in then all WebScript requests should be authorized. Similarly with a standalone Aikau client you should be able to login (using the login page provided by the Maven archetype). In both of these cases authentication and credential persistence is managed by Surf.
Are you trying to render Aikau content as a single WebScript that is invoked via an XHR request? How are you attempting to access your Aikau content?
In general, you shouldn't need to worry about authentication issues as Surf takes care of it all for you, however it sounds like you're trying to do something a little bit unusual. Could you try and provide more context to your question please?

Angular JS +ASP.NET WEB API+SITEMINDER

We are building a web app on angularJS and WEB API 2.2, basic funtctionality of the app is to download documents from certain Fileshare.
Talking in architectural details, these two apps (angular JS and REST API) will be hosted on two different websites(ie clientAPP.com and RESTAPI.com).
We need to protect our ClientAPP with siteminder here but also which can be done easily, complexity here is, for downloading the files instead of using APIController i have used MVCController for its FILECONTENTRESULT behaviour, so basically i redirect my users(when they click on the file links provided on angular UI) to that controller using:
$window.location.href="DOWNLOADCONTROLLER/DownloadFile/IDOfTheDocument"
In turn this url returns the intended file by searching it on the basis of id provided in URL and returns filecontentresult which automatically downloads the file on browser.
We need another functionality where we can share this download file URL with other users, we need to implement security around this URL as well which is part of RESTAPI MVC app, we are marking our options on "how do we protect this URL" since it's an MVC controller we cannot go for token based security like we have done it for API controllers so and also we cannot share tioken with users so, is it possible make this URL siteminder protected so that when user hits this url from browser instead of app it gets the SSO login screen? if yes, how do we ensure that when my user is already logged in to client app,REST API doesn't ask for authentication when he tries to download the file from the client APP,.

Single page application with login and search robots

In my work with a Javascript single page application, i have recently run into a problem.
The whole idea behind this project, is to avoid page reload. When the user comes to my application they won't need to make any reloads. This is done with jQuery and Backbone.js and PHP as service.
I have this static index.html file, where i hide my login container and application container. Then i show the login container, if the user is not recognize by my application, and if they have auth i show the application.
if auth:
application.show()
elif not auth:
login.show() // like Gmail or Facebook etc.: Information + login-form
I wan't to show users who aren't authenticated, both login-form and general info. Very important is also that the site can be found by robots as Google etc.
Can this only be done with 2 different files, giving me reload? A site.com and login.site.com. That solution irritates me, because my login, as it is by now, is quite instant.
Not sure I get the question completely but if you want to check if a user in authenticated, try to do an ajax call. If it fails with "401 unauthorized" the user needs to login...
You can achieve what you want by using ajax calls to authenticate (Although this is not a recommended approach, and people usually prefer the two page solution you have outlined).
What you can do, is have very skinny controllers that just exist to provide data to rich client UI.
Your gateway controller(A separate controller, with no model that acts as an entry point in the application) will just render the basic application structure to the client (without any user specific data, you dont know if the user is logged in, you dont need to know at this point). Then the client will query the UserController for identity of currently logged in user, if user is logged in server returns a json response containing information related to user and if not, server returns a response saying that user is not logged in. Then you can fetch a partial for the login form and then submit it again through ajax. As you see, creating the UI once and communicating with the server with lightweight ajax calls can solve your issue easily.

Categories

Resources