AWS Lambda: ejemplo adicional
Hasta ahora, hemos visto funcionar AWS Lambda con los servicios de AWS. Basándonos en ese conocimiento, creemos un formulario de registro de usuario simple y publiquemos los datos utilizando la puerta de enlace API en AWS Lambda. AWS Lambda obtendrá los datos del evento o del activador de la puerta de enlace de la API y agregará esos detalles a la tabla de DynamoDB.
Ejemplo
Consideremos un ejemplo y realicemos las siguientes funcionalidades en él:
Crear tabla de DynamoDB
Crear formulario para registro de usuario
Cree AWS Lambda y una puerta de enlace de API para enviar mensajes al teléfono mediante el servicio AWS SNS
Cree AWS Lambda y API gateway para POST datos de formularios e insértelos en la tabla de DynamoDb
Cree AWS Lambda y API Gateway para leer datos de la tabla Dynamodb
Trabajo final del formulario de registro de usuario
Crear tabla de DynamoDB
Los datos ingresados se almacenarán en la tabla DynamodDB. Usaremos la puerta de enlace API para compartir los datos ingresados con AWS Lambda y, posteriormente, AWS Lambda agregará los detalles en DynamoDB.
Puede utilizar los siguientes detalles para crear la tabla DynamodDB en la consola de AWS. Primero, vaya a AWS Service y haga clic enDynamoDB. Hacer clicTable para crear la tabla como se muestra a continuación -
Puede utilizar el ARN para crear una política para que DynamoDB se utilice con AWS Lambda.
Vaya a IAM y seleccione Policies. Hacer clicCreate policy, elija el servicio como DynamodDB como se muestra a continuación -
Hacer clic All DynamoDBacciones como se muestra arriba. Elija el recurso e ingrese el ARN para la tabla como se muestra a continuación:
Ahora, haga clic en Add Como se muestra abajo.
Si hace clic en Review policy botón al final de la pantalla, puede ver la siguiente ventana:
Ingrese el nombre de la política y haga clic en Create policybotón al final de la página. Ahora, necesitamos crear un rol para usar con Lambda. Necesitamos permisos para DynamoDB, APIGateway y Lambda.
Vaya a los servicios de AWS y seleccione IAM. Seleccione Roles en el lado izquierdo y agregue los roles requeridos.
Ingrese el nombre del rol y haga clic en Create role. El rol creado esroleforlambdaexample.
Crear formulario para registro de usuario
Aquí está la pantalla del formulario de registro de usuario para ingresar y leer los datos de la tabla dynamodb.
Cree AWS Lambda y API Gateway para enviar mensajes OTP al teléfono mediante el servicio SNS
Si ve el formulario de registro de usuario, hay un botón validate phone. Se supone que el usuario debe ingresar el número de teléfono y hacer clic envalidate phone para validar el número de teléfono.
Para este propósito:
Cuando un usuario hace clic en este botón, se llama al método de publicación de la puerta de enlace de la API que contiene los detalles del teléfono y se activa internamente AWS Lambda.
Luego, AWS Lambda envíaOTP al número de teléfono ingresado mediante el servicio AWS SNS.
El usuario recibe la OTP y debe ingresar este número de OTP.
El cuadro de texto para ingresar OTP aparecerá cuando se ingrese el número de teléfono y validate phone se hace clic en el botón.
La OTP recibida de AWS Lambda y la OTP ingresada por el usuario deben coincidir para permitir que el usuario envíe el formulario de registro de usuario.
Aquí se muestra un diagrama de bloques simple que explica el funcionamiento de la validación telefónica:
La función AWS Lambda creada es la que se muestra aquí:
El código AWS Lambda correspondiente es el que se indica a continuación:
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);
}
});
};Tenga en cuenta que estamos utilizando el servicio SNS para enviar el código OTP. Este código se utiliza para validar el número de móvil ingresado por el usuario en el formulario de registro de usuario. La puerta de enlace API creada para la validación del teléfono anterior es la siguiente:
La función Lambda dada es phonevalidationexample. Aquí tomamos los detalles del teléfono móvil para usarlos dentro de AWS Lambda. Luego, AWS Lambda enviará el código OTP al número de móvil proporcionado.
Cree AWS Lambda y API Gateway para POST datos de formularios e insértelos en la tabla DynamoDB
Para el formulario de registro de usuario, todos los campos son obligatorios. Se realiza una llamada AJAX en la que los datos ingresados en el formulario se publican en la URL de API Gateway.
Aquí se muestra un diagrama de bloques simple que explica el funcionamiento del botón enviar:
Una vez que se completa el formulario, el botón de envío llamará a la puerta de enlace API que activará AWS Lambda. AWS Lambda obtendrá los detalles del formulario del evento o de la API Gateway y los datos se insertarán en la tabla DynamodDB.
Comprendamos la creación de API Gateway y AWS Lambda.
Primero, vaya a los servicios de AWS y haga clic en Lambda. La función Lambda creada es como se muestra aquí:
Ahora, para crear una puerta de enlace API, vaya al servicio AWS y seleccione API Gateway. Haga clic enCreate API botón que se muestra a continuación.
Introducir el API name y haga clic en Create API botón para agregar la API.
Ahora, se crea una API llamada como registeruser. Seleccione la API y haga clic enActions desplegable para crear Resource.
Hacer clic Create Resource. Ahora, agreguemos elPOSTmétodo. Para ello, haga clic en los recursos creados en el lado izquierdo y desdeActions selección desplegable create method. Esto mostrará el menú desplegable como se muestra a continuación:
Seleccione el método POST y agregue la función Lambda que creamos anteriormente.
Hacer clic Savepara agregar el método. Para enviar los detalles del formulario a la función Lambdalambdaexample necesitamos agregar el Integration Request como se muestra a continuación -
Para publicar los detalles del formulario, deberá hacer clic en Integration Request. Mostrará los detalles a continuación.
Hacer clic Body Mapping Templates para agregar los campos del formulario que se publicarán.
A continuación, haga clic en Add mapping templatee ingrese el tipo de contenido. Aquí, hemos agregadoapplication/jsoncomo el tipo de contenido. Haga clic en él y aquí debe ingresar el campo en formato json como se muestra a continuación:
Ahora, haga clic en el Save e implemente la API como se muestra a continuación:
Aquí está la API creada para POST que se utilizará dentro de nuestro archivo .html. Tenga en cuenta que debemos habilitar CORS para el recurso creado. Utilizará la URL de la puerta de enlace de la API para realizar una llamada ajax, por lo que CORS debe estar habilitado.
Seleccione los métodos en los que desea habilitar el CORS. Haga clic enEnable CORS and replace existing CORS headers.
Muestra la pantalla de confirmación de la siguiente manera:
Hacer clic Yes, replace existing values para habilitar CORS.
El código de AWS Lambda para POST API Gateway se muestra aquí:
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);
}
});
}El parámetro de evento en el controlador de AWS Lambda tendrá todos los detalles que se agregaron anteriormente en la solicitud de integración POST. Los detalles del evento se agregan a la tabla DynamodDB como se muestra en el código.
Ahora, necesitamos obtener los detalles del servicio de AWS-SDK como se muestra a continuación:
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);
}
});Cree AWS Lambda y API Gateway para leer datos de la tabla DynamodDB
Ahora, crearemos la función AWS Lambda para leer datos de la tabla DynamoDB. Activaremos APIGateway a la función AWS Lambda que enviará datos al formulario html.
La función AWS Lambda creada es la que se muestra a continuación:
El código AWS Lambda correspondiente es el siguiente:
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);
}
});
}Aquí, los datos se leen de la tabla de DynamoDB y se entregan a la devolución de llamada. Ahora, crearemos APIGateway y agregaremos la función AWS Lambda como disparador.
Agregaremos el método get a la API creada anteriormente.
La función Lambda agregada es lambdareaddataexample. Hacer clicSave para guardar el método e implementar la api.
Trabajo final del formulario de registro de usuario
La visualización final del formulario es como se muestra a continuación:
Ahora, ingrese los detalles como se muestra arriba. Tenga en cuenta que el botón enviar está desactivado. Se habilitará solo cuando se ingresen todos los detalles como se muestra:
Ahora, ingrese el número de teléfono móvil y haga clic en validate phonebotón. Mostrará el mensaje de alerta que dice“OTP is send to the mobile, please enter the OTP to continue”. La OTP enviada al número de móvil es la siguiente:
Ingrese la OTP y los detalles restantes y envíe el formulario.
Los datos en DynamoDB registeruser tabla después de enviar es como se muestra aquí -
Los detalles del código son los que se indican a continuación:
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();
});Hasta ahora, hemos realizado una llamada AJAX a la API creada y publicado los datos como se muestra arriba.
La llamada AJAX para agregar los datos a la tabla es la siguiente:
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();
}
});
}
});
});Tenga en cuenta que para leer los datos, se llama a una función, cuyo código se proporciona a continuación:
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);
}
});
}Cuando hace clic en el botón de validación de número de móvil, se llama al siguiente código y se envía el número de móvil:
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;
}
}