IdentityServer4 QuickStart Register Issue - identityserver4

I have ASP.NET Core application with IdentityServer4 using ASP.NET Core Identity (based on excellent quickstart).
http://docs.identityserver.io/en/release/quickstarts/6_aspnet_identity.html
In the walkthrough blog they talk about navigating to localhost:5000/Account/Register to create a new user in the Identity db.
When i navigate to that url i get a white page. Furthermore I don't have a Register.cshmtl page or a Register route or anything with the term Register in it.
Did i get the wrong branch? because i am on the release and using core 2.0
I'm new at this and apologize if i'm missing something obvious.
I have run the dotnet ef command but can't see a db anywhere I look - like in sql express or LocalDb.
I am running the Identity server project out of vs17 on port 5000
If i run the MvcClient project I see the home page with the Secure link. If i click that i am directed to the IS4 instance but alice nor bob login will work. (invalid us/pw).
And i can see in the logs that alice and bob users are not being created in-memory

You probably got this by now, but it might interest someone else.
The Quickstart UI repository is not a direct implementation of the tutorials in the IdentityServer4 docs. If you follow the docs, you will first create a new ASP.NET Core MVC application with Individual User Accounts authentication, and that template will create the registration page.

I think your problem is about routing. With scaffolding Identity and specifying routing Your problem will be resolved.
To maintain full control of the Identity UI, run the Identity
scaffolder and select Override all files.
replace
services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
with
services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1)
.AddRazorPagesOptions(options =>
{
options.AllowAreas = true;
options.Conventions.AuthorizeAreaFolder("Identity", "/Account/Manage");
options.Conventions.AuthorizeAreaPage("Identity", "/Account/Logout");
});
services.ConfigureApplicationCookie(options =>
{
options.LoginPath = $"/Identity/Account/Login";
options.LogoutPath = $"/Identity/Account/Logout";
options.AccessDeniedPath = $"/Identity/Account/AccessDenied";
});
// using Microsoft.AspNetCore.Identity.UI.Services;
services.AddSingleton<IEmailSender, EmailSender>();
Now you can access to Register account page:
http://localhost:5000/Identity/Account/Register
You also can also change default route like what you want (localhost:5000/Account/Register) for this purpose check this post

Related

Identity Server 4 and BlazorWA X-Frame-Options

I have a Blazor WA Application that is using Identity Server 4 Service for authenticating users. Everything works fine locally. The issue comes when I try and publish to Azure. Since the IDS is published at one address and Blazor at another, i get the X-Frame error when calling from "https://blazor..."
"Refused to display 'https://identity...' in a frame because it set 'X-Frame-Options' to 'sameorigin'."
I've added
builder.Services.AddAntiforgery(options =>
{
options.SuppressXFrameOptionsHeader = true;
});
to the Blazor startup and to the Identity start up (just for giggles) but the error remains.
Any ideas?
TYIA
The short answer is to set the CORS settings in Azure to allow all (*) or the specific URL in question "https://blazor...".
I had done that at one point but for some reason it didn't work. After consulting with an Azure tech we tried it again and it worked.
¯_(ツ)_/¯

Aurelia.js Single Page Application Keycloak Authentication Example

