Lesson Twenty-two

In this video, you’re going to look over my shoulder as I show you how to get the links we need to display images that are hosted on our Amazon S3 account as well as other file types like PDFs or even zip files and we will use what is called query string authentication to secure these links.

This type of security allows for you to display these files, like images for example or even PDFs or downloadable zip files for a specified time that you lay out and these links can be revived by simply refreshing the page or reloading the page that they’re on. A great example of this is having several downloads on a page and your customer gets to let’s say the last download and gets an access denied message. All they have to do is refresh the page and the link becomes active again for the timeframe that you specified. Of course for something like that you might want to put a message on the page with these downloads kind of spelling that out or be prepared for some support issues, but I’ll show you how you can set this time so that it can be for 10 seconds or an hour, but all this said, now keep in mind that these links that I’m talking about or these URLs on the S3 buckets are all set to private. So if someone goes to the source of the page, the files that they’re going to be getting are all going to be dead links or it’ll comeback as access denied.

Let me show you what I’m talking about. Log in to your S3 account and I’m going to be using the AWS console here, so come on over here to S3 and I believe it’s in this bucket here. Yes this image and this zip file are what I have on this page, this page. This is the one that we’re going to be shooting for. This one here is having those links set to public. That’s what they’re at right now. Let me show you. For example this one, come on over to properties, oops not details we want permission. See, it’s set to everybody can open and download.

That’s not very secured but that is a way in which you can display images and make available zip files to be downloadable and again that’s this one here on index2.html and to demonstrate the zip file, just click on that and just like any other zip file, it’s ready for you to download, but we don’t want that because that’s not very secure. So let’s come on back over to here and get rid of this permission, making it private once again as well as the zip file, I got to get rid of that permission and save. Again we’re making it private once again.

Now then if we come back here to index2 and refresh, they aren’t working anymore. If we click on this link here, we’re going to get access denied. This is what we want everybody else to get because now those links are secure but if we refresh this one with the same exact links, they’re still functional. How is that possible you say? Well let me show you and you don’t have to worry about copying these codes down. Yeah spoiler alert, there’s going to be some coding involved here but I’m going to also include these codes along with this video so all you have to do is copy and paste as I’m about to show you and all you have to do is take this code here and paste this on the index page. This is not a WordPress site, just as this text here says, this is not a WordPress site.

This is a static HTML page and you need to make this a .php. Currently it is a .html or .htm, all you have to do is just change that to .php. There use to be a code that you could put on an ht access file to allow html files to display php code but I think with the new php5 or whatever, that’s no longer working, to my knowledge anyway. I couldn’t get it to work.

But here’s the code again, only this time I’m going to show it to you in my editor. Actually it’s much FTP client but I do all the editing on the fly here. This right here is that code that I’m giving you and in place of these x’s right here, you’re going to put the AWS ID and the AWS secret key right here; ID, secret. And that’s it. Leave everything else alone here. You want to make sure you leave the single quotes intact on either end.

This is the only thing that you change, everything else leave it alone. You also have to have an additional file, the S3 php file which I’m also going to include along with this, that you need to upload to the same directory that this particular page is in, for example right here it is and it’s in the public_html directory alongside the index.php file and all I did here, this used to be an html file just like these, but all I did here was I went to rename and change the html to php. I’m just going to change it back.

Now there are times whenever you have an extensive site of multiple pages and you’ve got other pages pointing to this page that sometimes just changing the extension from html to php may not work so good, so have a back up just in case and the location goes to very top of the page because normally this is what you’re looking at – the doc type is at the very top of the page or the opening html tag is at the very top of the page. Well you put your php code right above that, you see right here that is. And then the other code that I’m giving you, this right here, is the actual code that goes on the page where you want that item to be displayed, whether it’s an image or a zip file or a pdf or whatever. I’ve got a couple of examples down here at the bottom as well. Like here is an example of a download link and an example of the image that are displayed on that page I just showed you.

By you putting the AWS key and the secret key here, the php file is going to know where to go, what AWS or S3 account to get to but it’s not going to know what bucket or file to get to. That’s where this comes in at. Put the bucket name here, put the file name here and the number of seconds that you want this to stay alive. It can be anywhere from 10 seconds, 1 second or 14,000 seconds. Depending upon the number of files that you have on a page using the download files as an example, you may want to have this at maybe 20 minutes, which is I think 1200 seconds.

I don’t have my calculator on but just kind of figured it out. Like I said as far as download, you might want to consider putting some type of notation or explanation on the page alongside those download saying “if you get an access denied message, then just refresh the page” or something like quit dillydallying and get to downloading, something like that.

Anyway, that is basically it. One last thing I want to show you is that if we look at the source file here, view page source, squeeze this in here, you see all these gibberish here at the end, that’s the signature. That’s making this link no good to anybody that would want to share this anywhere else, so if you were to copy this and go to let’s say a different tab and just paste that in there, you’re not going to get much. Again you can see that they’re very secure.

And that’s the end of this video on displaying secure images and other file types using what’s called query string authentication, basically expiring URLs that can come back to life when you refresh the page. Thanks for watching and you have a great day.