[JavaScript] Wordpress help needed for license checking

[Chef-009]

 

Hello, I'm making a web-app-store but I can't seem to figure out a bit of custom code required to show the client paid for content and some other things. (JavaScript)
Please keep in mind this is from an absolute noob perspective. I don't know any code or definitions beyond what || and && mean.

I have a Wordpress page comparable to a Pokédex. It's supposed show a grayed out image of a pokémon for visitors but when someone aquires a license key from Gumroad it's supposed to show a swipeable image gallery.
The code has to check for 2 licenses on Gumroad's servers. And as long as at least 1 is active, it has to show the image gallery.

Here is Gumroad's explanation for checking a license: https://help.gumroad.com/article/76-license-keys

curl https://api.gumroad.com/v2/licenses/verify \
-d "product_permalink=QMGY" \
-d "license_key=YOUR_CUSTOMERS_LICENSE_KEY" \
-X POST

^Here I have to fill in info about the product to check for. Then it gets back a response that looks like this, or a 404 error:

{
"success": true,
"uses": 29,
"purchase": {
"seller_id": "kL0paVL1SdmJSYRNs-OCMg==",
"product_id": "32-nPAinqpLj0B_WIwVlMw==",
"product_name": "license product",
"permalink": "testprod1",
"product_permalink": "https://gum.co/testprod1",
"email": "sample@example.com",
"price": 0,
"gumroad_fee": 0,
"currency": "usd",
"quantity": 1,
"discover_fee_charged": false,
"can_contact": true,
"referrer": "direct",
"card": {
"bin": null,
"expiry_month": null,
"expiry_year": null,
"type": null,
"visual": null
},
"order_number": 524459995,
"sale_id": "FO8TXN-dvxYbBdahG97Y-Q==",
"sale_timestamp": "2021-01-05T19:38:56Z",
"purchaser_id": "5550311507811",
"subscription_id": "GDzW4_NBdQy-o7Gjjng7lw==",
"variants": "",
"license_key": "85DB262A-C19D4B06-A5335A6B-8C079166",
"ip_country": "India",
"recurrence": "monthly",
"is_gift_receiver_purchase": false,
"refunded": false,
"disputed": false,
"dispute_won": false,
"id": "FO8TXN-dvxYbBdahG97Y-Q==",
"created_at": "2021-01-05T19:38:56Z",
"custom_fields": [],
"subscription_cancelled_at": "2021-02-05T20:09:27Z",
"subscription_failed_at": null
}
}

The conditional branch has to look for the succes = 'true' value, then it'll show the image gallery. Although, I don't know for sure if the succes value is for an active license or just for retrieving requested information.
If refunded = true or succes = false it's supposed to be the grayed out image.

