How to Enable OAuth in the Node Starter Template

WebMatrix ships with site templates that make it easy to get started. The Node.js starter template is built on express, a flexible framework for building web applications. The Node.js starter template is the starting point for a full application - it shows examples of routing, middleware, custom errors, and more. For more information on express, see http://expressjs.com.

Note: It is not the goal of this article to teach you how to use Node.js or express. See http://nodejs.org/ and http://expressjs.com for information on Node.js and express.

 

Creating a site using the template

To get started, click the Templates button on the WebMatrix start screen:

OauthStarter-1

 

Click the Node category, and then select Starter Site. Give your site a name, and then click Next.

OauthStarter-2

 

At this point, any of the dependencies you need to run a Node.js application will be installed. The installation will only be required the first time you create an application with Node.js. After the site loads, you will see the dashboard. The dashboard contains helpful links to documentation on how the site was built:

OauthStarter-3

 

To launch the site, click the Run button in the ribbon. The site should launch in your default browser. Take some time to click around the various parts of the site. The site includes several examples including:

  • Using parent / child layouts with jade
  • A chat sample using socket.io
  • Enabling OAuth based logins with Twitter, Facebook, and Windows Live
  • Creating a mobile friendly site with jQuery Mobile
  • Creating custom 404 and 500 pages for your site
  • Using LESS CSS with express

 

OauthStarter-4

 

Enabling logins with Twitter and Facebook

To get started exploring the code, go back to WebMatrix, and click the Files tab to open the Files workspace. The Files workspace contains the files that run the site. Start by opening server.js – this file is the entry point for your application. The Starter Site template uses the node module EveryAuth to provide OAuth capabilities. For more information on EveryAuth, see https://github.com/bnoguchi/everyauth.

By default, the template only supports logins with Twitter and Facebook when they are enabled. The sections for Facebook and Twitter can be enabled individually. To get started, un-comment lines 57-67 to enable Facebook authentication. (To uncomment the code, you can select the commented lines, and then press CTRL+K, CTRL+U):

OauthStarter-5

 

If you want to use Twitter authentication, you can also uncomment lines 78-85:

 

OauthStarter-6

 

You may notice this template is asking for the values ‘facebook:applicationId’ and ‘facebook:applicationSecret’. These properties are obtained via the node npm module nconf. Nconf allows node to retrieve configuration values from a variety of sources based on the runtime environment. For more information on nconf, see https://github.com/flatiron/nconf. The template expects to find a file stored locally called settings.json that contains the configuration values required for Facebook and Twitter authentication. To get started, rename the file settings.example.json to settings.json.

Obtaining application keys from Facebook

To obtain an application ID and secret from Facebook, start by visiting http://developers.facebook.com/. Click the Apps link in the header to get started:

 

OauthStarter-7

 

Click the Create New App button, and give your app a name:

OauthStarter-8

 

When your app is created, copy the application secret and application ID into your settings.json file. Under the Website with Facebook Login section, update the Site URL property to the local address of the web site you’re creating. To get this address, you can go back to WebMatrix, click the Run button in the ribbon, and copy the URL from your web browser. When you’re finished, make sure to save your changes:

 

OauthStarter-9

OauthStarter-10

 

Obtaining application keys from Twitter

To obtain a consumer key and secret from Twitter, first visit https://dev.twitter.com/. Click the Create an app link:

OauthStarter-11

 

Sign in with your Twitter credentials, and fill out the form with the details of your application. For the Callback URL, be sure to enter the local running URL of the site. You can get this URL by clicking the Run button in the ribbon, and copying the URL from the browser:

 

OauthStarter-12

 

After the application is created, copy the Consumer key and Consumer secret from the Details tab into your settings.json file:

OauthStarter-13

OauthStarter-14

Modifying the Login View

The final step is to modify the login view to show your Twitter and Facebook icons. Go to the Files workspace, and open the /views/account/login.jade file. This file contains the markup that renders your login page. Remove the // comments that disable the login buttons, and comment out the div that contains the instructions:

OauthStarter-15

The final step is to visit your site. In the ribbon, click the Run button, and click the Log in button in the header. You should see the Twitter and Facebook icons on the right:

OauthStarter-16

You can discuss this article using the adjacent Facebook talkback.

For technical questions please visit our discussion forums, where we have a vibrant community of developers like you, as well as Microsoft engineers who are ready to answer your questions!