I need an example or pointers for using Keycloak.js authentication in an Aurelia.js-based single page web application. In my use case, a user should be able to access my web SPA before login. However, to gain access to additional resources, user will need to log in. No problem with with the backend apps. 'Just need web-client help.
I have basic HTML5 and Angular.js examples. It seems the example provided by bandrzejczak comes the closest.
'Have already searched throughout the web, read the Keycloak, Aurelia, Aurelia-Auth, Aurelia-Authorization docs. I have spent way too much time on this and am hoping someone has already solved this problem. -- Thanks
See Aurelia-Keycloak.
Aurelia-Keycloak
Alpha version. An authentication plugin based on KeyCloak for Aurelia applications.
Get Started
Install Aurelia-Keycloak:
jspm install aurelia-keycloak
Add keycloak configuration and initialization settings:
Follow Keycloak directions for creating a keycloak.json configuration file. Put this file in the same directory as your application's index.html file. Refer to the keycloak javascript adapter documentation for its initialization options and API.
Add plugin to your app's main.js. This example assumes your keycloak.json is in your root directory. This code will immediately cause the login screen to appear.
.plugin('aurelia-keycloak', {initOptions:{ onLoad: 'login-required' }})
To defer login, use the following:
.plugin('aurelia-keycloak')
Then, construct a login button within your code to call the keycloak login function.
Rather than use a keycloak.json file, you can insert the installation config with the plugin declaration
`.plugin('aurelia-keycloak',{install:{PASTE GENERATED KEYCLOAK.JSON HERE}},initOptions:{ onLoad: 'login-required' }}
See the GITHUB for details.

Authentication with AngularJS - NodeJS

I cant figure out how to do a simple Authentication in my AngularJS app.
What would be the best and easiest way to do a normal server side authentication with my Setup:
Yeoman angular generator, running grunt server on :9000.
Does anyone have a good tutorial? or any tips?
Another question, what is the simplest way to store data with this setup? using MongoDB?
Thank you :)
AngularJS is a front-end JavaScript framework, you can use anything of your choice, loving and knowing at the back-end for your application. This question was something like you are asking "I am using HTML5, what should I use at my back-end?" Angluar can be used with many server-side languages, viz. Ruby, Node, PHP.
There is an awesome tutorial talking about Ruby on Rails + Angular by David Bryant Copeland.
If you want to use PHP, you could use any framework which comforts you, there are many
available. CodeIgniter is one of the popular PHP framework.
If you want to use Node for your application, Passport.js could
be something of interest. MEAN Stack is the new thing which is coming up, MEAN stands for MongoDB + Express.js + Angular.js + Node.js. There is a ready Yoeman generator for MEAN stack available.
Again depending upon the requirement you should choose between SQL or NoSQL database. Also depends upto certain extend on the choice of the server-side language.
If you need a scalable database which stores hierarchical data, NoSQL should be your choice. MongoDB is a popular NoSQL database; CouchDB, RethinkDB are other alternatives.
SQL database are used where application needs high transaction. Though we can use NoSQL database for transaction based application, but it is not stable in comparision to SQL databases. MySQL is the most commonly used SQL database.
Angularjs is really not involved in the authentication process.
The basic flow of authentication is quite simple:
You make a post request from your 'Angularjs app' (your client side application) to your server, passing as parameters a pair of username/password.
Then, on your nodejs application (server side) you query your database looking for the username provided and you try to match the password that was sent within the post request with the password you have stored in your database related to that user. If they matches, you set up a cookie on user's client which is related to a session stored in your database.
To make this simpler there are some libraries that help you.
You could use passport.js (http://passportjs.org/) together with express (http://expressjs.com/). Passport will help you setting up with ease the authentication process in a safe way and express will give you tools like the cookie parser, support for session and other tools you will need to use. Express will help you also setting an endpoint where you will post the request for logging in to.
Last thing, for storing data, you can use any database you want.
Nodejs has a relevant number of third party libraries that help interfacing with databases. If you want to use mongodb, this library (https://github.com/mongodb/node-mongodb-native) will make your life easy.
Your best bet would be to use the angular-fullstack generator as it comes with basic authentication -- both local and oAuth -- built in. From there, you can either just use the authentication that is setup for you or you can use it as a reference to help you figure out how its all working.
The easiest setup I am using is:
NodeJS / Express / Passport / Socket.io / MongoDB (can be anything else actually)
AngularJS
Express is handling all the security with Passport (there's a passport method being added to express req automatically that gives you an ability to check whether user is authenticated or not). It's called isAuthenticated and you can use it like below:
function loggedOnly(req, res, next) {
if (req.isAuthenticated()) {
next();
} else {
res.redirect('/');
}
}
Route / & /login are public, but when user is logged in, they redirect to /app.
Route /app is Angular app which is private and redirects to /login when user is not authenticated.
app.get('/', anonOnly);
Socket.io has passport.socketio middleware for automatically refusing unauthorised connections that may occur.
Then, I access user object by doing the following:
io.on('connection', function(socket) {
var user = socket.conn.request.user;
});
To sum up, login logic is handled by static Express views. Moreover, Express prints few constant's to Angular app containing e.g. userData. Quite useful for displaying e.g. userName at some point.
Although it may take some time to set that up, it's definitely worth doing if you want to understand the whole logic of your app. I've given you the names of open-source packages to use, all the details can be found in their readme & guides (lots of them already exists if you google for a while).

ASP.NET single page application or MVC app and 404.15

I created a ASP.NET single page application. When I run it I get the following 404.15 error. I see the same error with an MVC application without a Web API in it also.
I commented out the ConfigureAuth code as below:
public partial class Startup
{
public void Configuration(IAppBuilder app)
{
//ConfigureAuth(app);
}
}
Now I get another error which is below:
I tried to duplicate this on a different laptop, and I don't see a problem there.
Is this a directory level permission issue on this particular laptop where I created the app? Appreciate anyone can shed some light on this to fix this.
UPDATE 11/9/2014
I did some further debugging and found that the applications works fine with no authentication and Windows Authentication. When the authentication is forms, I see this problem happening. As you see in the IntelliTrace, the GET request is looping back to Account/Login multiple times and finally give with a 404.15 error. I added a authorization section in the web.config to allow all users to access the resources with , I still see the errors.
I see a major difference between how my laptop and the surface pro 2 behaving with the same application. In my surface pro 2, the home page is displayed and the redirect to account/login never happens. But in the laptop the redirection is happening to account/login.
There are tables in the surface pro 2 created by the asp.net identity. But in my laptop there are no tables. I believe when the application starts, there is no requirement for the tables and the control should go to the home page.
I hope anyone can provide an answer with my additional info.
At first sight looking at the requestedUrl it may be the case that you are always redirecting to the same page (the login page) which creates an infinite redirect loop until the request url becomes too long: Since there is no code I can't be sure about it but I would suggest you to check your redirect url. The authentication appears just because you outcommented the ConfigureAuth method but I don't think it will solve the problem.

Recommended authentication UX in AngularJS SPA with own and external (Google, FB...) profiles

I'm developing an Asp.net MVC + Web API + AngularJS SPA. I would like to have several types of registration/authentication:
own profile provider
external providers ie Google, FB etc.
Possible scenarios
As I'm having an SPA it would be best if I could keep my user on my page while external (or internal for that matter) would be taking place. I'd display a modal layer with particular content loaded (maybe even inside an iframe). Can this be done? Online examples?
Have login/registration capability implemented as usual Asp.net MVC full page reload controller/views and then redirect back to my SPA when that is successful. Also redirect to external provider if users wanted to authenticate/register using external provider.
Any other possibility?
Questions
How did you do this similar scenario in your SPA or how would you recommend to do it?
Should I be using particular authentication patterns regarding this - for instance provide my internal authentication/registration similar to external one so SAP would always behave in the same way
I will also have to authenticate my Web API calls subsequently after user athenticated themselves in the SPA. Any guidance on that?
I can only comment on my own experience, maybe it is helpful. We use the same stack as you, Asp.net MVC + Web API + AngularJS. We use server-side MVC for authentication (Microsoft.AspNet.Identity), since we are not exposing a public API at this stage and the only consumer of the API will be our SPA this works perfectly with the least amount of effort.
This also enables us to set a UserContext Angular service on the server once logged in that can be shared through your entire Angular app, the Google Doubleclick Manager guys goes into some of the benefits of this approach during there ng-conf presentation. Since Web Api supports Asp.Net Identity, authentication and authorization works seamlessly between MVC and Web Api.
To sum up the major pros and cons:
Pros:
Very easy and quick to implement.
Works across MVC and Web Api.
Clientside code does not need to be concerned with authentication code.
Set UserContext Angular service on server side once during login, easily shared throughout SPA using Angular DI. See presentation as mentioned above.
Integrates with external providers as easily as you would with any normal MVC app.
Cons:
Since the browser does not send the hash # part of the URL to the server, return URL on login will always be the root of your SPA. E.g. suppose your SPA root is /app, and you try to access /app#/client when you aren't authenticated, you will be redirected to the login page, but the return URL will be /app and not /app#/client as the server has no way to know the hash part of the URL as the browser never sends this.
Not really supported design if you plan to make your your Web Api available outside your SPA. Imagine a console app trying to connect to your API?
So in short, the MVC view that we use to bootstrap our SPA is protected with [Authorize] as well as our Web Api methods. Inside the MVC view we also initialize our UserContext Angular service using Razor to inject whatever user properties we want to expose. Once the SPA is loaded via the single Razor view, everything else is handled via Angular.
We have used what Beyers described before and it works well for most apps, and I use it frequently.
In our current application we are working on the premise that separation of concern should apply to route management.
Normal lifecycle:
User goes to www.server.com
Server sends down index.html
Client makes request for minified assets (.js, .css., etc.)
Angular loads -- a directive removes the loading class from the body (revealing the login section)
The Angular LoginCtrl makes an autologin attempt. (Login and Autologin in an Angular service).
The server returns a HTTP 401
The login screen remains visible.
User successfully logs in ( server gives the browser a authToken cookie; angular does not know or care)
Angular sets some isAuthenticated variables in the BodyCtrl and LoginCtrl
The login section receives a class of .hidden and the content recieves a class of .visible (insert ng-hide/show animations for fun)
User starts filling out a form, but takes an obligitory, 30 minute phone call from relative.
Server has expired his session 10 minutes ago
User finishes and submits form but the server return unauthorized (401)
http-auth-interceptor intercepts the 401 from the server, caches the submit call and publishes a "login-required' event.
The BodyCtrl listens and sets isAuthenticated = false and then the ng-class and ng-show/hide do there work on the login and content sections.
User re-signs in and 'login-confirmed' event is published
http-auth-interceptor posts cached call.
User is happy
(the content section can also display some public views as our rest api has some routes that are made public -- displaying the public views is handled by a simple function similar to isAuthenticated)
Angular Ctrl structure:
index.html
<body>
<!-- I am a fullscreen login element, z-index=2000-->
<div data-ng-controller="LoginCtrl" data-ng-hide="isAuthenticated()"</div>
<div data-ng-controller="ContentCtrl">
<!-- fullscreen class has a z-index=2001 -->
<section data-ng-view data-ng-class="{fullscreen: isViewPublic()}"></section>
<!-- header and nav go here -->
</div>
</body>
We could get a little more creative on how display the public views/routes but you get the idea. We only have a few public routes and they are mainly for registration, password resets, etc.
Disclaimer: I have yet to integrate with and oauth/external authentication services. Hopefully this setup will still hold water.
Any critique of this process is welcome.
By no means am I familiar with Microsoft backends, but still I'll give it a try ;-) :
Good resources on how the authentication/authorisation should be done in Angular-based SPA:
https://github.com/fnakstad/angular-client-side-auth
live demo: http://angular-client-side-auth.herokuapp.com/login
As you requested there are 2 methods of authenticating:
own profile
external providers.
It redirects to the provider website though :-/
NodeJS on the backend
Good ng-conf talk on how authorisation is done in Google Doubleclick Manager application: http://www.youtube.com/watch?v=62RvRQuMVyg&t=2m29s
It's not quite what you want (authentication), but the solution begins to kick in on the authentication phase. Furthermore it may be useful later and the approach Ido is presenting seems really sound.
Slides: https://docs.google.com/file/d/0B4F6Csor-S1cNThqekp4NUZCSmc/edit
Last but not least: Mastering Web Application Development with AngularJS.
A brilliant Angular book by Paweł Kozłowski and Pete Bacon Darwin.
It has a whole chapter or two dedicated to auth- stuff. It shows some complex solutions, such as retrial and session-expired interceptors. But even if you will not use approaches from the book directly, those chapters are still a must-reads since they may give you an inspiration for devising your own auth- solutions.
Remark - http-auth-interceptor: As it is mentioned in the book, the securityInterceptor solution was originally invented by Witold Szczerba. See the blog post.
http-auth-interceptor code, mentioned by #CorySilva, is actually sample code to concepts explained in the post.
btw: Those 2 chapters are great, but I hope that the Community comes up with some easier solutions in the future. Every time I read this interceptor promise api-based code I get a severe headache :)
btw2: If somebody doesn't consider oneself an Angular expert, the entire book is definetly a must-read and great complement after reading the Guide
As for building the login page with ASP - I suggest using ASP only as a backend and middleware and drawing whole the app with Angular.
You can start with your approach and switch to the pure-Angular SPA if it will begin to require more and more crazy hacks to make technologies play together nicely.
But I might be wrong and this particular case won't require applying any hacks.

Resources