AWS Lambda – 額外示例

上一頁
下一頁

到目前為止，我們已經看到了 AWS Lambda 與 AWS 服務一起工作的情況。基於這些知識，讓我們建立一個簡單的使用者登錄檔單，並使用 API 閘道器將資料釋出到 AWS Lambda。AWS Lambda 將從事件或 API 閘道器觸發器獲取資料，並將這些詳細資訊新增到 DynamoDB 表中。

示例

讓我們考慮一個示例，並在其上執行以下功能：

  • 建立 DynamoDB 表

  • 建立使用者登錄檔單

  • 建立 AWS Lambda 和 API 閘道器以使用 AWS SNS 服務向手機發送訊息

  • 建立 AWS Lambda 和 API 閘道器以釋出表單資料並將其插入 DynamoDb 表中

  • 建立 AWS Lambda 和 API 閘道器以讀取 Dynamodb 表中的資料

  • 使用者登錄檔單的最終工作

建立 DynamoDB 表

輸入的資料將儲存在 DynamodDB 表中。我們將使用 API 閘道器來共享與 AWS Lambda 輸入的資料，然後 AWS Lambda 將在 DynamoDB 中新增詳細資訊。

您可以使用以下詳細資訊在 AWS 控制檯中建立 DynamodDB 表。首先，轉到 AWS 服務並點選 **DynamoDB**。點選 **表** 以建立表，如下所示：

Create DynamoDB Table

Table Data

您可以使用 ARN 為要與 AWS Lambda 一起使用的 DynamoDB 建立策略。

轉到 IAM 並選擇 **策略**。點選 **建立策略**，選擇服務為 DynamodDB，如下所示：

Select Policies

點選 **所有 DynamoDB** 操作，如上所示。選擇資源並輸入表的 ARN，如下所示：

All DynamoDB

現在，點選 **新增**，如下所示。

Click Add

如果您點選螢幕末尾的 **檢視策略** 按鈕，您將看到以下視窗：

Review Policy

輸入策略名稱，然後點選頁面末尾的 **建立策略** 按鈕。現在，我們需要建立要與 Lambda 一起使用的角色。我們需要 DynamoDB、APIGateway 和 Lambda 的許可權。

轉到 AWS 服務並選擇 IAM。從左側選擇角色並新增所需的角色。

Create Policy Button

輸入角色名稱，然後點選 **建立角色**。建立的角色是 **roleforlambdaexample**。

建立使用者登錄檔單

以下是使用者登錄檔單的顯示，用於輸入和從 dynamodb 表中讀取資料。

User Registration

建立 AWS Lambda 和 API 閘道器以使用 SNS 服務向手機發送 OTP 訊息

如果您看到使用者登錄檔單，則有一個按鈕 **驗證手機**。使用者應該輸入電話號碼，然後點選 **驗證手機** 按鈕以驗證電話號碼。

為此：

當用戶點選此按鈕時，將呼叫包含電話詳細資訊的 API 閘道器 POST 方法，並在內部觸發 AWS Lambda。

然後，AWS Lambda 使用 AWS SNS 服務將 OTP 傳送到輸入的電話號碼。

使用者接收 OTP 並必須輸入此 OTP 號碼。

輸入 OTP 的文字框將在輸入電話號碼並點選 **驗證手機** 按鈕後出現。

從 AWS Lambda 收到的 OTP 和使用者輸入的 OTP 必須匹配，才能允許使用者提交使用者登錄檔單。

這裡顯示了一個簡單的框圖，說明了電話驗證的工作原理：

Sns Service

建立的 AWS Lambda 函式如下所示：

Lambda Function Created

相應的 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 閘道器如下：

Default Timeout

Application Json

給定的 Lambda 函式為 **phonevalidationexample**。我們在這裡獲取手機詳細資訊以在 AWS Lambda 內部使用。然後，AWS Lambda 將 OTP 程式碼傳送到給定的手機號碼。

建立 AWS Lambda 和 API 閘道器以釋出表單資料並將其插入 DynamoDB 表中

對於使用者登錄檔單，所有欄位都是必填的。有一個 AJAX 呼叫，其中表單中輸入的資料釋出到 API 閘道器 URL。

