Load Data Using Secure API Keys from a Third-Party API with Netlify Serverless Functions

Lecturer: [0:00] This site is loading data from a third party, but that data is incomplete. We're currently getting a name, a favorite song, and an ID, but we're missing a photo and some other details.

[0:10] For this next step, let's add more data to this array in the serverless function by using the ID that we get back to hit Unsplash and we'll get the photo and the credit for it. To start, we're going to need an Unsplash API key. We're just going to go to Unsplash, and let's go to API.

[0:34] We're going to need to register as a developer or if you already have an account, you can log in. Once you're logged in, you can go back to that API developers, and you can go to your apps. Inside, you'll be able to create a new application.

[0:54] You have to agree to some things. Make sure that you review these terms and that you're planning to abide by them.

[1:00] Our app is for learning. We're within the guidelines here. I am going to break this one, but I'm going to immediately delete this key. Don't use it for evil. Let's accept these terms. We're going to call this serverless learning and this is an egghead course. Let's create our application.

[1:21] We have created the course, it's ready, and down here, we're going to see some stats and our keys. Now, the one that we need is our access key. Back out here, we're going to create our .env file, add UNSPLASH_ACCESS_KEY, and put in your access key.

[1:47] For this particular project, I went ahead and put together a collection called egghead corgis. What we need from that is this ID here, because we're going to hit the API to load a collection.

[2:03] If we go back out to our API doc's, we can find down here how to load a collection. We want to get a single collection photo, is what we're after. That means that the API route that we're headed toward is /collections, the ID, which is what we're going to find up here, and photos.

[2:26] To try this out, let's head over to Postman. I'm going to create a new tab, and all API requests in Unsplash, start with this https://api.unsplash.com. I'm going to start there.

[2:44] We're going to drop this in. Then, what we also need is these collections, ID, and photos. I'm going to put that on the end and then I need to replace this ID with the ID of my actual collection.

[2:59] I'm going to put this in here. Then, to get this fully operational, the next thing that I need to do is I need to parse in my authorization token. We need to add authorization as the header name, and then client ID space and our access key. The way we can do that in Postman is we can set headers, and type in authorization.

[3:25] Here we'll go client ID with a space and then I'm going to grab that access key. For testing purposes, I'm just going to paste it right in. Again, this is going to be deleted as soon as I finish recording the series.

[3:40] This API key is no longer valid by the time you're watching this, but for now, what I can do is send this, and here are our photos. Looking at one of these, I can take this URL, and let's drop this into the browser and take a look at what we've got. Here is an image of a corgi. Perfect.

[4:01] What we want to do is just take this URL, and we need to use that in our app. Let's head into that load corgis' function, and what we're going to do in here is just in the next section, we're going to get Unsplash.

[4:18] We're going to get this as a promise. The reason we're going to get it as a promise and not await it is that, we're later going to make another request to get the boot count. We don't want those to be blocking, we want those to run at the same time. We'll talk a little bit more about why when we get to that point, but for now we're going to send in some headers.

[4:40] It's going to be an authorization header, and we send in the client ID. Then, our process.env.UNSPLASH_ACCESS_KEY. What we'll get back from there is a response that we need to parse as JSON.

[5:01] Then, down here, we're going to get our Unsplash data out of await Promise.all(unsplashPromise). OK. This is effectively the same thing as awaiting this fetch, but again, because we're going to do two calls in parallel, we want to do it like this, because that means that this one and the other promise will execute at the same time. We'll be able to get this data back faster.

[5:36] Once we have that data, then we can create a new variable called complete data. That is going to corgis.map. We're going to go through each Corgi in the original list, which just has an ID, a name and a song, remember. In here, we're going to get the photo. The photo is going to be the unsplashdata.find.

[6:06] For each of these, we'll use a shorthand. We want to get the photo that matches the corgi.id. If corgi.id equals PID, then that's going to give us back our photo. We're going to return the original Corgi data. We want all of that Corgi data, but then we want to cherry pick some pieces out of the unsplash response.

[6:27] We want alt. We want the credit, so who took the photo. We want a URL. I think that's all we need. First, to get that alt, we're going to look into this object. What we'll see in here is that we've got the ID, all those good things, and there's an alt description. Then we get URLs. We also get the user who took that photo, so the user name.

[6:57] Using those values, we can get photo.altdescription. For the credit, we can get photo.user.name. Finally, for this one, we're going to use a little bit of magic here because we want a cropped photo at the right size. Unsplash uses ImageX under the hood. ImageX is a photo delivery API. Because of that, it means we can do some pretty cool stuff with Unsplash's URLs.

[7:28] If I start with photo.urls.raw, then what I can do is I can auto format it, which will give us the best format for the current browser, then I can fit crop, which will make sure that the photo doesn't distort. Then I'm going to force it to be 300 pixels wide and 300 pixels high, so a square. I'm going to set the quality to 80, so that it's not too big.

[8:03] Finally, we're going to crop to entropy, which means the most interesting part of the photo. Effectively, what we're doing here is we're saying, "Hey, I want a square photo that's focused on the interesting part," which should be the subject of the photo. That will give us a URL that we can use in our images.

[8:22] Upon doing this, we can then take our complete data and send that back instead of just the plain corgis. Now that we've got all the data for these photos, we should see, when we reload the page, that we have the photo data. Here we go. These are our corgis loaded directly from Unsplash with the cropped data that we needed so that we focus in as a square thumbnail on our subject.

[8:48] We can see in all these cases; it did a pretty good job here. We've also got our credit for the person who took the photo. If we check our source, we can see that we're also getting alt text. We have been able to make these photos accessible.

[9:08] We've been able to load them from a third-party API. We were able to do that all in a way that loads that data from a single serverless function, but it's actually pulling it from two APIs. This is a really powerful way to do that.

[9:20] An important thing to note is that we can't pull the API data from Unsplash from our browser, because we have to send in this access key, which means it needs to be an environment variable. If we use this in a client-side key, we'd be violating the terms of that Unsplash agreement, because we can't publicize this. It needs to be confidential.

[9:41] Serverless functions are a great way to not overcomplicate your setup, but to still be able to make those secure calls. We're now able to protect this API key. To take this live, what we're going to do is we will run Netlify and import, and the .env file.

[9:58] We can see that that is going to pull that UNSPLASH_ACCESS_KEY. It's set up in our Netlify site, so we can take it out of here. Then, we can get all of our details, so let's get add everything. Good. Say here, feature add Unsplash data. When we push that, that goes live.

[10:27] Then, we can jump over to our Netlify site and see that it is currently deploying. Once that deploy finishes, then we can head back out to our site. We can see we've got that data loaded.

[10:49] Because we were working locally, we were able to import that environment variable right into our Netlify account so that when we pushed, it went live immediately. We have Unsplash photo data along with our custom API data, the name, and the song all loaded into our page in production that quickly.