Amazon Cognito/IAM and Facebook login, part one

This guide will show you how to create services at Amazon and pair them with a Facebook login in order to access resources within the rich Amazon ecosystem.

A later post will show basic javascript code so you can login and retrieve information from a DynamoDB table.

I recommend reading ‘Serverless Single Page Apps’ by Ben Rady. You can buy the book in print and/or pdf from https://pragprog.com/book/brapps/serverless-single-page-apps. This gives a nice introduction to Amazon’s web-services.

Perform the following steps to create the required amazon services in order to authenticate using Facebook credentials.

Open a browser at https://developers.facebook.com and login/register and add a new app. In the dashboard the App Id will be used when creating a pool at Amazon.

Open a browser at https://aws.amazon.com/ and login/register.

Click on ‘Cognito, User Identity and App Data Synchronization’ in the third column in the section Mobile Services.

AmazonFBauthentication01

Click on ‘Managed Federated Identities’ in the next step.

AmazonFBauthentication02

Click on ‘Create new identity pool’.

AmazonFBauthentication03

Enter the name of the new pool in ‘Identity pool name’. Here I name it Generic Pool. Do not enable ‘Unauthenticated identities’ unless you provide anonymous access. Select the Facebook tab in ‘Authenticated providers’ and enter your App Id provided by Facebook and click ‘Create Pool’.

AmazonFBauthentication04

Click Allow to grant access to your ressource.

AmazonFBauthentication05

When access have been granted some example code shows how to access the ressource, in this case javascript.

AmazonFBauthentication06

Use the Dashboard to see information about the pool.

AmazonFBauthentication07

Open ‘Identity & Access Management’ in ‘Security & Identity’ in the second column.

AmazonFBauthentication01

Click on Roles in the left column and your newly created roles appear.

AmazonFBauthentication08

Clicking on Cognito_GenericPoolUnauth_Role shows that no policies are attached to this role. Since we don’t want to open up for anonymous access we just leave it as it is.

AmazonFBauthentication10

We want to allow Cognito_GenericPoolAuth_Role access to DynamoDB so click on ‘Attach Policy’ in ‘Managed Policies’ in the Permissions tab.

AmazonFBauthentication11

Select AmazonDynamoDBFullAccess and click ‘Attach Policy’ to allow this role to use DynamoDB.

AmazonFBauthentication12

The policy is then shown in ‘Managed Policies’.

AmazonFBauthentication13

Time to create tables in DynamoDB. Open https://eu-west-1.console.aws.amazon.com/dynamodb/home?region=eu-west-1 and click on ‘Create table’.

AmazonFBauthentication14

In this example I create a table with a partition- and sort-key.

AmazonFBauthentication15

When the table is created you can click on the Items tab on the right side and create an item.

AmazonFBauthentication17

Clicking on the ‘Create item’ button brings up a modal window. Enter the partition key and sort key and then append any desired fields.

AmazonFBauthentication16

I’ve inserted one record which we will retrieve later.

Click on the ‘Access control’ tab on the right hand side and select Facebook as the ‘Identity provider’. Select all Actions just beneath and ‘All attributes’ in ‘Allowed attributes’ and click ‘Create policy’. This will bring up the policy on the right which you can copy and paste into an editor and we’ll use it later when create a custom policy.

AmazonFBauthentication18

Lets create a custom policy that allow access our newly created table. Click on ‘Create policy’.

AmazonFBauthentication19

Select ‘Create Your Own Policy’.

AmazonFBauthentication20

Give it a descriptive name and description and paste the policy copied from above and click ‘Validate Policy’.

AmazonFBauthentication21

Click ‘Create Policy’ to save the policy.

AmazonFBauthentication22

Add the newly created policy to a role. Select Role from the left side and ‘Create New Role’.

AmazonFBauthentication23

Enter a name for the role and ‘Next Step’.

AmazonFBauthentication24

Select ‘Role for Identity Provider Access’ and then ‘Grant access to web identity providers’.

AmazonFBauthentication25

Select Facebook from ‘Identity Provider’ and enter the Application ID that is assigned by Facebook when the application was created and click on ‘Next Step’.

AmazonFBauthentication26

Click on ‘Next Step’.

AmazonFBauthentication27

Then you are asked to attach a policy. Select the one you just created and click ‘Next Step’. You may have to search for the policy in the filter input field.

AmazonFBauthentication28

Review and click ‘Create Role’.

AmazonFBauthentication29

Click on Groups in the left pane and ‘Create New Group’.

AmazonFBauthentication30

Enter the name of the group in ‘Group Name’ and click ‘Next Step’.

AmazonFBauthentication31

Enter the name of the policy you just created in the search field and select the policy and click ‘Next Step’.

AmazonFBauthentication32

Review and click ‘Create Group’.

AmazonFBauthentication33

Click on the group you just created.

AmazonFBauthentication34

A message notifies that this group has no users. Click on ‘Add Users to Group’.

AmazonFBauthentication35

Select the user and click ‘Add Users’.

AmazonFBauthentication36

The group is created, the policy is attached, the user is added to the group.

AmazonFBauthentication37

Now is the time to put the App ID assigned by Facebook and the pool ID by Amazon to some use. We will build a simple page in html and javascript to connect to the Amazon Cognito service using the javascript SDK from Facebook and Amazon. Don’t forget to change the invalid Facebook App ID in this example from 9012345678 to the real one given by Facebook.

AmazonFBauthentication38

When clicking on the Facebook button a new window will appear with a username and password dialog. Enter your credentials. The first time you open a new app from Facebook it asks for permission to access your public profile, which is basically your name, email-address if any and user-id. Click Okay to continue.

AmazonFBauthentication39

If permission is granted a new window will show what the app then can do. This can post on Facebook on your behalf and you can limit who will receive these messages. This app won’t post any messages. Click Okay.

AmazonFBauthentication40

When you are all set this is what the page looks like.

AmazonFBauthentication41

 

In a upcoming post I will link to the code I have and how you move it to Amazon’s S3 storage and serve it from there. As you can see the app is run from localhost. This will change when the code is copied to S3.

I hope you have enjoyed this post. It was originally intended as an reminder to myself but I figured others might find it useful as well.

Take care.