Coding Shopify webhooks and API usage: a step-by-step guide | Lorenzo Sfarra | Skillshare

Coding Shopify webhooks and API usage: a step-by-step guide

Lorenzo Sfarra, Web developer / E-Commerce expert

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
10 Lessons (41m)
    • 1. Welcome! - Class presentation

      1:12
    • 2. Overview (the first and last "boring" lesson :) )

      3:13
    • 3. Let's start our project

      2:51
    • 4. Setting up Shopify and create webhooks (Shopify admin | API)

      6:07
    • 5. Exposing our local web server with public URLs

      4:04
    • 6. Code & testing: product/create webhook exposed with ngrok

      5:43
    • 7. Using APIs to manage webhooks

      2:39
    • 8. Code & testing: the products/update webhook

      1:50
    • 9. Verifying Webhooks (created on the admin section)

      9:57
    • 10. Verifying Webhooks (created with APIs)

      3:51

About This Class

In this class we will see how to:

  • create a private Shopify app 
  • store and use API keys, password and shared secrets
  • create and manage webhooks for specific events
  • perform actions based on the webhooks
  • validate & verify the integrity of the webhooks events
  • perform simple API requests to our Shopify shop

Everything will be based on a Node.js project that we will code together, step by step.

We will see how to setup Shopify, create a private app, safely store and use API keys, expose our local web server with public URLs in order to receive events from Shopify.

When you feel lost, you can always have a look at the code in the class repository on GitHub.

Still not a Skillshare member? Join this and all the other classes using this link, you will have 2 months of Skillshare Premium for free.

NOTE to developers: yes, you can follow the course even if you are using a different language: concepts are exactly the same!

Trailer background by https://www.bensound.com .

Transcripts

