{"id":7149,"date":"2016-06-21T18:30:02","date_gmt":"2016-06-21T16:30:02","guid":{"rendered":"https:\/\/blog.redbaronofazure.com\/?p=7149"},"modified":"2016-08-18T09:20:31","modified_gmt":"2016-08-18T07:20:31","slug":"azure-ad-for-an-open-source-based-website-part-2","status":"publish","type":"post","link":"https:\/\/blog.redbaronofazure.com\/?p=7149","title":{"rendered":"Azure AD for an Open Source based website &#8211; part 2 &#8211; node.js"},"content":{"rendered":"<p>Yesterday&#8217;s post showed you how you could take the &#8220;Writing your first Django app, part 1&#8221; tutorial and make it authenticate with Azure AD. This was deliberatly chosen since there is yet no Azure documentation for Python. However, there exists good examples for Java and Node.js on how to make a website use Azure AD as its authentication source. Just as an exercise, I ran through the steps just to show you the result so that you can see that there is not much difference between the Python-based and the Node.js-based solutions.<\/p>\n<p><strong>Building the sample<\/strong><\/p>\n<p>If you follow the sample &#8220;Web Sign-in and Sign-out with Azure AD&#8221; (see refs) you will get a working sample. There are a few npm install commands missing in the documentation so before you run it the first time you should issue the following commands<\/p>\n<pre class=\"lang:python decode:true\">npm install cookie-parser\r\nnpm install express-session\r\nnpm install body-parser\r\nnpm install passport\r\n<\/pre>\n<p>I also added the support for EJS layout for which I had to\u00a0install another package and add a few lines to the app.js file<\/p>\n<pre class=\"lang:python decode:true\">npm install ejs-locals\r\n<\/pre>\n<pre class=\"lang:python decode:true\">var app = express()\r\nvar engine = require('ejs-locals');    &lt;-- added\r\n\r\napp.configure(function() {\r\n  app.engine('ejs', engine);           &lt;-- added\r\n  app.set('views', __dirname + '\/views');\r\n  app.set('view engine', 'ejs');\r\n  app.set('layout', 'myLayout');       &lt;-- added\r\n  app.use(express.logger());\r\n  app.use(express.methodOverride());\r\n  app.use(cookieParser());\r\n  app.use(expressSession({ secret: 'keyboard cat', resave: true, saveUninitialized: false }));\r\n  app.use(bodyParser.urlencoded({ extended : true }));\r\n  app.use(passport.initialize());\r\n  app.use(passport.session());\r\n  app.use(app.router);\r\n  app.use(express.static(__dirname + '\/public'));  &lt;-- changed\r\n});\r\n<\/pre>\n<p>For some reason, the static path in the github sources points way off, so I had to change that line too.<\/p>\n<p>In the comments of the article it is pointed out that the identityMetadata is wrong in the config.js. If you don&#8217;t fix that, the app will start but authentication will not be successful.<\/p>\n<pre class=\"lang:python decode:true\">identityMetadata: 'https:\/\/login.microsoftonline.com\/common\/.well-known\/openid-configuration',\r\n<\/pre>\n<p><strong>The Result<\/strong><\/p>\n<p>The example will look less colorful if you run it straight of but the functionality will be the same. I added EJS layout support for my sample and used bootstrap CSS\/javascript to pimp it up and make it look like my Django-based Python sample<\/p>\n<p><a href=\"https:\/\/blog.redbaronofazure.com\/wp-content\/uploads\/2016\/06\/aadnode-website-1.png\"><img loading=\"lazy\" class=\"alignnone size-large wp-image-7152\" src=\"https:\/\/blog.redbaronofazure.com\/wp-content\/uploads\/2016\/06\/aadnode-website-1-1024x705.png\" alt=\"aadnode-website-1\" width=\"736\" height=\"507\" srcset=\"https:\/\/blog.redbaronofazure.com\/wp-content\/uploads\/2016\/06\/aadnode-website-1-1024x705.png 1024w, https:\/\/blog.redbaronofazure.com\/wp-content\/uploads\/2016\/06\/aadnode-website-1-300x207.png 300w, https:\/\/blog.redbaronofazure.com\/wp-content\/uploads\/2016\/06\/aadnode-website-1-768x529.png 768w, https:\/\/blog.redbaronofazure.com\/wp-content\/uploads\/2016\/06\/aadnode-website-1.png 1027w\" sizes=\"(max-width: 736px) 100vw, 736px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/blog.redbaronofazure.com\/wp-content\/uploads\/2016\/06\/aadnode-website-2.png\"><img loading=\"lazy\" class=\"alignnone size-large wp-image-7153\" src=\"https:\/\/blog.redbaronofazure.com\/wp-content\/uploads\/2016\/06\/aadnode-website-2-1024x688.png\" alt=\"aadnode-website-2\" width=\"736\" height=\"495\" srcset=\"https:\/\/blog.redbaronofazure.com\/wp-content\/uploads\/2016\/06\/aadnode-website-2-1024x688.png 1024w, https:\/\/blog.redbaronofazure.com\/wp-content\/uploads\/2016\/06\/aadnode-website-2-300x202.png 300w, https:\/\/blog.redbaronofazure.com\/wp-content\/uploads\/2016\/06\/aadnode-website-2-768x516.png 768w, https:\/\/blog.redbaronofazure.com\/wp-content\/uploads\/2016\/06\/aadnode-website-2.png 1082w\" sizes=\"(max-width: 736px) 100vw, 736px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/blog.redbaronofazure.com\/wp-content\/uploads\/2016\/06\/aadnode-website-3.png\"><img loading=\"lazy\" class=\"alignnone size-large wp-image-7154\" src=\"https:\/\/blog.redbaronofazure.com\/wp-content\/uploads\/2016\/06\/aadnode-website-3-1024x728.png\" alt=\"aadnode-website-3\" width=\"736\" height=\"523\" srcset=\"https:\/\/blog.redbaronofazure.com\/wp-content\/uploads\/2016\/06\/aadnode-website-3-1024x728.png 1024w, https:\/\/blog.redbaronofazure.com\/wp-content\/uploads\/2016\/06\/aadnode-website-3-300x213.png 300w, https:\/\/blog.redbaronofazure.com\/wp-content\/uploads\/2016\/06\/aadnode-website-3-768x546.png 768w, https:\/\/blog.redbaronofazure.com\/wp-content\/uploads\/2016\/06\/aadnode-website-3.png 1202w\" sizes=\"(max-width: 736px) 100vw, 736px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><strong>References<\/strong><\/p>\n<p>Azure AD documentation &#8211; Web Sign-in and Sign-out with Azure AD (Node.js)<br \/>\n<a href=\"https:\/\/azure.microsoft.com\/en-us\/documentation\/articles\/active-directory-devquickstarts-openidconnect-nodejs\/\">https:\/\/azure.microsoft.com\/en-us\/documentation\/articles\/active-directory-devquickstarts-openidconnect-nodejs\/<\/a><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s post showed you how you could take the &#8220;Writing your first Django app, part 1&#8221; tutorial and make it authenticate with Azure AD. This was deliberatly chosen since there is yet no Azure documentation for Python. However, there exists good examples for Java and Node.js on how to make a website use Azure AD [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[392,131,121],"tags":[401],"_links":{"self":[{"href":"https:\/\/blog.redbaronofazure.com\/index.php?rest_route=\/wp\/v2\/posts\/7149"}],"collection":[{"href":"https:\/\/blog.redbaronofazure.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.redbaronofazure.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.redbaronofazure.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.redbaronofazure.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7149"}],"version-history":[{"count":5,"href":"https:\/\/blog.redbaronofazure.com\/index.php?rest_route=\/wp\/v2\/posts\/7149\/revisions"}],"predecessor-version":[{"id":7195,"href":"https:\/\/blog.redbaronofazure.com\/index.php?rest_route=\/wp\/v2\/posts\/7149\/revisions\/7195"}],"wp:attachment":[{"href":"https:\/\/blog.redbaronofazure.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7149"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.redbaronofazure.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=7149"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.redbaronofazure.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=7149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}