Get Acquainted with Facebook Login and the Graph API
By: Alvin Lee
Tags: API, Facebook, Tutorial, Developer, Graph

Step 3: Deploy our web page for HTTPS access

You might be wondering why you can’t just open this local page in your browser to start using the Facebook Login button immediately. If you try it, you’ll notice in the developer tools console of your browser that the SDK outputs an error: The Login Button plugin no longer works on http pages.

That’s right: we have to use HTTPS. Accessing localhost with HTTPS is actually a non-trivial amount of work, so we’re better off deploying to the cloud somewhere.

If you already have a server where you can deploy this one web page with HTTPS, then by all means — go with that option. Once you’ve finished that, just skip down to the next step in this tutorial.

If you don’t have a quick-and-easy place to deploy a web page for HTTPS access, then we’ll do this together with AWS S3 and CloudFront. The steps below are a subset of what I wrote for another tutorial on deploying Vue.JS to S3 with HTTPS.

Our approach will be to use an S3 bucket hosted as a static website. This serves up the contents of your bucket (in our case, just index.html ) using HTTP. In order to get HTTPS, we use CloudFront to serve up our content.

First, you will need an AWS developer account. Once you’ve logged in, navigate over to S3. Once you’re there, click on Create Bucket. Choose a name for your bucket (it needs to be unique across all S3 buckets globally), then choose a region. Uncheck the box labeled “Block all public access” and check the box lower down acknowledging that this is really what you want to do.

When creating your S3 bucket, make sure not to block all public access.

Click on Create bucket. Now, you will see your newly created bucket listed. Click on it to open it. First, we will upload our index.html file from our local machine, and then we’ll configure the bucket to be served up as a static website.

Click on the Upload button. On the subsequent modal, click on Add files, and then choose the index.html file that we created above. You can click Next through the remaining configuration pages since all of the defaults are sufficient for our needs. Finally, click on Upload.

Now, we’ll set up our bucket for hosting. Click on the Properties tab, then click on the Static website hosting card. Select “Use this bucket to host a website” and enter input.html as the index document. Click on Save.

We have one last thing to do, and then our web page will be live. We need to update the Bucket Policy. Click on the Permissions tab for your bucket, then click on Bucket Policy. Paste in the following gist, replacing BUCKET-NAME-GOES-HERE with the name of your bucket.

This bucket policy explicitly allows the public to access the objects in your bucket — that is, it lets the world visit your web page.

Our web page is now up and running, though it’s not yet being served up with HTTPS. If you click back on the Properties tab and again click on Static website hosting, you will see the endpoint URL for your bucket. Copy that URL to your clipboard.

In fact, if you open that endpoint in a separate browser tab, you will see the Facebook Login Button displayed. A peek at your developer console, however, will show the same error message we encountered earlier about this not working on HTTP pages.

To deploy with HTTPS, we need to use AWS CloudFront. From the AWS console, navigate to CloudFront. Click on Create Distribution. Our content delivery method will be Web. Under that section, click on Get Started.

Now we’re on the “Create Distribution” settings page. For “Origin Domain Name,” paste in the endpoint URL for our hosted S3 bucket. The input might pop up some suggested alternatives, but don’t choose any of those. They look similar to our endpoint URL, but they’re not exact. What you paste in is exactly what you need.

Under “Viewer Protocol Policy,” select “Redirect HTTP to HTTPS.”

All of the other defaults can be left as is. At the bottom of the page, click on Create Distribution. You will see your list of distributions, with your newly created distribution displayed with “In Progress” status. It may take 5–10 minutes for your distribution to be deployed.