I have 4 questions / problems:
1. How do I do the license check, let alone 2? Just paste it above the branch and the code as raw JavaScript on the gallery spot of the page? (I'm using a visual composer)
2. How do I connect the license check with the conditional branch or how do I pull info from that response?
3. Can I make it so only the paid for content gets retrieved from the server when the license is "ok"? (To prevent cache ripping or something like that.)
4. (Bonus) When you try to screenshot in your bank app, the screenshot is completely black. How do I do this? I came as far as putting this script on the page but it doesn't work:
<span style="color: #1a1a1a;">if (e.keyCode == SYSQR) {</span>
<span style="color: #1a1a1a;">filter:alpha(opacity=0);</span>
<span style="color: #1a1a1a;">}</span>


License checking script on page right now:

<p>curl https://api.gumroad.com/v2/licenses/verify \
-d "product_permalink=QMGY" \
-d "license_key=YOUR_CUSTOMERS_LICENSE_KEY" \
-X POST
</p>

//Response from Gumroad's server comes here I guess, idk how to do this//

if ('succes' = true) {

echo <p>[vc_row][vc_column][us_image_slider ids="1868,432,87" css="%7B%22default%22%3A%7B%22background-image%22%3A%222237%7Cfull%22%2C%22background-position%22%3A%2225%25%22%2C%22background-size%22%3A%22cover%22%2C%22background-repeat%22%3A%22no-repeat%22%2C%22background-attachment%22%3A%22fixed%22%2C%22border-radius%22%3A%228px%22%7D%7D"][/vc_column][/vc_row]</p>;

else if ('refunded' = true || 'succes' = false) {
<p>[vc_row][vc_column][us_image image="607"][/vc_column][/vc_row]</p>

}

}

Thanks in advance!

[shadow_ray]

8 hours ago, Chef-009 said:

License checking script on page

is it JavaScript on the website?

Because this makes no sense. curl is a command line program not JavaScript code.

<p>curl https://api.gumroad.com/v2/licenses/verify \
-d "product_permalink=QMGY" \
-d "license_key=YOUR_CUSTOMERS_LICENSE_KEY" \
-X POST
</p>

The fetch API can do the same in JavaScript if Cross-Origin Resource Sharing is enabled toward that server.

 

But there is a bigger flaw. I don't think you would like to verify license keys in front end JavaScript code. Anybody who knows how to use browser dev tools will be able to bypass it and download/view the images without a key.

 

A more sophisticated way of doing this would be to let the user send their license key to your server and if it's valid then it will give access to the cards. By default you just show the blurred thumbnails. Obviously it won't prevent anyone who bought your cards to share them online.

[Eigenvektor]

License checks should be done on the server side, never the client side. They are very easy to circumvent otherwise, since the user has full access to the JavaScript code that's run in the browser. They can simply remove the license request and always return "true".

 

Also, when a user enters their license key, that key needs to be stored somewhere. Storing it on the client side (i.e. the browser's local storage) would mean the user has to re-enter their license key whenever they switch browsers or devices. The best place to do that would be the server's database instead (i.e. MySQL for Wordpress).

 

Similarly the license check should be done in the server's code (i.e. PHP). The server determines whether the license is valid, then delivers the appropriate images to the client. This way the client can't see how the license is checked and the data sent to the client never even contains anything that would require a license, if it is unlicensed.

 

So the first thing to figure out would be how to make HTTP requests in PHP: https://www.twilio.com/blog/5-ways-to-make-http-requests-in-php

[Vicarian]

If, for some reason, the server running the wordpress doesn't support PHP, you can use ASP.NET instead.  There are similar resources for getting started with Web requests in ASP as well.  It's worth noting that curl is a desktop application which has support in Linux and Windows.  Not sure about Mac as I'll never own one.  As another commenter posted, it can't be run from JavaScript for security reasons.  You'll have to author a web server to process requests to gumroad for license keys to assign to users, as well as to store and retrieve those keys for them.  The JavaScript you write would only make those requests (can I have a key?, does the user have a key?), or to parse a response (no, you can't have a key; yes, you can have a key; no, the user doesn't have a key; yes, the user has a key).  Parsing the response involves updating the page in some fashion with respect to the 4 possible responses.  There are many more types of responses, but those are the most relevant to have your server do.

[Eigenvektor]

8 hours ago, Vicarian said:

If, for some reason, the server running the wordpress doesn't support PHP, you can use ASP.NET instead.

Wordpress is written in PHP, so that would be weird

 

That being said, if the user is self hosting they also have access to the plugin's code, so ultimately the license check should happen on a server you control and the plugin should most likely make requests to that, rather than Gumroad directly.

[Vicarian]

6 minutes ago, Eigenvektor said:

Wordpress is written in PHP, so that would be weird

 

That being said, if the user is self hosting they also have access to the plugin's code, so ultimately the license check should happen on a server you control and the plugin should most likely make requests to that, rather than Gumroad directly.

Ah, shows how much I know about wordpress.  A coworker manages that whole deal.  I just get other web projects to work on.  Thanks for the additional information.