這裡顯示了一個簡單的框圖，說明了提交按鈕的工作原理：

Block Diagram Dynamodb Table

填寫表單後，提交按鈕將呼叫 API 閘道器，這將觸發 AWS Lambda。AWS Lambda 將從事件或 API 閘道器獲取表單的詳細資訊，並將資料插入 DynamodDB 表中。

讓我們瞭解 API 閘道器和 AWS Lambda 的建立。

首先，轉到 AWS 服務並點選 Lambda。建立的 Lambda 函式如下所示：

Lambda Example

現在，要建立 API 閘道器，請轉到 AWS 服務並選擇 **API 閘道器**。點選下面顯示的 **建立 API** 按鈕。

Create Api

輸入 **API 名稱**，然後點選 **建立 API** 按鈕以新增 API。

Create Api Button

現在，建立了一個名為 **registeruser** 的 API。選擇 API 並點選 **操作** 下拉選單以建立 **資源**。

New Child Resource

點選 **建立資源**。現在，讓我們新增 **POST** 方法。為此，點選左側建立的資源，然後從 **操作** 下拉選單中選擇 **建立方法**。這將顯示如下所示的下拉選單：

Create Method

選擇 POST 方法並新增我們上面建立的 Lambda 函式。

Post Setup

點選 **儲存** 按鈕以新增方法。要將表單詳細資訊傳送到 Lambda 函式 **lambdaexample**，我們需要新增 **整合請求**，如下所示：

Integration Request

要釋出表單詳細資訊，您需要點選 **整合請求**。它將顯示以下詳細資訊。

Add User Post

點選 **主體對映模板** 以新增要釋出的表單欄位。

Body Template

接下來，點選 **新增對映模板** 並輸入內容型別。在這裡，我們添加了 **application/json** 作為內容型別。點選它，在這裡您需要以 json 格式輸入欄位，如下所示：

Add Mapping Template

現在，點選 **儲存** 按鈕並部署 API，如下所示：

Deploy Save Button

這是為 POST 建立的 API，將在我們的 .html 檔案中使用。請注意，我們需要為建立的資源啟用 CORS。將使用 api 閘道器 url 進行 ajax 呼叫，因此必須啟用 CORS。

選擇要在其上啟用 CORS 的方法。點選 **啟用 CORS 並替換現有 CORS 標頭**。

Core Header

它將顯示如下所示的確認螢幕：

Confirmation Screen

點選 **是，替換現有值** 以啟用 CORS。

Yes Replaced

這裡顯示了 POST API 閘道器的 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 處理程式中的 event 引數將包含之前在 POST 整合請求中新增的所有詳細資訊。來自 event 的詳細資訊將新增到 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);
   }
});

建立 AWS Lambda 和 API 閘道器以從 DynamodDB 表讀取資料

現在，我們將建立 AWS Lambda 函式以從 DynamoDB 表讀取資料。我們將觸發 APIGateway 到 AWS Lambda 函式，該函式將資料傳送到 html 表單。

建立的 AWS Lambda 函式如下所示：

Read Data

相應的 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 方法。

Api Created

新增的 Lambda 函式是 **lambdareaddataexample**。點選 **儲存** 以儲存方法並部署 api。

使用者登錄檔單的最終工作

表單的最終顯示如下所示：

Final Working

現在，輸入如上所示的詳細資訊。請注意，提交按鈕被停用。只有在輸入所有詳細資訊後才會啟用它，如下所示：

Enter Details

現在，輸入手機號碼並點選 **驗證手機** 按鈕。它將顯示一條警報訊息，提示 **“OTP 已傳送到手機，請輸入 OTP 以繼續”**。傳送到手機號碼的 OTP 如下：

Otp

輸入 OTP 和其餘詳細資訊，然後提交表單。

Remaining Details

提交後，DynamoDB **registeruser** 表中的資料如下所示：

Register User

程式碼詳細資訊如下所示：

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();
});

到目前為止，我們已經對建立的 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").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);
      }
   });
}

當您點選手機號碼驗證按鈕時，將呼叫以下程式碼併發送手機號碼：

 
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;
   }
}
列印頁面
上一頁
下一頁
廣告

© . All rights reserved.