- Register an AWS account
Note: AWS has given a very details step by step guide. This is for my own note taking and reference
Create a New REST API
- Login to AWS management console, select "API Gateway" in the "Networking & Content Delivery" section.
- Click on "Get Started" button
- Select "New API" and enter "BeezRydes" in the "API name" field
- Select "Edge Optimized" in the "Endpoint Type" field.
- Click "Create API" button
Create a Cognito User Pools Authorizer
- Select "Authorizers in the left menu
- Select "Create New Authorizer" button
- Enter "BeezRydes" in the "Name" field
- Select "Cognito" for the "Type" field
- Enter "BeezPool" in the "Cognito User Pool" field
- Enter "Authorization" in the "Token Source" field
- Click on "Create" link
Verify your authorizer configuration
- Browse to the /ride.html, please refer to screenshot below. Copy the token.
- Back to the "Authorizers" page, click on the "Test" link
- Paste the authorization code into "Test Authorizer" page
- Click on the "Test" button, Response code: 200 us returned
Create a new resource and method
- Click on the "Resources" in the left menu
- Click on the "Actions" button, follow by "Create Resource" option
- Enter "ride" in the "Resource Name" field, the "Resource Path" is auto populated as "ride"
- Ensure the "Ensure API Gateway CORS" checkbox is checked
- Click on the "Create Resource" button
- Click on the "Actions" button, follow by "Create Method" option
- Select "POST" in the OPTIONS dropdown, click the checkmark afterwards.
- Select "Lambda Function" in the "Integration type" field
- Check the "Use Lambda Proxy integration" check box
- Enter the name of the function you created in the previous module, RequestUnicorn, for Lambda Function.
- Click on "Save" button
- Click on the "Method Request"
- Click on "Edit" icon next to the "Authorization" field
- Select "BeezRydes Cognito user pool authorize", follow by the checkmark
Deploy Your API
- Click on the "Actions" button, follow by "Deploy API" option
- Select "[New Stage]" in the "Deployment Stage" field.
- Enter "prod" in the "Stage name" field
- Click on the "Deploy" button
- Please take note of the "Invoke URL", "https://1g4tkvr1pj.execute-api.ap-southeast-1.amazonaws.com/prod"
Update the Website Config
- Open the config.js file in a text editor
- Update the invokeUrl setting under the api key in the config.js file.
window._config = {
cognito: {
userPoolId: 'XX-XXXXXXXXX-X_XXXXXXXXX', // e.g. us-east-2_uXboG5pAb
userPoolClientId: 'XXXXXXXXXXXXXXXXXXXXXXXXXX', // e.g. 25ddkmj4v6hfsfvruhpfi7n4hv
region: 'XX-XXXXXXXXX-X' // e.g. us-east-2
},
api: {
invokeUrl: 'https://1g4tkvr1pj.execute-api.ap-southeast-1.amazonaws.com/prod'
}
};- In the AWS Management Console, choose Services then select S3 under Storage.
- Navigate to the website bucket and then browse to the js key prefix.
- Upload the config.js file
Validate your implementation
- Visit /rides.html page, for example, "http://beez-firstname-lastname.s3-website-ap-southeast-1.amazonaws.com/signin.html"
- Sign in page is displayed. Login with the registered user in thee previous tutorial.
- Click on the map follow by "Request Unicorn" web service, the "Unicorn" will appear on the map as shown in the screenshot below
