Cloud App–Weekend #1–Azure AD Authentication on NodeJS

Its been Quite some time that I’ve been looking at a good combination on backend and front end Web platform on which to start building apps. After playing around PHP, .Net, Python and Ruby I stumbled upon NodeJS and this IMHO makes sense to begin some new app dev that is specifically “Born in and For the Cloud”. NodeJS however is only part of the stack as I wanted other products to handle the frontend, database and overall hosting, security, load balancing, Scaling and various other services we’ll need for a complete app. I choose NodeJS as my web platform as I found it to be very simple to setup on both windows and Linux. Further having JS as the language across all sides makes life a bit simpler….

Now back to my App, The first bit I want to handle is the User Administration and I found AzureAD to be very simple and straight forward as long as I don’t get into integration with on-premise AD. I would have preferred more ‘Free’ Sign-Up mechanisms like Google, Facebook and OpenID but gave then up for something that has better ‘Enterprise’ capabilities…and hence AzureAD.

Lets Create the User/s

You can open an Azure account on a Pay-As-You-Go basis for Evaluation purpose and though credit card details are taken, they don’t get charged as long as we stay out of the charged services Winking smile. The Instructions on Signup page and FAQ are very self explanatory and I’m not going to go in detail. User creation for up to 5 is free so I’ll keep my user count within limits.

By now I believe you should have created a azure subscription and have logged into the azure portal. To Create users Click on the “Browse All” Buttonimage

A window with All Services and another window with active services will appearimageClick on Active Directory to see the list of directory configured. The First time this would be empty and a default would be needed to be created to access any service image

Click on the Directory/Workspace to configure the AD Services.image

You should see the Configured users which initially would include only the Admin user you would have created by default. To Test Users create new ‘Basic’ users by first clicking on the “Add User”  buttonimage

Keep the default “New User in in your Organization” and provide a name for the userimage

In the next form give the First Name, Last Name and Display Name…

imageAn now you should be presented with the “Get temporary password” screen image…Hit “Create”.imageYou should be presented with a ‘temporary password’ for this new user…I would suggest you copy paste this password in a safe place. Next click on the user in the directory listing and from the user details listed, note down the <username>@*.onmicrosoft.com userid.

Now this user will be available for playing around from NodeJS only if we change the password. Do not try the ‘reset password’ as it will only give you one more ‘temporary password’ Sad smile…So sign out for now….and Login again with this new user’s credentials…and you will be forced to change the password…do it.imageYou should be now be able to login with this password for this user…Ensure this works before going to the next steps.

Client ID and Client Secret Creation for our App

Now for the next stage our NodeJS App will require Client ID and Client Secret…For this you will need to go back to the AD Screen and Click on the Directory/Workspace where you created the user. Now click on the ‘Applications tab’image

You should see a list of default apps listed which could be nothing in your case, so don’t be scared. We’ll create one in a few steps. I’ve already created credentials for my ‘NodeJS’ App …Lets see how you can create one…

Click on the “Add” Button in the bottomimage…Choose “Add an Application my organization is developing”image…Its ok to hide the fact that this is for your personal experimentation Winking smile

Now you will be asked for a name of the web appimage…Feel free to give a friendly name and this need not match with the NodeJS App being developed…but would be easy to use the same name. Do keep the “Web Application and/or Web API” Option selected

Now you will asked for URLs! image

I got stumped at this step as I’m developing and NodeJS within my pc and will not have a public facing URL…Well Initially I gave some thing and debugged to reveal what I should use…For further steps I will be using NodeJS within my laptop and hence these instructions are valid only for this use case. Once the app is ready and we have a public facing URL , these URLs can be updated.

So I used the Sign-on URL as “http://localhost:3000/auth/openid/return” and appID URI as the same “http://localhost:3000”….If this is the first time then I would suggest you try the same as this is the default used by the OpenID Connector we will use in our NodeJS App.

Next you should be welcomed by image

This page also has several useful links to articles related to development of app for utilizing this facility…You should read them…butClock I’m going to go on…

Click on the Users Tab and you will see the list of users enabled to use this App Credential you just createdimage. You will notice that the ‘New User’ you just created has been marked as ‘No’ under Assignment! Lets go ahead and change that to ‘Yes’. Click on the User and you will notice a ‘Assign’ button in the bottom..imageClick it. Confirm that You do want to assign this user to this app. It will take some time to Azure do some magic and then you will see the refreshed list of users with the new user marked as ‘Yes’. Now lets go get our Client ID and Secret. Click on the ‘Configure’ Tabimage

You should now see the ‘Client ID’ …Copy it as store in a safe place, as we’ll need it in our App later. Now where is the Client ‘Secret’!

Scroll down and you will see the ‘Keys’ section..This is where our ‘Secret’ is…but it is empty…

We got to create our new secret so pull down on the Duration boximageand select 1 year or 2 years….your choice…Click on the ‘Save’ Button in the bottom to reveal the ‘Secret’…Copy it and save in a safe place along with the Client ID…Keep the ‘Secret’ safe as if you miss it then the only way to proceed would be to create a new key! Which at this stage is not a big deal but when dealing with production settings…Could be a Big ProblemSmile

The NodeJS App

Now It is safe to close the browser and sign-out…We will continue in out local PC. Install NodeJS…It’s a simple solution and instructions are very simple for both Linux and Windows. I would also recommend installing GIT for the next steps. Again this too is too simple and we can proceed with the default installation without any problem.Just ensure that the following command execute then called

  • node
  • git
  • npm

If they don’t execute probably the installation did not go well…Ensure they work before proceeding. Also do ensure internet connection is working and you are not behind corporate firewalls.

Now create a folder for our app…from inside this folder from command line type

  • $ git clone AzureADSamples/WebApp-OpenIDConnect-NodeJS.git

This will download the OpenID Sample App in the folder. Change Directory into the WebApp-OpenIdConnect-nodejs folder and type

  • $ npm install

NPM will now do its magic and download all the dependencies that this sample app has and download into this folder under node_modules folder

image

Now Open the Config.js file and you will notice two items where there are no details…Yup clientID and ClientSecret….Now is the time to go back to your safe place and copy the Client ID and Client Secret and Paste them hereimage

Now as per the developer of this AzureAD connector it would be recommended to install Bunyan to make sense of the logs being thrown out…But this is optional. I’m keeping it out for now. The below will run the NodeJS app

  • $ node app.js

image

Now Open your Webapp on your local browser on port 3000. This port can be changed inside app.js in line 192image

Click “Log in”…and you will be taken to AzureAD’s login page….Login with your user id and you should return on the user page in this tiny appimage

That’s it …the app works and the first part is over…

Hope it worked for you too SmileHigh fiveComputer

Advertisements

2 Comments

  1. I have been testing this in a local environment, but can’t seem to get it to work on an app that is published on Azure. Did you check this as well? If not, do you perhaps have some advice for this?

    Like

  2. There are several possibilities but IMO the top suspect could be that you have not added the return address in AzureAD to the Azure webApp…in the example in the blog I have used “http://localhost:3000/auth/openid/return” as the return address…When the app is moved to azure the return address changes to something like ‘http…..azurewebsites.net’..This will need to be updated on the azureAD and your nodejs code (config.js) as well…Let me know if this worked

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s