Lambda and API Gateway to create an HTTP endpoint that accepts POST requests with application/x-www-form-urlencoded payloads (such as from HTML forms). The function outputs HTML.
Passing a URL encoded body into a Lambda function.
An HTML form
Let's start with an HTML form:
<form method="POST" action="http://127.0.0.1/endpoint">
<input type="text" name="my-field" value="testing 1 2 3">
<input type="submit" value="Submit form">
</form>
This form looks like this:
Clicking Submit form makes an HTTP request:
POST /endpoint HTTP/1.1
Host: 127.0.0.1
Content-Type: application/x-www-form-urlencoded
Content-Length: 22
my-field=testing+1+2+3
an application receives the request for /endpoint and does something with it, such as creating a record in a database, and responds with HTML or a redirect.
A simple Lambda function
call the function in response to an HTTP request.
const AWS = require('aws-sdk');
const querystring = require('querystring');
// Set this to the region you upload the Lambda function to.
AWS.config.region = 'us-east-1';
exports.handler = function(evt, context, callback) {
// Our raw request body will be in evt.body.
const params = querystring.parse(evt.body);
// Our field from the request.
const my_field = params['my-field'];
// Generate HTML.
const html = `<!DOCTYPE html><p>You said: ` + my_field + `</p>`;
// Return HTML as the result.
callback(null, html);
};
exports.handler is the entry point when we trigger the function.
First parameter to the function is an Object called the event( evt).
Event contains the input to the Lambda function.
Incoming request so that the HTTP body is available on evt's bodyproperty.
form, evt.body is the URL encoded string my-field=testing+1+2+3.
Using the Node.js querystring package (part of the Node.js standard library), we parse the string into an object that looks like this:
{
"my-field": "testing 1 2 3"
}
string called html containing a minimal HTML document.
return results by passing a value as the second parameter to the callback function (the first parameter is to indicate an error)
Output is "<!DOCTYPE html><p>You said: testing 1 2 3</p>"
create an HTTP endpoint sitting in front of our Lambda function.
API Gateway receives an HTTP request, calls our Lambda function and retrieves its result, and then responds to the HTTP request using the Lambda function's result.
alter requests and responses. You can change request headers/body before they reach the Lambda function, and change response headers/body before they reach the client.
API Gateway both to accept and respond to the HTTP request, as well as to transform the request/response.
CREATE messageAPI
make the Lambda function accessible by an HTTP POST request. To do that, click Actions and choose Create Method.
configure the method.
Set Lambda Region to the region you created your function in. Then enter the name you gave the function
POST request and response take through API Gateway. We need to configure settings at three of the four steps.
Translating the request from application/x-www-form-urlencoded to JSON
The request comes in with a URL encoded body (
Content-Type: application/x-www-form-urlencoded).
Lambda expects input as JSON
Integration Request section we can configure how API Gateway makes a request to its integration
expand Body Mapping Templates. Click Add mapping template and enter
application/x-www-form-urlencoded.
Mapping Templates
{
"body": "$input.body"
}
template takes the raw request body, $input.body, and places it inside a JSON object on the body property.
Add Content-Type header to the response
configure the response sent to the client
Method Response section we can configure how API Gateway sends responses to clients.
Go back to Method Execution and go to Method Response. Expand HTTP Status 200:
We need to ensure we send a Content-Type header. We'll use this header to tell clients that the response is HTML.
Add Header and enter Content-Type.
Click Add Header and enter Content-Type. This means the response will include this header.
Remove application/json from under Response Body. We're not sending back JSON.
Translating the response from a JSON string to HTML
The response comes back from the Lambda function as a JSON string. Browsers won't recognize this string as HTML, so we need to translate it.
We'll set the Content-Type header we send to text/html. Then we'll set a template to translate the JSON string (containing HTML) response into plain HTML.
The Integration Response section lets us configure how we receive the response from the integration, our Lambda function.
Go back to Method Execution. This time go into Integration Response.
Expand Method response status 200, Header mappings, and Body Mapping Templates:
set the Content-Type header we send to text/html
set a template to translate the JSON string (containing HTML) response into plain HTML.
Integration Response section lets us configure how we receive the response from the integration
Method Execution - Integration Response.
Expand Method response status 200, Header mappings, and Body Mapping Templates:
Under Header Mappings click the edit button beside Content-Type.
Enter 'text/html' (the single quotes must be there) and click the checkmark:
Under Body Mapping Templates, remove application/json.
Click Add mapping template and enter text/html. This tells API Gateway to send a particular template when sending text/html. Enter this into the template editor:
$input.path('$')
$input.path() takes as its parameter a JSONPath expression.
$ as the parameter means to access the root object
Deploying the API
<html>
<h1>
</h1>
<p>Enter your order below</p>
<h1> Our Bagels Are The BEST</h1>
<form method="POST" action="https://ncxcchnka5.execute-api.us-east-1.amazonaws.com/prod">
<input type="text" name="my-field" value="">
<input type="submit" value="Submit form">
</form>
</html>
No comments:
Post a Comment