Aws-lambda-additional-example
AWS Lambda –追加の例
これまで、AWS LambdaとAWSサービスの連携を見てきました。 その知識に基づいて、単純なユーザー登録フォームを作成し、AWS LambdaへのAPIゲートウェイを使用してデータを投稿しましょう。 AWS Lambdaは、イベントまたはAPIゲートウェイトリガーからデータを取得し、それらの詳細をDynamoDBテーブルに追加します。
例
私たちは例を考えて、それに対して次の機能を実行しましょう-
- DynamoDBテーブルを作成する
- ユーザー登録用のフォームを作成する
- AWS SNSサービスを使用してメッセージを電話に送信するAWS LambdaとAPIゲートウェイを作成する
- フォームデータをPOSTしてDynamoDbテーブルに挿入するAWS LambdaとAPIゲートウェイを作成する
- Dynamodbテーブルからデータを読み取るためのAWS LambdaとAPIゲートウェイを作成する
- ユーザー登録フォームの最終作業
DynamoDBテーブルを作成する
入力したデータはDynamodDBテーブルに保存されます。 APIゲートウェイを使用して入力されたデータをAWS Lambdaと共有し、AWS Lambdaは詳細をDynamoDBに追加します。
次の詳細を使用して、AWSコンソールでDynamodDBテーブルを作成できます。 最初に、AWSサービスに移動し、 DynamoDB をクリックします。 Table をクリックして、以下に示すようにテーブルを作成します-
ARNを使用して、AWS Lambdaで使用するDynamoDBのポリシーを作成できます。
IAMに移動し、ポリシー*を選択します。 *Create policy をクリックし、以下に示すようにDynamodDBとしてサービスを選択します-
上記の[*すべてのDynamoDB *アクション]をクリックします。 リソースを選択し、以下に示すようにテーブルのARNを入力します-
次に、以下に示すように*追加*をクリックします。
画面の最後にある Review policy ボタンをクリックすると、次のウィンドウが表示されます-
ポリシーの名前を入力し、ページの最後にある[*ポリシーの作成]ボタンをクリックします。 ここで、Lambdaで使用するロールを作成する必要があります。 DynamoDB、APIGateway、およびLambdaのアクセス許可が必要です。
AWSサービスに移動し、IAMを選択します。 左側から[役割]を選択し、必要な役割を追加します。
役割名を入力し、[役割の作成]をクリックします。 作成されるロールは *roleforlambdaexample です。
ユーザー登録用のフォームを作成する
入力して、dynamodbテーブルからデータを読み取るためのユーザー登録フォームの表示を次に示します。
AWS LambdaとAPI Gatewayを作成して、SNSサービスを使用して電話にOTPメッセージを送信します
ユーザー登録フォームが表示されている場合は、 validate phone ボタンがあります。 ユーザーは、電話番号を入力し、[電話番号の検証]ボタンをクリックして電話番号を検証することを想定しています。
この目的のために-
ユーザーがこのボタンをクリックすると、電話の詳細を含むAPIゲートウェイのpostメソッドが呼び出され、AWS Lambdaが内部的にトリガーされます。
次に、AWS Lambdaは、AWS SNSサービスを使用して入力された電話番号にOTPを送信します。
ユーザーはOTPを受け取り、このOTP番号を入力する必要があります。
OTPを入力するためのテキストボックスは、電話番号を入力し、[電話の検証]ボタンをクリックすると表示されます。
ユーザーがユーザー登録フォームを送信できるようにするには、AWS Lambdaから受け取ったOTPとユーザーが入力したOTPが一致する必要があります。
電話検証の動作を説明する簡単なブロック図はここに示されています-
作成されたAWS Lambda関数は次のとおりです-
対応するAWS Lambdaコードは以下のとおりです-
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);
}
});
};SNSサービスを使用してOTPコードを送信していることに注意してください。 このコードは、ユーザーがユーザー登録フォームに入力した携帯電話番号を検証するために使用されます。 上記の電話検証用に作成されたAPIゲートウェイは次のとおりです-
指定されたLambda関数は phonevalidationexample です。 ここで携帯電話の詳細を取得して、AWS Lambda内で使用します。 次に、AWS LambdaはOTPコードを指定された携帯電話番号に送信します。
AWS LambdaとAPI Gatewayを作成してフォームデータをPOSTし、DynamoDBテーブルに挿入する
ユーザー登録フォームの場合、すべてのフィールドは必須です。 フォームに入力されたデータがAPI Gateway URLにポストされるAJAX呼び出しが行われます。
送信ボタンの動作を説明する簡単なブロック図がここに示されています-
フォームに入力すると、送信ボタンは、AWS LambdaをトリガーするAPIゲートウェイを呼び出します。 AWS LambdaはイベントまたはAPI Gatewayからフォームの詳細を取得し、データはDynamodDBテーブルに挿入されます。
API GatewayとAWS Lambdaの作成について理解しましょう。
まず、AWSサービスに移動し、Lambdaをクリックします。 作成されたラムダ関数はここに示されているとおりです-
ここで、APIゲートウェイを作成するには、AWSサービスに移動し、 API Gateway を選択します。 以下に示す Create API ボタンをクリックします。
- API名*を入力し、 Create API ボタンをクリックしてAPIを追加します。
これで、 registeruser と呼ばれるAPIが作成されます。 APIを選択し、*アクション*ドロップダウンをクリックして*リソース*を作成します。
[リソースの作成]をクリックします。 次に、 POST メソッドを追加しましょう。 このためには、左側で作成されたリソースをクリックし、*アクション*ドロップダウンから*メソッドの作成*を選択します。 これは、以下に示すようにドロップダウンを表示します-
POSTメソッドを選択し、上記で作成したLambda関数を追加します。
[保存]ボタンをクリックして、メソッドを追加します。 フォームの詳細をLambda関数 lambdaexample に送信するには、以下に示すように Integration Request を追加する必要があります-
フォームの詳細を投稿するには、*統合リクエスト*をクリックする必要があります。 詳細が下に表示されます。
*Body Mapping Templates* をクリックして、投稿するフォームフィールドを追加します。次に、[マッピングテンプレートの追加]をクリックして、コンテンツタイプを入力します。 ここでは、コンテンツタイプとして application/json を追加しました。 それをクリックして、ここで以下に示すようにフィールドをjson形式で入力する必要があります-
今、*保存*ボタンをクリックして、以下に示すようにAPIをデプロイします-
以下は、lファイル内で使用するPOST用に作成されたAPIです。 作成されたリソースのCORSを有効にする必要があることに注意してください。 APIゲートウェイURLを使用してajax呼び出しを行うため、CORSを有効にする必要があります。
CORSを有効にするメソッドを選択します。 [* CORSを有効にして既存のCORSヘッダーを置き換える*]をクリックします。
次のように確認画面が表示されます-
[はい、既存の値を置き換えます] *をクリックして、CORSを有効にします。
POST API GatewayのAWS Lambdaコードは次のとおりです-
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);
}
});
}AWS Lambdaハンドラーのイベントパラメーターには、POST統合リクエストで以前に追加されたすべての詳細が含まれます。 コードからわかるように、イベントの詳細がDynamodDBテーブルに追加されます。
次に、以下に示すようにAWS-SDKからサービスの詳細を取得する必要があります-
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);
}
});DynamodDBテーブルからデータを読み取るためのAWS LambdaとAPI Gatewayを作成する
ここで、DynamoDBテーブルからデータを読み取るAWS Lambda関数を作成します。 データをhtmlフォームに送信するAWS Lambda関数に対してAPIGatewayをトリガーします。
作成されたAWS Lambda関数は以下のとおりです-
対応するAWS Lambdaコードは次のとおりです-
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);
}
});
}ここで、データはDynamoDBテーブルから読み取られ、コールバックに渡されます。 ここで、APIGatewayを作成し、AWS Lambda関数をトリガーとして追加します。
前に作成したAPIにgetメソッドを追加します。
追加されたLambda関数は lambdareaddataexample です。 [保存]をクリックしてメソッドを保存し、APIをデプロイします。
ユーザー登録フォームの最終作業
フォームの最終的な表示は以下のとおりです-
次に、上記のように詳細を入力します。 送信ボタンが無効になっていることに注意してください。 それは示されているようにすべての詳細が入力された場合にのみ有効になります-
ここで、携帯電話番号を入力し、*電話番号の検証*ボタンをクリックします。 *「OTPがモバイルに送信されています。続行するにはOTPを入力してください」*という警告メッセージが表示されます。 モバイル番号に送信されるOTPは次のとおりです-
OTPと残りの詳細を入力し、フォームを送信します。
送信後のDynamoDB registeruser テーブルのデータは次のとおりです-
コードの詳細は以下のとおりです-
- 例1l *
<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")l('');
$("#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();
});これまで、APIのAJAX呼び出しを実行し、上記のようにデータを作成して投稿しました。
テーブルにデータを追加するためのAJAX呼び出しは次のとおりです-
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();
}
});
}
});
});データを読み取るために、以下のコードが与えられている関数が呼び出されることに注意してください-
function getdata() {
var a = 0;
$.ajax({
type:'GET',
url:posturl,
success: function(data) {
$("#displaydetails")l('');
$("#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);
}
});
}あなたが携帯電話番号検証ボタンをクリックすると、次のコードが呼び出され、携帯電話番号を送信します-
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;
}
}
