Welcome back to BackSpace Academy. In this lab we're going to be developing 2
a serverless JavaScript application and we're going to host that on Amazon s3 3
and in front it with CloudFront. In the application we're going to be using the 4
Login with Amazon software development kit and that will allow our users of our 5
application to use their Amazon login details to assume a role which will give 6
them temporary AWS credentials then we're going to use those temporary 7
credentials to read and write to a dynamo DB table 8
okay starting off in the Amazon s3 console 9
we want to create a bucket to host our website so 10
create bucket we'll give that a name and next 11
and next again so we want to make this public so grant public read access to 12
this bucket and create bucket okay so in the lab notes I've got some links to 13
two files one called index.html being our web page and app.js our application 14
code so what we need to do is to download those and then lo upload these 15
to our bucket so we'll just click on the bucket now and we'll upload those two 16
files and next and we need to grant public permissions for this and upload 17
so once it's finished uploading we need to enable static website hosting so 18
going to properties and static head website hosting will put that in there 19
put our index.html and click Save 20
okay so now that we've done that we should be able to go to this website now 21
and just have a look at it make sure it's all working so that's working fine 22
so what our web page simply is, it's going to have three buttons here one 23
which is a login with Amazon button logout button and then a write to DynamoDB. 24
so once we've finished logging in we can write data to or we're going to 25
get the user profile data from the amazon.com service and then we're going 26
to write that to a DynamoDB database to have this running properly we need to 27
have it served out of HTTP domain so obviously we can't do that using static 28
website hosting but we can t be front that with CloudFront so we're going to 29
do a CloudFront distribution so go into CloudFront and we're just going to use 30
the standard CloudFront certificate as well so we go create distribution and 31
get started the origin will be our bucket that we just created and we want 32
to redirect to everything to http the reason we need to do this is that the 33
login with Amazon service will only work with a domain that is under HTTPS or SSL 34
and we're just going to use a standard SSL certificate and the default root 35
object will be index.html and we'll create that distribution 36
okay so while that CloudFront distribution is happening I'm just going 37
to jump into the Amazon.com Seller Central. Now there are instructions in the 38
lab notes on how to register with amazon.com as a developer so you need to 39
go through that registration process once you've done that and you've logged 40
in as a developer on amazon.com you'll be presented with this screen here so 41
what we need to do is we need to register our application with Amazon and 42
once we've done that and we've given all the details of the domain name and all 43
of that sort of thing what we will get is an application ID and we'll also get 44
a web client ID and we need both of those IDs one of them goes to 45
Amazon Web Services which is the application ID and the other one 46
goes on our web page which will be the client ID so to start with we go to 47
register new application will give our application a name and we'll give it a 48
description and we need to put in a privacy notice URL as well so I've just 49
got one here that I've just copied off the internet it's just a sample one and 50
I'm just going to put that in there which I've uploaded already to an s3 51
bucket and I'm just going to put a logo as well I can put in 52
a logo why not and we'll save that 53
okay so that's done that part of it so what we need to do now is put in the web 54
settings and that's going to give them or give Amazon the settings of our 55
application that we'll be running so it's going to be a web application for 56
starters it's not going to be an Android app or an iOS app so we click on web 57
settings and what we need to do is edit that and we need to put our origin of 58
our domain so that's going to be our CloudFront domain so we go back into 59
the CloudFront manager we'll copy that domain okay so it needs to have the HTTP:// 60
in there as well and the last bit of it 61
will be CloudFront.net so that's what you need to do for that and save ok 62
so you've now got your client ID and you've got your application ID that you 63
need to go further so we'll just jump back now into the CloudFront and see 64
how that's going 65
ok so CloudFront has finished creating that distribution so we'll just jump in 66
here and have a look and see if it's working so that's fine so we've got that 67
up and running on CloudFront not a problem so what we'll do now is move on 68
to the next step which is creating our dynamodb tables so go to services and 69
DynamoDB and we want to create a table and we'll call it login with Amazon test 70
now use the same table name as I've got here because the code is actually around 71
this table name otherwise you'll have to go into the code and change it so our 72
primary key again lead this the same as what I've got in the lab notes which is 73
just customer with a capital C so just remember it is case sensitive so make 74
sure the customer is a capital C then we're not going to use a default 75
settings because I want to save a bit of money so what I'm going to do is turn 76
off auto scaling because we really only need one read capacity unit and we'll 77
just change that to the minimum and save a bit of cost so 78
if we forget to delete this it's only going to cost us 60 cents a month so not 79
a problem and we create that that table and that's 80
now being created after a certain amount of time it will be ready to go okay 81
jumping into tables and we can see there that is now active so I'm just going to 82
click on that again what we need to do now is that we need to create an I am 83
role that will give our end users or our end users can assume that will give them 84
federated temporary access to this table so they can read and write to that table 85
so we're just going to go to the tab that has access control we're going to 86
select login with Amazon which is what we're using we'll select all of the 87
action set and we'll create this policy so there it has automatically created 88
that policy for us we just saved us a lot of time means we don't get many 89
mistakes in here so all we need to do now is to copy that policy over to I am 90
and then we can create an I am role using that policy so the first thing we 91
need to do is just copy all of that so ctrl a and control C or command a 92
command C if you're on Mac and we'll go to the IAM console now and we go to roles 93
actually first of all we'll go to policies and we'll create a policy and 94
we'll paste in delete what's in there now and we'll paste you now our JSON 95
code in there so let's have a look at it so what we've got is we're allowing all 96
of the actions here on DynamoDB and it's going to be on our login with 97
Amazon test database or so our test table and it's only going to be it's got 98
it's a condition against it so it's only going to be allowed where the leading 99
keys have user ID so what that means is that our primary key of our database is 100
customer and so we're the customer has the the value of our 101
Amazon account or the users Amazon account they can write to that but they 102
can't write anything else, so it's limited to entries on their own account 103
so just click on review policy we'll give that a name and we'll give it a 104
description as well okay so we can see it's got limited read and write access 105
and on the resource login with the Amazon test that table and it's only 106
going to be where the leading keys or the partition which is customer where 107
the customer equals the amazon.com user ID that has been logged in so we just 108
create that policy now okay so that's been created now so now we can create a 109
role using that policy so create role and we wanted to whereby identity our 110
identity provider will be log in with Amazon and our application ID so we need 111
to get this application ID from amazon.com from our developer account so 112
we go back into our developer account and we can see up the top here we've got 113
our application ID so we've got two IDs we've got an application ID and we've 114
got a client ID so for this part of the process we use the application ID so 115
just going to select all of that and copy that over 116
and goto permissions now this is where we search for our policy so I'm just 117
going to do login it should find it so there's our policy that we just created 118
and we review we'll give this roller name we'll just call it login with 119
Amazon DynamoDB again that will be fine and a description in there and that 120
looks fine so we've got our policy there which is our login with Amazon DynamoDB 121
policy we've got our identity provider is amazon.com and we just click on create role 122
okay so that role has now been created so if we click up here to 123
that role to get to that role we can see here we've got a role ARN so we're 124
going to need that later on in our code and what we'll do is we'll jump into our 125
code and we'll put that in there now so just copying that now and I'm just going 126
to jump into my fj's code that we uploaded and we can see here we have a 127
variable roleARN so we need to put our a RN for our role into them so that's 128
done and what I'm going to do now is I'm going to save that as a different name 129
and I'm going to call it V or app underscore a version 2 now the reason 130
I'm doing that is because we've got a CloudFront distribution and so if we're 131
going to just keep using app.js and we upload app.js we're going to have to 132
invalidate that CloudFront distribution which is going to take a long long time 133
you know I have naturally measured it but you're probably looking at half an 134
hour or so to invalidate that CloudFront distribution so instead of doing that we 135
just need to upload a new file and this is what that is and so if it's not in 136
the distribution it will just get proxied straight back to Amazon s3 and 137
it'll go from there so we just say that as version 2 or just copy the name first 138
and save that and I need to go into index.html and scroll down to here 139
because this is referencing app.js so we need to put the new file name which will 140
be app version two JS and we also if you see here we need to put in our 141
client ID so we go back into the amazon.com seller central if we scroll 142
down here in our web settings we're going to have a client ID so we select 143
that so don't get this confused with the application ID that we use before this 144
is a client ID and we'll put that in here okay so that should be fine to run 145
so what I'm going to do now is we're going to file save that as another 146
version as well 147
and save so all we need to do now is upload that and run a replication so we 148
go into the s3 management console and upload that and again make sure that 149
we've got public permissions on this and upload that 150
now before we run this application let's have a quick look and see how it all 151
works so in our index.html or version to that we've got here we can see it's just 152
a blank pretty well a blank canvas here which has just got some buttons on it so 153
we start off by loading the Amazon or the login with Amazon JavaScript SDK and 154
when it has been loaded we then pass our client ID to the software development 155
kit now that is going to be our web client ID if this was an Android app it 156
would be our android client ID or it would be our if it was an iOS app it 157
would be our iOS client ID there so because it's a web application we're 158
sending our web client ID to that so once it has been loaded we've also got 159
here some buttons for logging and for logout and writing to the database we're 160
just loading jQuery and the AWS software development kit and 161
then finally we're loading in our app_v2.js code 162
so let's have a look so not much going on there other than loading in our login 163
for Amazon JavaScript SDK so if we go to our app there's a lot more going on 164
there so first of all we've got to define our region as US east we've also 165
got a variable there for our role ARN which we'll be passing to the AWS 166
security token service and 167
we've got our event listeners for those three buttons being our login with 168
Amazon which will go to a login with Amazon function which is down here if we 169
want to log out it's going to call the login function within the Amazon SDK and 170
finally we can write to dynamodb using a write DynamoDB function which we're 171
creating as well so when we log in and we click on that login function the 172
first thing or login button the first thing we want to do is define the scope 173
of our call to amazon.com and that will be to retrieve the profile and that will 174
be the email address and the name of our end user so what we need to do is that 175
we need to run the authorize process and if that is successful it will open up a 176
pop-up screen and/or pop-up window and we put in our amazon.com username and 177
password to that if it's accepted then we will get a a good response back in 178
okay responses not an error and in that response we will get an access token 179
from amazon.com so we can use that access token that we get from amazon.com 180
for two things first of all we can go back to the login with Amazon service 181
and we can retrieve the user profile information for the person has just 182
logged in and so that again we'll get a sell name and email address of that 183
person so that's what we're doing here is it we're calling retrieve profile and 184
we're passing that access token there and in our response we're going to get 185
the user profile of that person so if that is successful then we go on to 186
create our AWS credentials so that will again it will be similar to what we do 187
with Cognito instead of using the Cognito service we're going to be using 188
web identity credentials and what we do is we pass the provider 189
which will be amazon.com 190
the ARN for our IAM role and finally we're going to pass 191
that access token that we got from logging with Amazon 192
so once we have created that object we can refresh our AWS credentials and it will reload 193
that in and so if it is successful then we're going to create a dynamoDB object 194
that we can use for calling to the dynamoDB service so when we click on 195
that write dynamoDB button what it's going to do is it's going to write to 196
dynamoDB the user profile information and it's also going to put in the top 197
score information for that user so how does that work so we're going to define 198
some parameters for our item that we're writing and it's going to be customer 199
which if you remember when we created our dynamo DB table customer was the 200
primary key for that table and if you remember when we created our role the 201
access had a condition that the primary key being customer must have 202
been the same as the user that is logging in their amazon.com ID so what 203
we're doing is that we're supplying the amazon.com ID to customer in their item 204
so that will be accepted by AWS we're also putting in the email address for 205
the person and the name of the person and we're putting in some top-score 206
information so I'm just putting in 0 there but if this was a real thing you 207
were put in the top score information for their game or whatever they're doing 208
and once we've done that we can call put item and if that is OK it will just no 209
stringify that out and put it out to the to the console on our screen so that's 210
how it all works and what we'll do now is it will go ahead and run that 211
jumping back in the CloudFront manager let's have a look at our new website so 212
we go to here now this is going to be the index.html so we don't want this one 213
this is the old one we want to go to the new one which will be our version two 214
which is them so what's happened now is our because it's not in our CloudFront 215
distribution CloudFront is just proxied that's straight back to Amazon s3 and 216
we've got that up and running if we used in text HTML we would have had to 217
invalidate that CloudFront distribution would have wasted a lot of time so what 218
we can do now is we'll run this application it's going to press f12 to 219
get the console up and click on login with Amazon and see what happens so 220
there we go so I just put in my password 221
so it's asking for access to my profile so so by logging into this web 222
application the web application is going to receive my name and my email address 223
and so I'm going to allow that okay so we can see here you are now signed in so 224
everything is worked fine so we've got in here don't worry about this a 225
mismatch or a match is not a function this uncaught type error that's just a 226
problem with the login it's not a problem with our code so looking here 227
we've got our Amazon login details and so what's happened is it's returned an 228
access token so that's a login with Amazon access token and we can pass that 229
access token over to the AWS STS service using Web Identity Federation and what 230
it will do is it will create temporary credentials for us and so we can see 231
here we've grabbed that access token and we've got our role here that is being 232
used and we're calling assume web identity Federation with the access 233
token and it has successfully created the AWS temporary credentials for us so 234
what we can do now is I'm just going to clear the console is that we should be 235
able to now grab that profile information that has that we've received 236
which will have my name and my email address and we can write that to DynamoDB 237
so let's have a look at how that goes 238
so just click on right to DynamoDB so there we go 239
if it worked it will return consume the capacity so just saying here the table 240
and we've consumed one capacity unit and it's written it with the Amazon account 241
there so what's happened now is that we should be able to go into DynamoDB and 242
there should be an entry for this user with that Amazon account under under 243
customer so let's have a look we'll jump into dynamoDB and we'll click on items 244
and there we can see we've got customer which was as you remember when we 245
created this table our primary key was customer and so whatever is in here is 246
provided it's got the Amazon account for the person that has logged in with those 247
temporary security credentials they can write to here but they cannot write to 248
any other place within the database so you can see that so there's my Amazon 249
account ID there's my email there's my name and we've also written in there top 250
score so if you wanted to put any further details of that use you can put 251
that in so if it's a game and you want to keep track of their top score of the 252
game that's how you do it so that's how 253
simple and easy it is to use federated identity now why would you want to do 254
that and why not just use Cognito well the thing is Cognito it costs your money 255
and you have to pay for that so you might be a cash-strapped startup and 256
you've got the next best thing and you know that the people that are using your 257
web application have an Amazon account or they have a Facebook account or a 258
Google account and you can use that to authorize them and it's not going to 259
cost you anything to do that and so by doing that then you can also expand 260
quite rapidly so if your your app becomes extremely popular your 261
application is going to be running on their end users hardware it's going to 262
be running on their computer or their mobile phone or whatever you're not 263
paying for that compute capacity but or you're paying for is the data that 264
back-end being that dynamodb database and they're accessing that directly 265
without any ec2 instances without anything like that in front of it 266
they're accessing that directly and doing that extremely securely as well so 267
that brings us to the end of a pretty good lab I think and what we need to do 268
now is to clean it all up so the first thing we will do is that we will delete 269
this table so when that's chugging away we then need to disable this CloudFront 270
distribution so that will take a while to disable so once it's disabled then we 271
can go back in there and we will be over this delete will be will be highlighted 272
so we can delete it that'll take about 15 minutes or so and we just delete this 273
bucket 274
okay so that's all cleaned up and I look forward to seeing you in the 275
next lab