Adding OAuth Login to Mean.js

NOTE: This post requires that you have a web app set up through Facebook, Google, Twitter and/or Linkedin before continuing. To learn what OAuth is and/or how to set it up, check out my post entitled, “What is OAuth and How Does it Work?

Mean.js supports OAuth right out of the box, but it takes a bit of setting up.

The configuration files are found in /config/env/. The default file is ‘development.js’.  All that’s necessary to install basic OAuth for user authentication is to fill in the ‘ClientId’, ‘ClientSecret’ and ‘callbackUrl’ elements with their respective values.  Make sure your callback URL has been registered as allowed with your app!

Because all OAuth user data can be loaded using AngularJS directly into the user’s browser, if you don’t need to record data about your user you can just grab anything you want directly with Angular. Server-side OAuth should really be reserved for logging in and out.

If I’m wrong or missing something, comment and let me know!

What is OAuth and How Does it Work?

OAuth is an open-source, universal security method web apps use to connect to services like Google, Facebook, Linkedin and Twitter in order to access login and user information.

Let’s check out how OAuth works, using Google as an example:

Get an OAuth web app from Google

This app is obtained by the application developer (you) and contains several elements:

  • The app ID, which uniquely identifies your app.
  • The app secret, which only you and Google should ever see.
  • Various access rules that helps secure where Google will send your user’s data.

Here are links for web app registration for
Google, Facebook, Linkedin and Twitter

Install the app ID and app secret on your server

This varies based on your solution (here’s how you set it up in mean.js) , but the app secret should never be accessible to the public.

Authenticate the User

When a user requests to log into your site, you send them a url they will visit in order to request permissions from Google. This url includes three things:

  • The app ID.
  • Short codes for the permissions you’re asking for. These permissions can range from viewing the user’s Google email address to posting for them on Google Plus.
  • callback url to which  the user will be redirected after logging in. This url is usually located on your website.

The user visits the secure url, and Google registers their request as having come from your app. The user can now see the permissions you requested and is prompted to enter their credentials.

Google then creates a unique access token that has been encrypted with the app secret and which only your server can read. This token has an expiration time and will temporarily provide the owner of the token access to the permissions granted.

Next, Google sends the user to your callback url with the encrypted access token in a GET parameter. Your server receives the access token and decodes it using the app secret, verifying it was made for your app.

Use OAuth!

At this point, you have an access token you can use to request any data the user has given your app permissions for. All data is encrypted via your app secret, so only your app and Google can decode it.

I hope this has proven to be minorly informative! Please feel free to comment with anything I got wrong or need to add.

How to install mean.js from scratch on Ubuntu 12.04

This article details how to install mean.io from scratch on Ubuntu 12.04, complete with bash script you can just download and run on your machine.

I’ll update this periodically as this process changes. This article was last updated April 11, 2014.

First we need to install node.js, npm and bower.

# Update repositories
sudo apt-get update
# Install git
sudo apt-get -y install git
# Install build tools
sudo apt-get -y install build-essential
# Clone node.js source code
git clone https://github.com/joyent/node.git
# Configure, make and install from source
cd node && git checkout v0.10.26-release
./configure
make && sudo make install

sudo npm install -g bower
sudo npm install -g grunt-cli
sudo npm install -g yo

Before we can install mean.js, we need to install and start MongoDb.

# Add the mongo repository information and update
sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 7F0CEB10
echo 'deb http://downloads-distro.mongodb.org/repo/ubuntu-upstart dist 10gen' | sudo tee /etc/apt/sources.list.d/mongodb.list
sudo apt-get update
# Install Mongo
sudo apt-get -y install mongodb-org

Next, let’s scaffold our mean.js application with Yeoman

sudo npm install -g generator-meanjs
cd .. && mkdir myNewMeanProject
cd myNewMeanProject
yo meanjs
# Start your MEAN server on port 3000
grunt

Now, your server should be up and running with a mean.js default project! You can view your website by visiting http://mywebsite.com:3000

If you just want your website to run on port 80, the default http port, edit the ‘/server/config/env/all.js’ file and change this line

	port: process.env.PORT || 3000,

to this

	port: process.env.PORT || 80,

How to install mean.io from scratch on Ubuntu 12.04

A quick note: Before choosing mean.io for your next project, you should be aware of this article by Amos Haviv, the former lead devloper at mean.io. The article explains that mean.io was being forced into a commercial product, which prompted the creation of mean.js, an open-source fork by two founding developers that to date has much better community support and documentaion. I wrote a guide to installing mean.js from scratch on Ubuntu here, if you’d rather do that.

All that aside, here’s how to install mean.io from scratch on Ubuntu 12.04, complete with bash script you can just download and run on your machine.

I’ll update this periodically as this process changes. This article was last updated April 11, 2014.

First we need to install node.js, npm and bower.

# Update repositories
sudo apt-get update
# Install git
sudo apt-get -y install git
# Install build tools
sudo apt-get -y install build-essential
# Clone node.js source code
git clone https://github.com/joyent/node.git
# Configure, make and install from source
cd node && git checkout v0.10.26-release
./configure
make && sudo make install

sudo npm install -g bower
sudo npm install -g grunt-cli

Before we can install mean.io, we need to install and start MongoDb.

# Add the mongo repository information and update
sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 7F0CEB10
echo 'deb http://downloads-distro.mongodb.org/repo/ubuntu-upstart dist 10gen' | sudo tee /etc/apt/sources.list.d/mongodb.list
sudo apt-get update
# Install Mongo
sudo apt-get -y install mongodb-org

Next, let’s set up our mean.io tool and first project.

# Install the mean.io tool
sudo npm install -g meanio
# Create your new project
mean init myNewMeanProject
# Install dependencies with npm and bower
cd myNewMeanProject
sudo npm install
bower update
# Start your MEAN server on port 3000
grunt

Now, your server should be up and running with a mean.io default project! You can view your website by visiting http://mywebsite.com:3000

If you just want your website to run on port 80, the default http port, edit the ‘/server/config/env/all.js’ file and change this line

	port: process.env.PORT || 3000,

to this

	port: process.env.PORT || 80,