AWS Lambda - Exemple supplémentaire
Jusqu'à présent, nous avons vu fonctionner AWS Lambda avec les services AWS. Sur la base de ces connaissances, créons un formulaire d'inscription utilisateur simple et publions les données à l'aide de la passerelle API sur AWS Lambda. AWS Lambda obtiendra les données de l'événement ou du déclencheur de passerelle API et ajoutera ces détails à la table DynamoDB.
Exemple
Prenons un exemple et exécutons les fonctionnalités suivantes dessus -
Créer une table DynamoDB
Créer un formulaire d'inscription des utilisateurs
Créer AWS Lambda et la passerelle API pour envoyer un message au téléphone à l'aide du service AWS SNS
Créez une passerelle AWS Lambda et API vers des données de formulaire POST et insérez-les dans la table DynamoDb
Créez AWS Lambda et une passerelle API pour lire les données de la table Dynamodb
Travail final du formulaire d'inscription de l'utilisateur
Créer une table DynamoDB
Les données saisies seront stockées dans la table DynamodDB. Nous utiliserons la passerelle API pour partager les données saisies avec AWS Lambda et plus tard AWS Lambda ajoutera les détails dans DynamoDB.
Vous pouvez utiliser les détails suivants pour créer une table DynamodDB dans la console AWS. Tout d'abord, accédez à AWS Service et cliquez surDynamoDB. Cliquez surTable pour créer le tableau comme indiqué ci-dessous -
Vous pouvez utiliser l'ARN pour créer une stratégie pour DynamoDB à utiliser avec AWS Lambda.
Accédez à IAM et sélectionnez Policies. Cliquez surCreate policy, choisissez le service comme DynamodDB comme indiqué ci-dessous -
Cliquez sur All DynamoDBactions comme indiqué ci-dessus. Choisissez la ressource et entrez l'ARN du tableau comme indiqué ci-dessous -
Maintenant, cliquez sur Add comme indiqué ci-dessous.
Si vous cliquez sur Review policy bouton à la fin de l'écran, vous pouvez voir la fenêtre suivante -
Entrez le nom de la politique et cliquez sur Create policybouton à la fin de la page. Maintenant, nous devons créer un rôle à utiliser avec Lambda. Nous avons besoin d'autorisations pour DynamoDB, APIGateway et Lambda.
Accédez aux services AWS et sélectionnez IAM. Sélectionnez Rôles sur le côté gauche et ajoutez les rôles requis.
Entrez le nom du rôle et cliquez sur Create role. Le rôle créé estroleforlambdaexample.
Créer un formulaire d'inscription des utilisateurs
Voici l'affichage du formulaire d'inscription utilisateur pour saisir et lire les données de la table dynamodb.
Créer AWS Lambda et API Gateway pour envoyer un message OTP au téléphone à l'aide du service SNS
Si vous voyez le formulaire d'inscription de l'utilisateur, il y a un bouton validate phone. L'utilisateur doit entrer son numéro de téléphone et cliquer survalidate phone bouton pour valider le numéro de téléphone.
A cet effet -
Lorsqu'un utilisateur clique sur ce bouton, la méthode de publication de la passerelle API qui contient les détails du téléphone est appelée et AWS Lambda est déclenché en interne.
Ensuite, AWS Lambda envoie OTP au numéro de téléphone entré à l'aide du service AWS SNS.
L'utilisateur reçoit l'OTP et doit saisir ce numéro OTP.
La zone de texte pour entrer OTP apparaîtra lorsque le numéro de téléphone est entré et validate phone bouton est cliqué.
L'OTP reçu d'AWS Lambda et l'OTP saisi par l'utilisateur doivent correspondre, pour permettre à l'utilisateur d'envoyer le formulaire d'inscription utilisateur.
Un schéma de principe simple qui explique le fonctionnement de la validation du téléphone est montré ici -
La fonction AWS Lambda créée est illustrée ici -
Le code AWS Lambda correspondant est indiqué ci-dessous -
const aws = require("aws-sdk");
const sns = new aws.SNS({
region:'us-east-1'
});
exports.handler = function(event, context, callback) {
let phoneno = event.mphone;
let otp = Math.floor(100000 + Math.random() * 900000);
let snsmessage = "Your otp is : "+otp;
sns.publish({
Message: snsmessage,
PhoneNumber: "+91"+phoneno
}, function (err, data) {
if (err) {
console.log(err);
callback(err, null);
} else {
console.log(data);
callback(null, otp);
}
});
};Notez que nous utilisons le service SNS pour envoyer le code OTP. Ce code permet de valider le numéro de portable saisi par l'utilisateur dans le formulaire d'inscription de l'utilisateur. La passerelle API créée pour la validation téléphonique ci-dessus est la suivante -
La fonction Lambda donnée est phonevalidationexample. Nous prenons ici les détails du téléphone mobile pour les utiliser dans AWS Lambda. Ensuite, AWS Lambda enverra le code OTP au numéro de mobile donné.
Créer AWS Lambda et API Gateway vers des données de formulaire POST et insérer dans la table DynamoDB
Pour le formulaire d'inscription utilisateur, tous les champs sont obligatoires. Il y a un appelAJAX effectué dans lequel les données saisies dans le formulaire sont publiées sur l'URL de la passerelle API.
Un schéma de principe simple qui explique le fonctionnement du bouton d'envoi est montré ici -
Une fois le formulaire rempli, le bouton d'envoi appellera la passerelle API qui déclenchera AWS Lambda. AWS Lambda obtiendra les détails du formulaire à partir de l'événement ou de la passerelle API et les données seront insérées dans la table DynamodDB.
Laissez-nous comprendre la création d'API Gateway et AWS Lambda.
Tout d'abord, accédez aux services AWS et cliquez sur Lambda. La fonction Lambda créée est comme illustré ici -
Maintenant, pour créer une passerelle API, accédez au service AWS et sélectionnez API Gateway. Cliquer surCreate API bouton illustré ci-dessous.
Entrer le API name et cliquez sur Create API bouton pour ajouter l'API.
Maintenant, une API est créée appelée comme registeruser. Sélectionnez l'API et cliquez surActions menu déroulant pour créer Resource.
Cliquez sur Create Resource. Maintenant, ajoutons lePOSTméthode. Pour cela, cliquez sur les ressources créées à gauche et depuisActions sélection déroulante create method. Cela affichera la liste déroulante comme indiqué ci-dessous -
Sélectionnez la méthode POST et ajoutez la fonction Lambda que nous avons créée ci-dessus.
Cliquez sur Savebouton pour ajouter la méthode. Pour envoyer les détails du formulaire à la fonction Lambdalambdaexample nous devons ajouter le Integration Request comme indiqué ci-dessous -
Pour publier les détails du formulaire, vous devrez cliquer sur Integration Request. Il affichera les détails ci-dessous.
Cliquez sur Body Mapping Templates pour ajouter les champs de formulaire à publier.
Ensuite, cliquez sur Add mapping templateet entrez le type de contenu. Ici, nous avons ajoutéapplication/jsoncomme type de contenu. Cliquez dessus et ici vous devez entrer le champ au format json comme indiqué ci-dessous -
Maintenant, cliquez sur le Save et déployez l'API comme indiqué ci-dessous -
Voici l'API créée pour POST qui sera utilisée dans notre fichier .html. Veuillez noter que nous devons activer CORS pour la ressource créée. Utilisera l'URL de la passerelle API pour effectuer un appel ajax afin que CORS soit activé.
Sélectionnez les méthodes sur lesquelles vous souhaitez activer le CORS. Cliquer surEnable CORS and replace existing CORS headers.
Il affiche l'écran de confirmation comme suit -
Cliquez sur Yes, replace existing values pour activer CORS.
Le code AWS Lambda pour POST API Gateway est présenté ici -
const aws = require("aws-sdk");
const docClient = new aws.DynamoDB.DocumentClient({
region:'us-east-1'
});
exports.handler = function(event, context, callback) {
console.log(event);
console.log("Entering Data");
var data = {
TableName : "registeruser",
Item : {
first_name:event.fname,
last_name:event.lname,
emailid:event.emailid,
mobile_no : event.mphone,
otp:event.otp,
username:event.uname,
password:event.passwd,
confirm_password:event.cpasswd
}
}
docClient.put(data, function(err, value) {
if (err) {
console.log("Error");
callback(err, null);
} else {
console.log("data added successfully");
callback(null, value);
}
});
}Le paramètre d'événement dans le gestionnaire AWS Lambda aura tous les détails qui ont été ajoutés précédemment dans la demande d'intégration POST. Les détails de l'événement sont ajoutés à la table DynamodDB comme indiqué dans le code.
Maintenant, nous devons obtenir les détails du service d'AWS-SDK comme indiqué ci-dessous -
const aws = require("aws-sdk");
const docClient = new aws.DynamoDB.DocumentClient({
region:'us-east-1'
});
var data = {
TableName : "registeruser",
Item : {
first_name:event.fname,
last_name:event.lname,
emailid:event.emailid,
mobile_no : event.mphone,
otp:event.otp,
username:event.uname,
password:event.passwd,
confirm_password:event.cpasswd
}
}
docClient.put(data, function(err, value) {
if (err) {
console.log("Error");
callback(err, null);
} else {
console.log("data added successfully");
callback(null, value);
}
});Créer AWS Lambda et API Gateway pour lire les données de la table DynamodDB
Nous allons maintenant créer la fonction AWS Lambda pour lire les données de la table DynamoDB. Nous déclencherons APIGateway vers la fonction AWS Lambda qui enverra les données au formulaire html.
La fonction AWS Lambda créée est la suivante:
Le code AWS Lambda correspondant est le suivant:
const aws = require("aws-sdk");
const docClient = new aws.DynamoDB.DocumentClient({
region:'us-east-1'
});
exports.handler = function(event, context, callback) {
var readdata = {
TableName : "registeruser",
Limit : 10
}
docClient.scan(readdata, function(err, data) {
if (err) {
console.log("Error");
callback(err, null);
} else {
console.log("Data is " + data);
callback(null, data);
}
});
}Ici, les données sont lues à partir de la table DynamoDB et transmises au rappel. Maintenant, nous allons créer APIGateway et ajouter la fonction AWS Lambda comme déclencheur.
Nous ajouterons la méthode get à l'API créée précédemment.
La fonction Lambda ajoutée est lambdareaddataexample. Cliquez surSave pour enregistrer la méthode et déployer l'API.
Travail final du formulaire d'inscription de l'utilisateur
L'affichage final du formulaire est comme indiqué ci-dessous -
Maintenant, entrez les détails comme indiqué ci-dessus. Notez que le bouton d'envoi est désactivé. Il ne sera activé que lorsque tous les détails seront saisis comme indiqué -
Maintenant, entrez le numéro de mobile et cliquez sur validate phonebouton. Il affichera le message d'alerte disant“OTP is send to the mobile, please enter the OTP to continue”. OTP envoyé au numéro de mobile est comme suit -
Entrez l'OTP et les détails restants et soumettez le formulaire.
Les données dans DynamoDB registeruser le tableau après soumission est comme indiqué ici -
Les détails du code sont indiqués ci-dessous -
Example1.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="formdet.js"></script>
<style>
input[type=text], input[type=password],button {
width: 100%;
padding: 5px 5px;
margin: 5px 0;
box-sizing: border-box;
}
#maincontainer {
width: 80%;
margin: auto;
padding: 10px;
}
div#userregistration {
width: 60%;
float: left;
}
div#userdisplay {
margin-left: 60%;
}
</style>
</head>
<body>
<div id="maincontainer">
<div id="userregistration">
<h1>User Registration Form</h1>
<table border="0">
<tr>
<td><b>First Name<span style="color:red;">*</span> : </b></td>
<td><input type="text" value="" name="fname" id="fname" /></td>
<td id="tdfname" style="display:none;"><span style="color:red;">Enter First Name</span></td>
</tr>
<tr>
<td><b>Last Name<span style="color:red;">*</span> : </b></td>
<td><input type="text" value="" name="lname" id="lname" /></td>
<td id="tdlname" style="display:none;"><span style="color:red;">Enter Last Name</span></td>
</tr>
<tr>
<td><b>Email Id<span style="color:red;">*</span> : </b></td>
<td><input type="text" value="" name="emailid" id="emailid" /></td>
<td id="tdemailid" style="display:none;"><span style="color:red;">Enter Email</span></td>
</tr>
<tr>
<td><b>Mobile No<span style="color:red;">*</span> : </b></td>
<td><input type="text" name="mphone" id="mphone"/></td>
<td id="tdmphone" style="display:none;"><span style="color:red;">Enter Mobile Number</span></td>
</tr>
<tr>
<td></td>
<td><button id="validatephone">validate phone</button></td>
<td></td>
</tr>
<tr id="otpdiv" style="display:none;">
<td><b>Enter OTP<span style="color:red;">*</span>:</b></td>
<td><input type="text" value="" name="otp" id="otp" /></td>
<td id="tdotp" style="display:none;"><span style="color:red;">Enter OTP</span></td>
</tr>
<tr>
<td><b>Username<span style="color:red;">*</span>: </b></td>
<td><input type="text" value="" name="uname" id="uname"/></td>
<td id="tduname" style="display:none;"><span style="color:red;">Enter Username</span></td>
</tr>
<tr><td><b>Password<span style="color:red;">*</span> :</b></td>
<td><input type="password" value="" name="passwd" id="passwd"/></td>
<td id="tdpasswd" style="display:none;"><span style="color:red;">Enter Password</span></td>
</tr>
<tr><td><b>Confirm Password<span style="color:red;">*</span> :</b></td>
<td><input type="password" value="" name="cpasswd" id="cpasswd"/></td>
<td id="tdcpasswd" style="display:none;"><span style="color:red;">Enter Confirm Password</span></td>
</tr>
<tr>
<td></td>
<td><button name="submit" id="submit" style="display:;" disabled="true">Submit</button></td>
<td></td>
</tr>
</table>
</div>
<div id="userdisplay">
<h1>User Display</h1>
<table id="displaydetails" style="display:block;width:80%;padding:5px;margin:5px; border: 1px solid black;">
<tr>
<td></td>
<td>FirstName</td>
<td>LastName</td>
<td>Mobile No</td>
<td>EmailID</td>
</tr>
</table>
</div>
</div>
</body>
</html>formdet.js
function validateform() {
var sError="";
if ($("#fname").val() === "") {
$("#tdfname").css("display","");
sError++;
}
if ($("#lname").val() === "") {
$("#tdlname").css("display","");
sError++;
}
if ($("#emailid").val() === "") {
$("#tdemailid").css("display","");
sError++;
}
if ($("#mphone").val() === "") {
$("#tdmphone").css("display","");
sError++;
}
if ($("#otp").val() === "") {
$("#tdotp").css("display","");
sError++;
}
if ($("#uname").val() === "") {
$("#tduname").css("display","");
sError++;
}
if ($("#passwd").val() === "") {
$("#tdpasswd").css("display","");
sError++;
}
if ($("#cpasswd").val() === "") {
$("#tdcpasswd").css("display","");
sError++;
}
if (sError === "") {
return true;
} else {
return false;
}
}
$("#fname").change(function() {
if ($("#fname").val() !== "") {
$("#tdfname").css("display","none");
} else {
$("#tdfname").css("display","");
}
});
$("#lname").change(function() {
if ($("#lname").val() !== "") {
$("#tdlname").css("display","none");
} else {
$("#tdlname").css("display","");
}
});
$("#emailid").change(function() {
if ($("#emailid").val() !== "") {
$("#tdemailid").css("display","none");
} else {
$("#tdemailid").css("display","");
}
});
$("#mphone").change(function() {
if ($("#mphone").val() !== "") {
$("#tdmphone").css("display","none");
} else {
$("#tdmphone").css("display","");
}
});
$("#otp").change(function() {
if ($("#otp").val() !== "") {
$("#tdotp").css("display","none");
} else {
$("#tdotp").css("display","");
}
});
$("#uname").change(function() {
if ($("#uname").val() !== "") {
$("#tduname").css("display","none");
} else {
$("#tduname").css("display","");
}
});
$("#passwd").change(function() {
if ($("#passwd").val() !== "") {
$("#tdpasswd").css("display","none");
} else {
$("#tdpasswd").css("display","");
}
});
$("#cpasswd").change(function() {
if ($("#cpasswd").val() !== "") {
$("#tdcpasswd").css("display","none");
} else {
$("#tdcpasswd").css("display","");
}
});
var posturl = "https://4rvwimysc1.execute-api.us-east-1.amazonaws.com/prod/adduser";
var phonevalidationurl = "https://wnvt01y6nc.execute-api.us-east-1.amazonaws.com/prod/validate";
var otpsend = "";
function getdata() {
var a = 0;
$.ajax({
type:'GET',
url:posturl,
success: function(data) {
$("#displaydetails").html('');
$("#displaydetails").css("display", "");
console.log(data);
$("#displaydetails").append('<tr style="padding:5px;margin:5px;background-color:gray;"><td>Name</td><td>Mobile No</td><td>EmailID</td></tr>');
data.Items.forEach(function(registeruser) {
var clr = (a%2 === 0) ? "#eee": "white";
a++;
$("#displaydetails").append('<tr style="padding:5px;margin:5px;background-color:'+clr+'"><td>'+registeruser.first_name+'-'+registeruser.last_name+'</td><td>'+registeruser.mobile_no+'</td><td>'+registeruser.emailid+'</td></tr>');
});
},
error: function(err) {
console.log(err);
}
});
}
$(document).ready(function() {
$("#otp").on("change", function() {
var otpentered = $("#otp").val();
if (otpsend == otpentered) {
document.getElementById("submit").disabled = false;
} else {
alert("OTP is not valid.Please enter the valid one or validate phone again to continue!");
document.getElementById("submit").disabled = true;
}
});
$("#validatephone").on("click", function() {
$.ajax({
type:'POST',
url:phonevalidationurl,
data:JSON.stringify({
"mphone":$("#mphone").val()
}),
success: function(data) {
$("#otpdiv").css("display", "");
alert("OTP is send to the mobile, please enter to continue");
console.log(data);
otpsend = data;
},
error : function(err) {
$("#otpdiv").css("display", "none");
alert("Invalid mobile no.");
}
});
});
$("#submit").on("click", function() {
if (validateform()) {
$.ajax({
type:'POST',
url:posturl,
data:JSON.stringify({
"fname": $("#fname").val(),
"lname": $("#lname").val(),
"emailid":$("#emailid").val(),
"mphone":$("#mphone").val(),
"otp":$("#otp").val(),
"uname":$("#uname").val(),
"passwd":$("#passwd").val(),
"cpasswd":$("#cpasswd").val()
}),
success: function(data) {
alert("Data added successfully");
console.log(data);
getdata();
}
});
}
});
getdata();
});Jusqu'à présent, nous avons effectué l'appel AJAX à l'API créée et publié les données comme indiqué ci-dessus.
L'appel AJAX pour ajouter les données à la table est le suivant -
var posturl = "https://4rvwimysc1.execute-api.us-east-1.amazonaws.com/prod/adduser";
$(document).ready(function() {
$("#submit").on("click", function() {
if (validateform()) {
$.ajax({
type:'POST',
url:posturl,
data:JSON.stringify({
"fname": $("#fname").val(),
"lname": $("#lname").val(),
"emailid":$("#emailid").val(),
"mphone":$("#mphone").val(),
"otp":$("#otp").val(),
"uname":$("#uname").val(),
"passwd":$("#passwd").val(),
"cpasswd":$("#cpasswd").val()
}),
success: function(data) {
alert("Data added successfully");
console.log(data);
getdata();
}
});
}
});
});Notez que pour lire les données, une fonction est appelée, dont le code est donné ci-dessous -
function getdata() {
var a = 0;
$.ajax({
type:'GET',
url:posturl,
success: function(data) {
$("#displaydetails").html('');
$("#displaydetails").css("display", "");
console.log(data);
$("#displaydetails").append('<tr style="padding:5px;margin:5px;background-color:gray;"><td>Name</td><td>Mobile No</td><td>EmailID</td></tr>');
data.Items.forEach(function(registeruser) {
var clr = (a%2 === 0) ? "#eee": "white";
a++;
$("#displaydetails").append('<tr style="padding:5px;margin:5px;background-color:'+clr+'"><td>'+registeruser.first_name+'-'+registeruser.last_name+'</td><td>'+registeruser.mobile_no+'</td><td>'+registeruser.emailid+'</td></tr>');
});
},
error: function(err) {
console.log(err);
}
});
}Lorsque vous cliquez sur le bouton de validation du numéro de mobile, le code suivant est appelé et envoie le numéro de mobile -
var phonevalidationurl = "https://wnvt01y6nc.execute-api.us-east-1.amazonaws.com/prod/validate";
var otpsend = "";
$("#validatephone").on("click", function() {
$.ajax({
type:'POST',
url:phonevalidationurl,
data:JSON.stringify({
"mphone":$("#mphone").val()
}),
success: function(data) {
$("#otpdiv").css("display", "");
alert("OTP is send to the mobile, please enter the OTP to continue");
console.log(data);
otpsend = data;
},
error : function(err) {
$("#otpdiv").css("display", "none");
alert("Invalid mobile no.");
}
});
});
// Validate otp
$("#otp").on("change", function() {
var otpentered = $("#otp").val();
if (otpsend == otpentered) {
document.getElementById("submit").disabled = false;
} else {
alert("OTP is not valid.Please enter the valid one or validate phone again to continue!");
document.getElementById("submit").disabled = true;
}
}