1. Welcome! - Class presentation: Hi and welcome to this class. My name is Lorenzo and I am in the e commerce world since 2013. In this class we create step by step, a very simple, not project that will create and handle where books from Shopify. In this class we will see how to create a pride should be fire. How to story news P. I. Key password and share its secret Create a manage Web works for specific events both from the Shopify Admin interface and from the Shopify AP eyes. We will see how to perform actions, base it on the Web books and at the end of the course, you would see how to validate and verify the integrity off the Web Books events in order to be sure that only ship If I can use your coat. What are you waiting for? Let's start 2. Overview (the first and last "boring" lesson :) ): Okay, So before proceeding as starting our project, I would like to introduce in a few moments some very important moderates that you are going to use in our project. The 1st 1 is express. That is a minimalist weather framework for note. The basic concept of express is the experts up after created the experts up. We can use the least suddenly third, to listen on a specific port before looking a few details that we need about the express. I would like to introduce the concept off me. There were functions that are functions that have access to the request object, the response subject and the next function in the applications repressed response cycle. The next function is a function in the experts router which, when invoked, executes the middle. We're succeeding the cartel. The current meter where What does it mean? So we have our experts app so we can use the get me third to satisfy to get requests so we will use up that get Then we use a path that in the experts world is called route. And then I mean they were functions. So, as you can see, we have a request argument our response arguments and the Colback. The Post request is basically structured in the same way when we talk about the post requests in no Js I like to introduce the body parcel Modern So body Parsa is not serious Body Parson either Were we are going to use only two method about body parts, sir, and I will not ah going the details of body parts, sir. So please, um if you want to know more detail, it's and you want to go deeper, I suggest you Teoh, visit the official website and have a look at the official documentation Basically way are going to use to methods that are the dot Jason metered that basically, um parses the Jason sent via post requests and, um puts the parson object in the request doctor about the object. Then they your record it methods parses the query string data in the URL and puts the Parsons object in their request dot query object 3. Let's start our project: So now we are going to create our projects. So let's create a mentee directory. Difficult. It's Shopify and we launch in it. The NPM in it comin. I will leave all the default informations here, but feel free off course to feel the details as you prefer. And we have our package starts. Treason five created. So now we are going to east all the moderates we have See in the preface lesser. So if you remember, it's express and body parts, sir and I will add a colors model. It's a very simple model that you still for long in purpose. You would see its usage in few moments. Okay, so let's create a skeleton just to be sure that no, these working fine. So what we do is we important, express? We import a body part, sir, and we import colors. Okay, so now the first thing we have to do is to create a next on experts up so a Swiss. So before we do Costa Pete's equal to express and we have to listen. So what we do is listen, does create Here are simple, um, car stunts for the port. We will move thes configurations dedicated fire in the very close future. So the first part meter is the port, and then a function in which for now, we just log. We're just going to look That server is running on fourth. It's a report. So server port and we just use colors just to, uh, print are red sari a green? My such So we say that it's OK, so ferreting for security. Now we will see these consult message. Here it is running import 5000 and okay in green. 4. Setting up Shopify and create webhooks (Shopify admin | API): Let's see how we can set up a Shopify. Private? Yep. What can we do with a private EP? Basically, we can interact with the ship if I a p i on behalf of a single store we need to do so. We degenerate the credentials from the ship if i it admin section and we will provide these credentials in our requests to Shopify. So in order to create a private app, please open the admit section of your shop. Click on abs on the left column and then click manage abs on the next screen. You will need to click on the create a new private app butter in orderto er rich, they create private app screen in this green priest, feel the appetite eights according to your needs and please give permissions to the abbey ap ice for our propose. In this course, you can give full access free the right toe all the I mean ap eyes. But please note that in a production private app, you should enable only what is necessary for your upto work at the end of this president, please take note off the important information that Shopify gives us. So take note off the A P I key, pastoral and shared key Keep it safe. They are very important and very sensitive because with this information, everyone can't manage and can perform a PR request on your behalf to your store. Another important information that you can find in the screen is an example you're in which you can see how to compose R A p. I, uh you are according to these various, what is important is that, um we had the chance to verify that the Web hook comes from Shopify. And in order to do so, we need to understand that there are two ways to create our Web hook and the verification process is different. And it depends on how we have created a given Web book. So the first way toe very Fricka toe verify Web book is through the just generated Share it secret, and this process is used when you create your Web hook through the FBI. Ah, off our product. The second way is to use a secret that is displayed in the Web hook section off the off the settings notifications page when you create your red hook through the ship, If I aren't mean interface. So how do how do we create our Web hooks? Let's start with the Adam Mean process. So we reach the settings Notifications page. And as you can see, we have a create Web hook battered. Let's click on it. Let's feel the, um, the model deok that we have wheat The event, for example, product creation, Your cola Colback, Ural, that points to your server. Please note that https is needed in these, um, in this flow, it will be not allowed to use http on please click pre select a format in our case, which is Jason at the end off the this prostitute. When it's safe, you will, um, see our secret key that will be use it, that we will use toe very five. The integrity off the Web hook request. The second way to create a Web hook is through FBI requests, So we perform a post request to the point that is composed ours. We said before in the example, your air. So we will use our A P I key password and your store neighbor and the and the part would be Adam inner slash Web hoax that Jason the body will be in Jason and is composed like this. So we have Web Hook. We specify the format. That is Jason. The address. Please note that this is ah, placeholder. But http is no more, um, value. So you have to use http as in this address and a topic. Um, please note too, that you have to specify the application, Jason content type. So, uh, this is the way to create a weapon through AP ICE Host. OPIC is very important off course, and you can check all the possible topics in the Web hooks least that you can find in the officer documentation that is divided by Hibbert's category and the topics Associate ID with a specific event category. 5. Exposing our local web server with public URLs : we need now to expose our local lost port to, uh, some public you are in order to be able to be called by the Shopify server. To do so, we are using a article and grok that basically has different uses. But for us, it would be used to expose our local Web server. So in particular, we're going to use the http comin off and grok in order to start our http Donna, that will listen for http and https traffic with a specific hostile. You can play with Heather's if you need to address specific pistol lost, for example. But it's not the case for us. It will just use the common and broke Http. 5000. So we will forward everything to the port 5000 when you run this government. This is what you will have in your terminal. So a so you can see there are some very important feels that we have to analyze. The 1st 1 is this line. This is the address that we are going to use when we create our web hook. Both in the Shopify are the meaning to face or using the FBI. So this is the ura that we're We're going toe out. Ah, as where? Book address. Another important section is the http requests. So every time I request comes toe thes address you would see on additional entry, Uh, in these in these http request section. So, for example, I've tried toe send some test notifications for our web hook. And this is what we have so post our endpoint and the status court and, uh, response body. But what if you want Oh, inspect inside these requests? Well, you can use the web interface you are, open it in your browser and you will have a dedicated interface in which clicking on one of the request that we have You can see, for example, the request body. So here this is the body off, Ah, Web book for our product create event. So that is, uh, simple products. So there is the idea, the title defender variance and everything else. You can even switch to the headers top in order to see some common Heather's, for example, content type of this application. Jason, you can see that there is are no entry for the product that he on and then the reason entry for the topic products create. If you need, for example, to double check that is for this topic and what the's more important, he's this entry that, as we're seeing in a private lesson, it will be used to check the integrity off the message. 6. Code & testing: product/create webhook exposed with ngrok: to install the Lodish model and way we create a conflict file in order to right down the keys that we want to extract from our product. So, for example, right now we just want the i d. The title and, for example, you ender. And, uh, we can go back to our server. We import Lo dash, we import our conflict for the product, so require product. I can't think if you remember from the first lesson, we are going to use body parts, sir. Dr. Jason here in the up dot use method No, we are already to handle the product creates. Even so, it's a post that will handle Ah, Web hook, for example Product create here you can off course write down whatever you want, but he test to match what you write in the notifications page in the Edwin in the show we fired mean or in the end point that you write down in the a p I creation off a web hook that the classical function with the request object and the response object US first US 1st 2 arguments so cracked dark body here contains our product. So what we do is uh, using the peak method off Lodish in which we say that we want from direct that body object You want to extract some specific keys, we're going to lock these informations so you can say that for example, we are handling we are handling the ah product. Create web. Look for product. The title. Uh, we can show even the i d. By product. Doctor, Commander. And for example, we just say that everything is fine. So grating. Okay, the last thing we have to do is to send back a positive status cold to Shopify to four. That the Web book works correctly. So let's see if I did some mistake. There is an additional who year. OK, everything is fine, but off course, Here we are running on local lost. This is why we are going to use and broke to, uh, perform manage TTP down there for our port 5000. Remember to copy the http, you are air other rice. The web interface off Shopify will not accept your address. And now it's time to see what happens if we send a text notification from the admin interface. So we have our event that is the product creation we have our callback, you error. So remember https and then the address that and grow created for us. The end point would be Web hook product create us defied in our indexed Algeria's fire. That's going to see what happens. So as you can see here Ah, a crock. And for us that http requests came and it's supposed toe Web hook product create. And the response is 200. Okay, now let's going to see if our served where handled the request correctly and he read this. As you can see, we have a proud, create Web book, for example, T shirt product, a D and d vendor. So our Web book, Our the Web book for the product creation, is working fine. 7. Using APIs to manage webhooks: Now we're going to see how to manage Web Hook through AP eyes. The first thing I want to do is to such as to postmen as a tool to perform these operations . Postman is defined as the only complete API I platform, and we will use it to send requests and receive responses through FBI's notes that Shopify is an official guide toe postman in the Help Adat Shopify that come website and it has a already prepared collection with all the possible AP eyes, you are else and whatever eso divided by categories, the first thing we do is to create an environment. So let's click the top right gear and let's create at on the next model dialogue. Now we are able to create our environment, so we give it a name and we create three valuables AP a key password and your store. Now let's see where these are use it. So this is the screen to create a Web hook with AP. Ice, as you can see, is a post request, and we see the same variables in the you are there. In order to perform the right call, you have to select the right environment in the top right corner. So here, as you can see Shopify tests, is the selected environment. The body contains the topic, as we saw before, so Products update address. So it's the end point and the format in our case. Jason, What is important to note in the response among all the other things is the i D. Because we can refer to the Web hook off course. Thanks to these I D. For example, we can operate a Web hook with FBI's knowing. They say the in fact Thea Update operation is a put request, and the idea of the Web hook is specified both on the your L and in the request body. If you need to see how many Web hooks you have and off course, if you need to retrieve the idea of this Web books, you can use the get request to least all the possible where books you have 8. Code & testing: the products/update webhook: So now we're going to create, um Well, hook for the update events. So let's add a nap. Elated at our tribute in our come pick for the product. And we can typically replicate what we did for D create event. And, uh, we can simply change off course the route and we change the logline. So product update and we are on additional entry. That is the last updated field. You can do it in blue. So ah, Correspondent product thought updated at. And now we can try to save our product. The product is now save it. And we have just wait a few seconds off course I had to, um, loud should hiss server. So let's update again. Okay, So in some seconds, we should see our and three here. Any radius now is 200 and we can see our logline. 9. Verifying Webhooks (created on the admin section): Okay. Now, in order to verify that the Web book is coming from Shopify we need to take back our secret key from the odd me notification setting spinal. And if you remember, we are going to check are specific http header that is passing along with the request body . So toe use our secret key. We need to store it somewhere. It's good practice to store it in our, um, environment variable. And in order to do so, we are going to use that Don't envy models. So let's see stall that M V. The first thing we have to do is to import it and calling the dot com pick because on it So now let's created dot yet the fire. Yeah, we create a several ports valuable and for example, are Shopify where hook, uh, verification key that its secrets The key that we have in the beater surefire. Now we need to, um, take back these various in our code so we create a conflict that gs fire which we just go and take the several port that peace process that here we got some report and Shopify web. But if you get a cookie that these, Uh, that is process process. Should be five. My book certification. Now we can go back in, index. We can't import our conflict, so conflict is required. Called feet come fiqh. And, uh okay. Just to, uh, you can off course, remove these, um, Costin's from here. Used directly from conflict. But just for reference, we can do like this Ofri Simple verification. He is complete. That should be folly That compete. That said, um, we need to understand how to verify the wear book. Body parts, sir does a great job for us. It come first, our request body from Jason, but for the Vatican, for verification process, we need the row, body, the string. So how we can do this, blackly we can pass our perimeter to Jason Meter, in which we say that we need to verify that web hook and way We want to do it through a specific function that we're going to create so so prettify she'll be fine. Web. Now, what we have to do is to create this function that takes, uh, four part meters, request body response body s sorry request object response object The buffer and the Cody, the first thing to do is to check if the buffers not 20. Of course, If it is, we just set a request. Uh, Castell Shopify very fight at property to false. Otherwise, we take our role body that is offered to string and that we used the including, or if it's not set, switch back to other full to utf eight that us we have seen before. Uh, we need to, uh, take back, uh, deep value from the request header. Now, if you recall the name, it's extract If I h Mac like this. So what is the point here? We have to create our hash it person version off the my such in order to Okay, finish sunt and the request is verified if and only if h Mac is equal to cash. So what we have to do is to use the same mashing, um, instructions that Shopify perform. So has she's creeped up. We can way have to import crypto off course, but you don't have to east elite because it's part of note. Ah, require cream. Okay, So ash is ah financed creep took that. We create on h Mac that it's that uses shot 256 wheat were Shopify Where? Book verification key Here it's every pass some Robotti utf a tow except And I just base 64 . Okay, now when we reach the post, we thought here we already have. You know, we're requests Object. Our custom should be five. Very fight are good property. That is true if and only if the ah hash it version off The message is exactly equal to the one that is passed by the request Thanks to the extra defy each Mac shot 256 Heather So we define a very fight cost stunt that he's ah let's sell It is really fine legal He's rectal customs Shopify verify If it is we print in green that he's that he's very fight Otherwise we print in threads That is not it is not very fight Sweep us this way. Knew exactly Pierre verified label. Okay, now let's see if I did some mistaking the cold So no in the three s uh, unexpected token. Let's see. Are you missed? Karan Texas here. Okay, Running import 5000. Remember that we are taking back this value from, uh the conflict from the environment? No, let's send a notification, as you can see is verified. Now, let's try to change the, uh verification just to try if the purification process works. So we defy Shopify web verification. We, uh wrong Off course. We don't think he that she'll never work now the investigation process should faith not verified. 10. Verifying Webhooks (created with APIs): we are going to, um, at a verification process, even for the products operate the product update event. So what respect here. We expect that this verification will fail because this Web book was created using a P eyes . So we launched again the server. We test that the creation. Where? Books working fire. Okay, it's verified. Now, let's see what happens if we athlete our product. This one takes more time, so we have to wait some seconds for it. But it should be not verified. Here it is. So what we have to do is to differentiate, um, the keys that we use for the verification process. So where Book? We can say FBI. Very freakish key. It's equal to We have to take it back. A copy here, then off course. We have to add it. Our, um I were, um sorry. Where? Hook a P. I difficult. Sharkey, FBI verification. Keep no ship. If I were put FBI chunky here too. So, uh, here we have to understand when to use the one from, um, the one from the odd, mean interface or the one from the FBI. So what we do is to, uh, take the topic from the header. Then we can say that the key is if Dobby it's equal to products, create that it's equal to Shopify. Where? Hook a PR verification key. Sorry, my book certification. He other rights. He's the one for the Piat. So we have to change the e here and we can try again. No, let's be sure that we didn't break anything for the create event. Seems not. We do it again, okay? And no, we try to up the total product and we should see that is very fight. That sweet little beats he really is verified.