Skip to content

Instantly share code, notes, and snippets.

@pcoady
Last active Jun 14, 2018
Embed
What would you like to do?
body {
background-color:#263238;
}
.glyphicon-refresh-animate {
-animation: spin .7s infinite linear;
-webkit-animation: spin2 .7s infinite linear;
}
@-webkit-keyframes spin2 {
from { -webkit-transform: rotate(0deg);}
to { -webkit-transform: rotate(360deg);}
}
@keyframes spin {
from { transform: scale(1) rotate(0deg);}
to { transform: scale(1) rotate(360deg);}
}
#pageSpinner{
display: none;
}
(function () {
var facebookAppId = 'YOUR_APP_ID';
var roleArn = 'YOUR_ROLE_ARN';
AWS.config.region = 'us-east-1';
var lambda = new AWS.Lambda();
var userLoggedIn = false;
var fbUserId = '0';
var fbToken = '0';
/******************** Startup functions ***********************************/
$.jGrowl.defaults.closerTemplate = '<div class="alert alert-info">Close All</div>';
/******************** Button Events ***************************************/
$('#btnInvoke').on('click', function (event) {
invokeLambda();
});
$('#btnGet').on('click', function (event) {
getLambda();
});
/******************* Facebook Login ***************************************/
function statusChangeCallback(response) {
console.log('Facebook response: ');
console.log(response);
if (response.status === 'connected') {
// Logged into your app and Facebook. Pass details to app.
testAPI();
setupAWS(response);
} else if (response.status === 'not_authorized') {
document.getElementById('status').innerHTML = 'Please log ' +
'into this app.';
} else {
document.getElementById('status').innerHTML = 'Please log ' +
'into Facebook.';
}
}
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
window.fbAsyncInit = function() {
FB.init({
appId : facebookAppId,
cookie : true,
xfbml : true,
version : 'v2.2'
});
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = '//connect.facebook.net/en_US/sdk.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function testAPI() {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Successful login for: ' + response.name);
document.getElementById('status').innerHTML =
'Thanks for logging in, ' + response.name + '!';
});
document.getElementById('status').innerHTML = 'Logged ' +
'into Facebook.';
}
function validLogin(){
// Checks you have logged in and token hasn't expired
var tempDate = new Date();
var tempValid = true;
if (!userLoggedIn){
tempValid = false;
growl('danger', 'Facebook Error', 'You are currently not logged in with Facebook!');
}
else if (tempDate >= fbTokenExpires){
tempValid = false;
growl('danger', 'Facebook Error', 'Facebook token expired. Please log in again');
}
return tempValid;
}
/******************* Create temporary AWS credentials *********************/
Date.prototype.addHours= function(h){
this.setHours(this.getHours()+h);
return this;
};
function setupAWS(response){
fbToken = response.authResponse.accessToken;
console.log('Facebook token: ' + JSON.stringify(fbToken));
fbTokenExpires = new Date().addHours(response.authResponse.expires/3600);
fbUserId = response.authResponse.userID;
lambda.config.credentials = new AWS.WebIdentityCredentials({
ProviderId: 'graph.facebook.com',
RoleArn: roleArn,
WebIdentityToken: fbToken
});
userLoggedIn = true;
console.log('Finished creating AWS credentials for account: ' + fbUserId);
}
/*********************** Invoke AWS Lambda function ************************/
function invokeLambda(){
}
/*********************** Get AWS Lambda function ***************************/
function getLambda(){
}
/*********************** User Interface functions **************************/
function growl(alertType,title,message){
$('#jGrowl-container1').jGrowl({
header: title,
message: message,
group: 'alert-' + alertType,
life: 5000
});
}
function showSpinner(){
$('#pageSpinner').css('display', 'block');
}
function hideSpinner(){
$('#pageSpinner').css('display', 'none');
}
/*************************** END *******************************************/
})();
<!DOCTYPE html>
<html>
<head>
<title>BackSpace Lambda Lab</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.4.3/jquery.jgrowl.min.css" type="text/css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<link rel="stylesheet" href="app.css"/>
</head>
<body>
<div id="jGrowl-container1" class="jGrowl top-right"></div>
<!-- Main page -->
<div class="container">
<div class="page-header">
<h1 style="color:#ddd">BackSpace Lambda Lab <small style="color:#eee">Get our hands dirty with Lambda!</small></h1>
</div>
<div class="jumbotron">
<h1>Welcome to the BackSpace Lambda Test App</h1>
<p>Use NodeJS on the server on demand.</p>
<br>
<!-- Facebook Login Button and Status -->
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();" data-size="xlarge">
</fb:login-button>
<div id="status"></div>
<div id="fb-root"></div>
<hr>
<!-- Buttons -->
<p>
<button id="btnInvoke" type="button" class="btn btn-success btn-lg">
Invoke Lambda Function
</button>
<button id="btnGet" type="button" class="btn btn-default btn-lg">
Get Lambda Function
</button>
<div id= "pageSpinner" class="alert alert-info" role="alert">
<span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span> Working, please wait...
</div>
</p>
</div>
</div>
<!-- External libraries (JQuery, Bootstrap & AWS Javascript SDK) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.1.43.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/async/1.4.2/async.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.4.1/jquery.jgrowl.min.js"></script>
<script src="app.js" type="text/javascript"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment