400-638-8808
|
微信公眾號




穩(wěn)定可靠 永不間斷

海外收發(fā) 暢通無阻

協(xié)同辦公 資源管理

超大郵件 超級功能

智能反垃圾郵件技術(shù)
易管理 免維護

到目前為止,我們已經(jīng)看到了 AWS Lambda 與 AWS 服務的協(xié)同工作;谶@些知識,讓我們創(chuàng)建一個簡單的用戶注冊表并使用 API 網(wǎng)關(guān)將數(shù)據(jù)發(fā)布到 AWS Lambda。 AWS Lambda 將從事件或 API 網(wǎng)關(guān)觸發(fā)器中獲取數(shù)據(jù),并將這些詳細信息添加到 DynamoDB 表中。
讓我們考慮一個示例并對其執(zhí)行以下功能-
創(chuàng)建 DynamoDB 表創(chuàng)建用戶注冊表單創(chuàng)建 AWS Lambda 和 API 網(wǎng)關(guān)以使用 AWS SNS 服務向電話發(fā)送消息創(chuàng)建 AWS Lambda 和 API 網(wǎng)關(guān)以 POST 表單數(shù)據(jù)并插入到 DynamoDb 表中創(chuàng)建 AWS Lambda 和 API 網(wǎng)關(guān)以從 Dynamodb 表中讀取數(shù)據(jù)用戶注冊表的最后處理
輸入的數(shù)據(jù)將存儲在 DynamodDB 表中。我們將使用 API 網(wǎng)關(guān)與 AWS Lambda 共享輸入的數(shù)據(jù),稍后 AWS Lambda 將在 DynamoDB 中添加詳細信息。
您可以使用以下詳細信息在 AWS 控制臺中創(chuàng)建 DynamodDB 表。首先,轉(zhuǎn)到 AWS 服務并單擊 DynamoDB。單擊 表格以創(chuàng)建如下所示的表格-


您可以使用 ARN 為要與 AWS Lambda 一起使用的 DynamoDB 創(chuàng)建策略。
轉(zhuǎn)到 IAM 并選擇 政策。點擊 創(chuàng)建策略,選擇服務作為DynamodDB,如下圖所示-

單擊 所有 DynamoDB 操作,如上所示。選擇資源并輸入表的 ARN,如下所示-

現(xiàn)在,點擊 添加,如下所示。

如果您點擊屏幕末尾的 查看政策按鈕,您可以看到以下窗口-

輸入策略名稱,然后單擊頁面末尾的 創(chuàng)建策略按鈕,F(xiàn)在,我們需要創(chuàng)建與 Lambda 一起使用的角色。我們需要 DynamoDB、APIGateway 和 Lambda 的權(quán)限。
轉(zhuǎn)到 AWS 服務并選擇 IAM。從左側(cè)選擇角色并添加所需的角色。

輸入角色名稱并點擊 創(chuàng)建角色。創(chuàng)建的角色是 roleforlambdaexample。
這是用戶注冊表的顯示,用于輸入和讀取 dynamodb 表中的數(shù)據(jù)。

如果您看到用戶注冊表單,則有一個按鈕 驗證電話。假設用戶輸入電話號碼并點擊 驗證電話按鈕以驗證電話號碼。
為此目的-
當用戶單擊此按鈕時,將調(diào)用包含電話詳細信息的 API 網(wǎng)關(guān) post 方法并在內(nèi)部觸發(fā) AWS Lambda。
然后,AWS Lambda 將 OTP 發(fā)送到使用 AWS SNS 服務輸入的電話號碼。
用戶收到 OTP 后必須輸入此 OTP 號碼。
當輸入電話號碼并點擊 驗證電話按鈕時,將出現(xiàn)輸入OTP的文本框。
從 AWS Lambda 收到的 OTP 和用戶輸入的 OTP 必須匹配,以允許用戶提交用戶注冊表。
此處顯示了解釋電話驗證工作的簡單框圖-

創(chuàng)建的 AWS Lambda 函數(shù)如下所示-

相應的 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 服務發(fā)送 OTP 代碼。此代碼用于驗證用戶在用戶注冊表中輸入的手機號碼。為上述電話驗證創(chuàng)建的 API 網(wǎng)關(guān)如下-


給出的 Lambda 函數(shù)是 phonevalidationexample。我們將此處的手機詳細信息用于 AWS Lambda 中。然后,AWS Lambda 會將 OTP 代碼發(fā)送到給定的手機號碼。
對于用戶注冊表,所有字段都是必填的。進行了一次 AJAX 調(diào)用,其中將表單中輸入的數(shù)據(jù)發(fā)布到 API 網(wǎng)關(guān) URL。
一個簡單的框圖解釋了提交按鈕的工作原理-

填寫表單后,提交按鈕將調(diào)用將觸發(fā) AWS Lambda 的 API 網(wǎng)關(guān)。 AWS Lambda 將從事件或 API 網(wǎng)關(guān)獲取表單的詳細信息,并將數(shù)據(jù)插入到 DynamodDB 表中。
讓我們了解一下 API Gateway 和 AWS Lambda 的創(chuàng)建。
首先,轉(zhuǎn)到 AWS 服務并單擊 Lambda。創(chuàng)建的 Lambda 函數(shù)如下所示-

現(xiàn)在,要創(chuàng)建 API 網(wǎng)關(guān),請轉(zhuǎn)到 AWS 服務并選擇 API 網(wǎng)關(guān)。點擊下方顯示的 創(chuàng)建 API 按鈕。

輸入 API 名稱并點擊 創(chuàng)建API按鈕添加API。

現(xiàn)在,創(chuàng)建了一個名為 registeruser 的 API。選擇 API 并點擊 Actions 下拉菜單以創(chuàng)建 Resource。

點擊 創(chuàng)建資源。現(xiàn)在,讓我們添加 POST 方法。為此,單擊左側(cè)創(chuàng)建的資源,然后從 Actions 下拉列表中選擇 create method。這將顯示如下所示的下拉列表-

選擇 POST 方法并添加我們在上面創(chuàng)建的 Lambda 函數(shù)。

點擊 保存按鈕添加方法。要將表單詳細信息發(fā)送到 Lambda 函數(shù) lambdaexample,我們需要添加 Integration Request,如下所示-

要發(fā)布表單詳細信息,您必須點擊 集成請求。它將顯示以下詳細信息。

點擊 正文映射模板以添加要發(fā)布的表單字段。

接下來,點擊 添加映射模板并輸入內(nèi)容類型。在這里,我們添加了 application/json 作為內(nèi)容類型。單擊它,您需要在此處以 json 格式輸入該字段,如下所示-

現(xiàn)在,單擊 保存按鈕并部署 API,如下所示-

這是為 POST 創(chuàng)建的 API,它將在我們的 .html 文件中使用。請注意,我們需要為創(chuàng)建的資源啟用 CORS。將使用 api 網(wǎng)關(guān) url 進行 ajax 調(diào)用,因此必須啟用 CORS。
選擇要啟用 CORS 的方法。點擊 啟用 CORS 并替換現(xiàn)有的 CORS 標頭。

它顯示確認屏幕如下-

點擊 是,替換現(xiàn)有值以啟用 CORS。

POST API 網(wǎng)關(guān)的 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 處理程序中的事件參數(shù)將包含之前在 POST 集成請求中添加的所有詳細信息。來自事件的詳細信息將添加到 DynamodDB 表中,如代碼所示。
現(xiàn)在,我們需要從 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);
}
});
現(xiàn)在,我們將創(chuàng)建 AWS Lambda 函數(shù)以從 DynamoDB 表中讀取數(shù)據(jù)。我們將觸發(fā) APIGateway 到 AWS Lambda 函數(shù),該函數(shù)將數(shù)據(jù)發(fā)送到 html 表單。
創(chuàng)建的 AWS Lambda 函數(shù)如下圖所示-

對應的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 表中讀取數(shù)據(jù)并提供給回調(diào)。現(xiàn)在,我們將創(chuàng)建 APIGateway 并添加 AWS Lambda 函數(shù)作為觸發(fā)器。
我們將在之前創(chuàng)建的 API 中添加 get 方法。

添加的 Lambda 函數(shù)是 lambdareaddataexample。點擊 保存保存e 方法并部署 api。
表格最終顯示如下圖-

現(xiàn)在,輸入如上所示的詳細信息。請注意,提交按鈕已禁用。只有在輸入所有詳細信息時才會啟用它-

現(xiàn)在,輸入手機號碼并點擊 驗證電話按鈕。它會顯示提示信息,提示 "OTP 正在發(fā)送到手機,請輸入 OTP 以繼續(xù)"。發(fā)送到手機號碼的 OTP 如下-

輸入一次性密碼和其他詳細信息并提交表單。

提交后DynamoDB registeruser表中的數(shù)據(jù)如下所示-

代碼詳情如下-
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();
});
到目前為止,我們已經(jīng)對創(chuàng)建的 API 進行了 AJAX 調(diào)用,并發(fā)布了如上所示的數(shù)據(jù)。
將數(shù)據(jù)添加到表中的 AJAX 調(diào)用如下-
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();
}
});
}
});
});
請注意,要讀取數(shù)據(jù),會調(diào)用一個函數(shù),其代碼如下-
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);
}
});
}
當您單擊手機號碼驗證按鈕時,將調(diào)用以下代碼并發(fā)送手機號碼-
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;
}
}
作為AWS頂級代理商,選擇天.下.數(shù).據(jù)的優(yōu)勢
1、專屬客服協(xié)助注冊AWS,或提供注冊好的賬號直接使用
2、支持收U等多幣種支付代付,無額外服務費用
3、AWS多種產(chǎn)品類型,更高產(chǎn)品租賃權(quán)限
4、針對大客戶,AWS專屬折扣優(yōu)惠
5、7x24小時專屬客服,在線解答各種疑問
詳詢電話40 0-63 8-88 08 官網(wǎng):http://m.51huadong.com/2023/aws.asp
產(chǎn)品與服務
香港服務器 香港高防服務器 美國服務器 韓國服務器 新加坡服務器 日本服務器 臺灣服務器云服務器
香港云主機 美國云主機 韓國云主機 新加坡云主機 臺灣云主機 日本云主機 德國云主機 全球云主機高防專線
海外高防IP 海外無限防御 SSL證書 高防CDN套餐 全球節(jié)點定制 全球?qū)>GPLC關(guān)于我們
關(guān)于天下數(shù)據(jù) 數(shù)據(jù)招商加盟 天下數(shù)據(jù)合作伙伴 天下數(shù)據(jù)團隊建設 加入天下數(shù)據(jù) 媒體報道 榮譽資質(zhì) 付款方式關(guān)注我們
微信公眾賬號
新浪微博
天下數(shù)據(jù)手機站 關(guān)于天下數(shù)據(jù) 聯(lián)系我們 誠聘英才 付款方式 幫助中心 網(wǎng)站備案 解決方案 域名注冊 網(wǎng)站地圖
天下數(shù)據(jù)18年專注海外香港服務器、美國服務器、海外云主機、海外vps主機租用托管以及服務器解決方案-做天下最好的IDC服務商
《中華人民共和國增值電信業(yè)務經(jīng)營許可證》 ISP證:粵ICP備07026347號
朗信天下發(fā)展有限公司(控股)深圳市朗玥科技有限公司(運營)聯(lián)合版權(quán)
深圳總部:中國.深圳市南山區(qū)深圳國際創(chuàng)新谷6棟B座10層 香港總部:香港上環(huán)蘇杭街49-51號建安商業(yè)大廈7樓
7×24小時服務熱線:4006388808香港服務電話:+852 67031102
本網(wǎng)站的域名注冊業(yè)務代理北京新網(wǎng)數(shù)碼信息技術(shù)有限公司的產(chǎn)品