Welcome back to BackSpace Academy. In this lecture we're going to be using the 2
same Lambda function code that we created previously either in Nodejs or 3
Python and we're going to create a Lambda function with that and then we're 4
going to create a browser based JavaScript application that is going to 5
accept some IAM user credentials and it's going to accept them through a 6
pop-up box, so it won't be hard-coded into that code which won't be secure, so 7
it will be secure and once it's got those IAM credentials it's going to use 8
those to connect to Lambda function using the AWS software 9
development kit and then it will be able to send requests and also receive 10
responses from our Lambda function. So let's get into it. So starting off in the 11
Lambda management console. We're going to create another function as before, author 12
from scratch as before, the function name, we will use the same function name, this 13
one's going to be in NodeJS but you can use the same Python code whatever you're 14
comfortable with, I'm going to use nodejs, we'll use that same execution role as 15
before and will create that function so that's created successfully, we'll just 16
add in our code and it's the same code that we used in the previous lab, paste 17
that in there and there is our node.js code nothing needs to change here at all 18
and we can test that now, just leave that test as well, try that again 19
and I'll just leave that as it is and test. So I didn't do that right 20
because I forgot to save it, so I'll just get out of this again and save it 21
because I upload a new code, we'll do that test again very important to test 22
code, so we just test that again and there we go so it's done it right there 23
so we receive value 1 2 & 3, so everything's working fine there, so it 24
didn't work fine at the first time because I forgot to save it, so that's 25
all okay, so now that we've got our our Lambda function working we're going to 26
use this ARN here, which we'll copy later on and we're going to use that to 27
create a user policy and then we're going to use that policy that is going 28
to create an IAM user that will have limited access to invoke this Lambda 29
function and to communicate with this Lambda function so let's go to the IIM 30
console and we're going to first off create a policy we're going to go to 31
JSON and it's going to copy from the lab notes here so that I don't make a 32
mistake 33
so there's our our policy there so it's going to allow land the invoke list and 34
get and it's going to be only for that land a resource and we need to get the 35
Amazon resource number for that Lambda function so we'll just copy it from here 36
and we'll paste it in there and there is our policy so we'll review that policy 37
we'll give that policy a name backspace - Lambda - lab from the lab notes in 38
here you can see we're going to have list read and write access to backspace 39
- Lambda - lab function will create that policy there we go so now that 40
we've created that policy we can create an IAM user add user and we'll give that 41
user a name I'll just copy again from the lab notes so that I don't make it 42
any different so there we go backspace - lambda' 43
- browser - lead that will be our user now we only select programmatic access 44
we're not going to give this user console access we're only going to be 45
accessing through the software development kit we click on Next 46
permissions and this is where we attach our existing policy and we'll look for 47
that backspace policy and there it is backspace - Lambda - lab the policy we 48
just previously created next tags we'll leave that as it is next review let's 49
create that user so that's good now what we need to do is that we need to 50
download this CSV which is going to have our user credentials so we just download 51
that and we're going to use those to log in with our browser application so we're 52
going to get the access key which you've got here and our secret access key which 53
will be in this CSV file we all we need to do is cut and paste it into our login 54
screen on our application and we'll be fine so it's going to close out of that 55
close in and that's done ok so the next thing we need to do is start working on 56
our browser applications so we go to the Backspace Academy 57
browser template so there's a link to this in the lab notes and the to the two 58
files that you need to download our index.html and app das keep them in the 59
same location because the index dot HTML would be referring to the app.js so 60
i'm just going to get up visual studio code here but you can use whatever you 61
want and I'm going to cut and paste that code into it so I'm just going to go 62
into index.HTML click on raw and copy that and paste that in over here 63
and then I'm going to get my app.js so open that up as well click on 64
raw and copy all that ok so now that I've got that in in an editor we can 65
have a look at it so here we've got our index.html and all this is is a very 66
very simple web page and it's just going to have two buttons on it one button 67
will be for signing into AWS so when we click on that it's going to open up a 68
sign in modal and that modal will have two areas to input into your access key 69
ID and your secret access key and when you click on login the application will 70
take those credentials and it will use those credentials to login with AWS and 71
then it also will be another button there to send a command so whatever we 72
want to do with AWS we can do through this send command button so when we 73
click on it what we're going to do is we're going to invoke the Lambda 74
function and send a request to that Lambda function and see what it returns 75
to us so let's have a look further down is that we're going to load in bootstrap 76
and then we're going to load oh sorry first off we're going to load in jQuery 77
then bootstrap and then the AWS software developer 78
kit and then our application code so you need to do it in that order and you need 79
to make sure that it is at the bottom of the webpage as well not at the top down 80
at the bottom so let's look at how apt is it is that application code so up to 81
stop up the top here we've got a constant for region so to use the 82
software development kit you need to define a region you cannot log in to the 83
AWS through this software development kit without having the region as a 84
parameter then we're going to define some variables what we're going to put 85
in here so this is purely and simply a bare-bones application as it is now 86
we're going to add stuff to it and we're going to have some buttons here so the 87
first one there is a sign-in button and as we said that's going to this 88
event listener will open up the modal or the sign-in function here which 89
is going to open up that modal and that and it's going to accept from that modal 90
the access key ID the secret access key and we're going to create this config 91
object which will have those credentials and we'll also have the region and we're 92
going to use those credentials to login with AWS when we need to so then the 93
next button is going to be our send command button which will open up this 94
function so first of all it's going to check whether we're ready to communicate 95
with AWS so it's not going to be ready until we've got those user credentials 96
so then ready AWS is true and so then we can start to use or instantiate our AWS 97
software development kit service objects and so the one we're going to use is 98
lambda so let's start putting in some code in here so the first thing we need 99
to do is put in our our variables that we're going to be using so just cutting 100
and pasting from the lab notes here so we're going to have some temporary data 101
there so this is going to be our Lambda object that we're going to be inverter 102
using to invoke lambda and then we're going to have our function name which is 103
a name that we created for our function so ours was callbacks 104
space - Lambda - lab that's the name of our function so net now that we've got 105
that information we can pass it through to the software development kit service 106
and we can start using the Lambda so what I'm going to do again you I'm just 107
going to paste from the notes here and 108
there we go so the first thing we're going to do is going to do Lambda is a 109
new AWS Lambda object so the parameters that we're going to pass we're going to 110
have to have the function name and the invocation type and the log type so 111
we'll always be using request/response and tail the function name is going to 112
again be the name of our backspace - lab Lambda - lab function and then we've got 113
our payload which is what week the object that we're going to be sending to 114
our Lambda function and that will be key 1 which will be milk key 2 will be eggs 115
and key 3 will be bread so once we've created those parameters 116
or defined those parameters we can invoke that Lambda function so we do 117
lambda dot invoke parse those parameters and if there's an error rule out put 118
that error otherwise we're going to get a successful response from our Lambda 119
function we're going to create some temporary data there with our with our 120
response and we're going to output that so we're going to output that to the 121
screen and everything should be fine so that's all okay we can save that and we 122
can open up up into our into our browser and see how that works 123
okay so I've just opened up the index.html and everything seems to be 124
working fine it's it's referenced our app.js by the looks of things. So we 125
first need to sign it so I just click on AWS signing and we need to get our 126
access key ID and our secret access key from that I am user that we created so 127
that'll be in that excel file that we saved 128
so I'm just going to cut and paste that over and sign in okay so there we can 129
see it's just out put it here that we've created those credentials for that 130
access key ID so what we can do now is we can send that command and see what 131
happens there we go so it's sent the command it's invoked our Lambda function 132
and we've got a response in that Lambda function that which says item one 133
received milk item two received eggs item 3 received bread so that's great so 134
everything's working perfectly so we've created our browser application we have 135
logged into AWS we're sent a command to invoke that Lambda function we're sent 136
some information to that Lambda function and it's sent that back to us so that's 137
how you create a browser application that takes advantage of a Lambda 138
back-end so that brings us to the end of the lab so the main thing that we need 139
to do now is that we need to clean this up by deleting that that that land a lab 140
function so we'll just go to here and delete function and that's all done so I 141
look forward to seeing you in the next lab.