Static Registration and Login Page with AWS S3

Static Registration and Login Page with AWS S3

1.     Introduction:

In this blog you'll configure Amazon Simple Storage Service (S3) to host the static resources for your web application. In subsequent modules, you'll add dynamic functionality to these pages using JavaScript to call remote RESTful APIs built with AWS Lambda and Amazon API Gateway.

2.     Create S3 Bucket:

·         Open S3 from Storage Service.

·         Create S3 Bucket.

·         All of your static web content including HTML, CSS, JavaScript, images and other files will be stored in Amazon S3.

·         Enter a unique name for your Bucket name.

·         If the entered name already exists than enter another name.

·         We can give the name by adding meaning to it by putting “– “.

·         Example: registration-login.

·         Now, Click on Create Button located on the left side.

·         Then Upload intended files in the bucket.

·         Now, Click on Upload located on the left side.

3.     Additional settings:

·         Uncheck to Add Public full access to the webpage, as here we are not taking any confidential details from them. But usually as per requirement check and uncheck it.

·         Now, In Permissions tag: Go in Bucket Policy to add below code.

·         In the confirmation modal that appears, type 'confirm', and then click Confirm.

·         Then Save the Bucket Policy by Clicking on the Save button located on the right side at the top.

·         Now in Properties tag Host Static Website Hosting.

·         In resource, add your bucket name instead of what I mention here.

4.     Static website hosting:

·         From the bucket detail page in the S3 console, choose the Properties tab.

·          Choose the Static website hosting card. Select Use this bucket to host a website and enter 1-register.html for the Index document.

·         Leave the other fields blank. Note the Endpoint URL at the top of the dialog before choosing Save.

·         You will use this URL throughout the rest of the workshop to view your web application.

·         From here on this URL will be referred to as your website's base URL.

·          Click Save to save your changes.

·         Now, Copy the Endpoint URL.

·         Paste it on your Browser to open Registration Page.

·         This is Registration Page what we have uploaded on the S3 bucket.

·         After filling details successfully SIGNUP.

·         That will direct you towards Login Page.

·         The data entered here will be stored in Dynamo DB which is the database of AWS cloud.

·         Using cookie in HTML file, if the user is already registered then by clicking on Login Here, user will directly have redirected to the login page.

·         The main use of the registration page is; Particular user can see only their data.

·         Using Ajax, API is called, Email Id and password are matched with the data registered in Dynamo DB.

·         After Successfully Logged in, the user will see the Raspberry Pi ID and the water Level of Tank.

·         The data which is Displayed are fetched from Database and at reload time, the data might be updated as the database update.

5.     Flow Diagram:

6.     Conclusion:

·         After completing these implementation steps you should be able to access your static website by visiting the website endpoint URL for your S3 bucket.

·         Usually people are getting stuck where they have to host their webpage or say website. Whereas AWS service S3 under Storage is useful to host a static website.

·         But you might think that how all the entered data are stored in DynamoDB through Lambda Function, then you need to direct to the next blog for further.