Amazon Cognito/IAM and Facebook login, part two

This is the second part of the post which shows how to integrate Amazon Cognito and IAM (Identity & Access Management) and Facebook login. The first is here and is a series of screenshots.

This post will briefly explain how to set up a local environment and develop and test it before deploying it to Amazon S3. This and the first guide relies in part heavily on Serverless Single Page Apps by Ben Rady which you can buy from pragprog.com.

I use OS X and macports for package management on the command line so the examples provided are on this platform. Seasoned Linux- and BSD-users knows the difference and will apply appropriately.

I have very little experience with cygwin and mingw.

When you start developing the app you can do so on your local machine. It’s faster to test changes on local code instead of having to upload it to S3 first, easier to install extra programs etc.

AmazonFBauthentication42

At the bottom of the page you specify the ‘Site URL’ you are using. When I developed the app on my local machine my URL was ‘https://localhost/’. I had plain http to begin with but got some error messages that said I was mixing http and https so I changed it to encrypted https.

You may want to install a webserver. OS X ships with apache but sometimes Apple is slow updating apache, sometimes you want a custom-build apache server. I use nginx which can be installed issuing the command

$ sudo port install nginx

The default installation path is /opt/local and the configuration file is located at /opt/local/etc/nginx/nginx.conf.

After nginx is installted you will create a local snakeoil certificate. I followed this guide. When you have the certificates copy them to this location or choose your own path and edit nginx.conf and add or change these lines accordingly



# HTTPS server
server {
  listen 443 ssl;
  server_name localhost;

  ssl_certificate /opt/local/etc/openssl/certs/selfserve.crt;
  ssl_certificate_key /opt/local/etc/openssl/private/selfserve.key;

  location /cielo {
    root /Users/claus/devel/;
    index index.html;
  }
}

Don’t forget to reload the nginx configuration, this can be done with

$ sudo nginx -s reload

I have created a github repo with some example code which you are welcome to clone and modify. The poolId in utils.js

var poolId = 'eu-west-1:82de430e-6f53-4d84-90fa-509d6b6775d3';

is from the example code in ‘Federated Identities’ in the Cognito console.

AmazonFBauthentication06

The poolId is paired with the appId that was entered when the pool was created.

AmazonFBauthentication26

The appToken in the javascript code and the ‘Site URL’ shown in the first image is used by Facebook to grant your app access. So I conveniently changed the URL before publishing the code. Otherwise the code can easily be cloned and run from any local machine and possibly be abused.

var appToken = '860675960666169|00_5tkwxjsUj_u6P1-U1IXjj9mE';

The appToken consists of your appId and a token separated with a pipe symbol (|). You can generate the token using curl. Run the following command on the command line.

$ curl 'https://graph.facebook.com/oauth/access_token?client_id=APPID&client_secret=CLIENTSECRET&grant_type=client_credentials'

The output can look like

access_token=860675960666169|00_5tkwxjsUj_u6P1-U1IXjj9mE%

Copy the string between the equal- and percent-sign and paste it into your own code. I think I got the curl-command from a stackoverflow thread. You can read this blog for additional information.

Don’t reveal the app secret to others.

Create a bucket on S3. Bucket names are unique so if you have a domain add this. Descend down to the folder where the code is and issue this command

$ aws s3 sync . s3://your.bucket.name

Before you can use the aws command you have to install and configure it. Ben Rady explains the procedure in great detail in his book.

After the code is synchronized to S3 enable ‘Static Website Hosting’ on the right hand side and specify the ‘Index Document’. In this case it’s index.html.

AmazonFBauthentication43

Grant Everyone access to index.html and click Save. Repeat the process for other files where needed.

AmazonFBauthentication44

There is a publicly available link to index.html. The URL could be used but only the hostname is used by Facebook to restrict where the app can be run from. So anything after the forward slash after the hostname is ignored. Which means that you can’t rely on this to prevent others from impersonating you.

Instead you can use another service provided by Amazon called CloudFront. This also has the advantage they can provide encrypted https to your S3 bucket.

Ivan Kusalic have some advise if you use CloudFront with a third-party certificate. I did not have some of the problems Ivan mentions but maybe the service have matured since he tried it.

Creating a CloudFront service is easy. I feel that Amazon have put great efforts into the creation of services as effortless as they can become. Click on ‘Create Distribution’.

AmazonFBauthentication46

Click ‘Get Started’ in the Web section.

AmazonFBauthentication45

In ‘Origin Domain Name’ a list with your buckets will be available. Select the bucket you created above. If you only want encrypted https select ‘HTTPS Only’ in ‘Viewer Protocol Policy’. The other settings can be left as they are. I have selected ‘Use only US and Europe’ in ‘Price Class’ in the section ‘Distribution Settings’ since performance is not a concern. The section is in the same window but further down and thus not visible. Just scroll down and you’ll see it.

AmazonFBauthentication47

Click ‘Create Distribution’. It will take a while before it is ready. I went to bed when I created the distribution and it was finished when I woke up again but I doubt it takes all night.

Copy the domain name to the site URL in your Facebook app settings and you should be all set.

This app only show the content of a table. In a later update I’ll add the possibility to enter some information and update the table. Till them take care.