Displaying private HTML file from AWS S3 - html

I'm currently hosting a static website on AWS S3. I have parts of the website that I only want AWS Cognito authenticated users to access. These parts of the S3 bucket are restricted to certain roles. As I understand it, once a Cognito user has received their temporary AWS credentials, I need to use the S3 sdk to load the restricted object (index.html) from S3 and display it in the webpage. Is this the correct approach, and once I have the object back from S3, how do I go about loading it into the webpage? Thank you!

You will need application logic that runs in the back-end to control your security and to store/retrieve data. While much of this can be done from the browser, it is open to hacking. Therefore, you need your access control logic in the back-end.
Option 1: API Gateway and Lambda functions
You can have a static web page served out of Amazon S3, which makes API calls to Lambda functions via API Gateway. This is known as the serverless model.
Here's a sample diagram from the Serverless Code website:
Basically, Lambda functions receive the request, determine whether the user is authorised, determines what they would receive back (eg a pre-signed URL to a different page) and sends it back to the web page. The benefit of this design is that it does not require any servers.
Option 2: Amazon EC2 servers
Alternatively, you can run Amazon EC2 instances fronted by an Elastic Load Balancer. This is traditional application design allowing you to use many different frameworks. However, there is an on-going cost for the servers even when nobody is using your application.

Related

How to get user data in AWS?

I'm trying to make a simple (React) website where a user signs in and it gets their data from a MySQL database and displays it in a table on the website. The flow is like this:
Home Page -> Sign In -> App
I want to show the user's data that is stored in a AWS RDS (MySQL) when they log into the App.
I have the domain and static hosting set up. I have a user pool set up in AWS Cognito. I set up an API Gateway with authorization and connected a basic lambda function to it. When the user signs in the are redirected to the App page with a JWT token in the header. I don't know where to go from here.
This is what I'm thinking:
User logs in, redirected to callback URL with JWT token in header.
Get the JWT token, decode it and get the user email
In my Lambda function, connect to the database instance (AWS RDS)
To query user data, select user data from a table whose name is the
users email
I don't know how to do any of the above though (apart from SQL queries). Are these even the correct steps?
How do I get the JWT token in my code? From what I know it has to be passed with every API call? I have my invoke URL from API Gateway, how do I send a request with the JWT token?
What would the database instance look like? Would it be a collection of tables that each represent a user?
How do I do this with and without AWS Amplify?
I've been trying for a few weeks but there's so much info and I feel like I'm over complicating something that is very simple to implement.
Another approach is to use the AWS SDK for JavaScript to query data on the backend and a React front end that displays the data.
This use case is located in the AWS Code Lib here:
Create an Aurora Serverless work item tracker
This example shows how to use the AWS SDK for JavaScript (v3) to create a web application that tracks work items in an Amazon Aurora database and emails reports by using Amazon Simple Email Service (Amazon SES). This example uses a front end built with React.js to interact with an Express Node.js backend.
Services used in this example
AWS Services used in this example:
Aurora
Amazon RDS
Amazon RDS Data Service
Amazon SES
Note that this example focuses on the AWS SDK, such as the RDSDataClient) and not stuff like JWT tokens, Amplify etc

How to test WebHooks without an on-premise external system?

I'm trying to teach myself about integrating systems via WebHooks.
In a free/hosted GIS system, I can create a WebHook that would, in theory, POST a JSON object to an external system.
The problem is, I don't have an external system that's available right now for for receiving the POST.
I think I need some sort of publicly available sample server that would:
Receive the POST requests
Do something with the requests (ie. create some sort of record)
...so that I could determine if the WebHook worked correctly or not.
How can I test my WebHooks without having an on-premise external system?
I've poked around websites like Postman Echo and Amazon Lambda. But to my untrained eye, it seems like they're not quite designed for what I need.
You could use any of these options depending on your requirements:
You could use webhooks modules in services like Integromat or Zapier to receive webhook data and then apply transformation.
You could deploy a script on heroku and use the URL generated there to send the webhooks calls.
You could also use services like requestbin, webhook.site etc if you just want to receive webhooks data.
Regards

How two set up three app services for the same domain on Azure

Presently I have two app services on Azure
An Angular 7 application - mydomainUI.azurewebsites.net
A NET Core web API - mydomainAPI.azurewebsites.net
I also have two DNS records on godaddy:
An A record to the Azure IP address and a
text record # to mydomainUI.azurewebsites.net
Angular makes the API calls to the azure domain. Everything works fine but the home page load takes too long with all the Angular overhead. I would like to add a third app service: a fast loading MVC application that handles the home page ONLY. It would be something like mydomainPUBLIC.azurewebsites.net. All other requests should be handled by the Angular routing of the UI app service. The browser should only show mydomain.com for everything and not the azure domains.
Can this be done without sub-domains? What DNS record(s) would I have to add on godaddy? Any other considerations?
Thank you in advance
I don't think you can route to different web app service with the same domain unless you use subdomains. However, if you consider using path-based URL to access your different web apps, here are two options for you.
You can place multiple web apps in the same web app service with different Azure virtual directories. See here1 and here2. Then set the custom domains in your current web app service.
You could use Azure application gateway route to multiple web app services based on Path URL. URL Path-Based Routing allows you to route traffic to back-end server pools based on URL Paths of the request.
You could follow this to configure App Service with Application Gateway. You need to
Create three backend pools and place each app service in the separate backend pool.
Create three HTTP Settings and Custom Probe with “Pick Hostname” switches enabled(Check Use App Service check box)
Create a basic backend listener and a path-based routing rule. Refer to this tutorial.
If you face any question, please let me know.

Web app to display image from S3 using AWS policy

Background
We have a web app that uses aws-sdk for JavaScript to allow login with AWS Cognito.
We want to allow user access to files on S3 based on AWS policy.
Using AWS.config.credentials = new AWS.CognitoIdentityCredentials(...) we were able to perform a login, and receive a token
Using this token we perform listObject on the bucket.
The problem
After a successful login and listObject on S3, when setting the src attribute of a <img /> tag to https://MY_BUCKET.s3.amazonaws.com/my_file.jpg we get:
403 (Forbidden)
It seems that the client request header does not contain the aws-token retrieved by aws-sdk.
What we've tried
Going through the Prerequisite Tasks in this article
Going through these examples
This solution from StackOverflow (yields Maximum call stack size exceeded). Besides, it seems like a client side CPU intensive solution.
The question
What is the cleanest and easiest way to use CognitoIdentityCredentials to allow display of images from S3 bucket inside a web page?
You can create policy with IAM like so:
http://docs.aws.amazon.com/IAM/latest/UserGuide/reference_policies_examples_s3_cognito-bucket.html
The Javascript SDK helps get credentials, cache them, and is a wrapper around Cognito APIs. http://docs.aws.amazon.com/cognito/latest/developerguide/getting-credentials.html#JavaScript

Login in app using Web-Server

I am developing windows phone-8 app In this I need to register e-mail and password and after I have to login with registered user-name and password.I am using HttpWebRequest Class but don't know how it is possible please share with me any info or link regarding that.
You don't even need a separate web server running an auth service. Instead, you could use Windows Azure Mobile Services. There are several reasons for that, the main being the fact that you can easily manage outgoing data (register users) and check for existing data (authenticating users).
You can use the Azure Mobile Services client if you need an abstracted out data access layer.