I want to create a quite simple Shopify Custom App for my shop. This App should run when an order is created, so with a webhook product/change.
After creating the webhook, I receive errors in my terminal as soon as I update a product and the webhook is sent. I just have no idea how to correctly implement the webhook code and where. So this question here is a very basic question, how can I implement a Shopify webhook (webhook code from official Shopify dev page for Ruby) in my freshly Shopify CLI created app. Unfortunately, I can't find any help, it seems that there are so many different ways of creating webhooks. None of them is working for me so far, so I try to stick to the most common one described by shopify dev tutorials.
Steps so far:
I installed a custom app with Shopify CLI, using a Node template with the command "npm init #shopify/app#latest". After this, with "npm run dev" I created a tunnel with ngrok. With this, I receive a url to the app, I can access the app in my Shopify Partners and install it.There is a video tutorial of a shopify dev that I used as help, if someone is more interested Shopify dev Webhook tuorial (of 2021, so I guess a bit outdated unfortunately).
I put the following "webhook code", which uses Ruby, in a app.rb file, which I saved in my root folder of my Shopify CLI created app. The code is available in Shopify dev tutorials (Shopify dev tuorial) for Ruby (I made just very few adaptions like adding a path and adding the Shopify Secret Key:
require 'rubygems'
require 'base64'
require 'openssl'
require 'sinatra'
require 'active_support/security_utils'
# The Shopify app's API secret key, viewable from the Partner Dashboard. In a production environment, set the API secret key as an environment variable to prevent exposing it in code.
API_SECRET_KEY = 'my_api_secret_key'
helpers do
# Compare the computed HMAC digest based on the API secret key and the request contents to the reported HMAC in the headers
def verify_webhook(data, hmac_header)
calculated_hmac = Base64.strict_encode64(OpenSSL::HMAC.digest('sha256', API_SECRET_KEY, data))
ActiveSupport::SecurityUtils.secure_compare(calculated_hmac, hmac_header)
end
end
# Respond to HTTP POST requests sent to this web service
post '/webook/product_update' do
request.body.rewind
data = request.body.read
verified = verify_webhook(data, env["HTTP_X_SHOPIFY_HMAC_SHA256"])
halt 401 unless verified
# Process webhook payload
# ...
end
Next to the "app.rb" in the root folder of my App, I created a "Gemfile":
source 'https://rubygems.org'
gem 'shopify_api'
gem 'sinatra'
gem 'activesupport'
With bundle install, a Gemfile.lock is created, everything seems fine here. I created a webhook for product_change in my Shopify Partners Admin under "Notifications". As URL, I entered the ngrok URL from terminal window (from npm run dev command, the tunnel is still open), but with adding /webook/product_update, as this I used in the function path of the webhook.The webhook is sending sth to my app when I update a product, which is good at least. Unfortunately, as I update a product, my app shows errors in the terminal and crashes. The same errors are appearing even if I delete the app.rb file and the Gemlock files completely.The terminal shows these errors:
C:\ShopifyApps\test2\web\node_modules\#shopify\shopify-api\dist\error.js:13
var _this = _super.apply(this, tslib_1.__spreadArray([], tslib_1.__read(args), false)) || this;
**InvalidRequestError: Request does not contain a host query parameter**
at InvalidRequestError.ShopifyError [as constructor] (C:\ShopifyApps\test2\web\node_modules\#shopify\shopify-api\dist\error.js:13:28)
at new InvalidRequestError (C:\ShopifyApps\test2\web\node_modules\#shopify\shopify-api\dist\error.js:230:42)
at Object.getEmbeddedAppUrl (C:\ShopifyApps\test2\web\node_modules\#shopify\shopify-api\dist\utils\get-embedded-app-url.js:22:15)
at file:///C:/ShopifyApps/test2/web/index.js:187:41
I'd be very happy about any hint how to find out what is wrong. How can I connect the abb.rb file with my index.js file of my root app? I guess I need to do that. But I have no real idea unfortunately.
Related
As a beginner, I need some very basic js help here I guess. I created a custom shopify app using Shopify CLI out of my terminal. I now want to implement code in the created Shopify App template, to receive webhooks from my Shopify, and I don't know how to do this.Should I create a "app.rb" file to put the code there, or a "app.jsx" file, and where?Do I need to "import" or "export" in order to connect my new webhook code to the rest of the App, and how? Just some basic advice, what to read, which tutorials to check, would be already awesome. The code I want to implement looks like this:
require 'rubygems'
require 'base64'
require 'openssl'
require 'sinatra'
require 'shopify_api'
require 'active_support/security_utils'
# The Shopify app's API secret key, viewable from the Partner Dashboard. In a production environment, set the API secret key as an environment variable to prevent exposing it in code.
API_SECRET_KEY = '******************'
helpers do
# Compare the computed HMAC digest based on the API secret key and the request contents to the reported HMAC in the headers
def verify_webhook(data, hmac_header)
calculated_hmac = Base64.strict_encode64(OpenSSL::HMAC.digest('sha256', API_SECRET_KEY, data))
ActiveSupport::SecurityUtils.secure_compare(calculated_hmac, hmac_header)
end
end
# Respond to HTTP POST requests sent to this web service
post '/webook/product_update' do
request.body.rewind
data = request.body.read
verified = verify_webhook(data, env["HTTP_X_SHOPIFY_HMAC_SHA256"])
halt 401 unless verified
# puts "Webhook verified: #{verified}"
# Process webhook payload
# ...
end
Maybe it helps to show my file structure (with open "web" folder):
I've cloned https://github.com/ananay/passport-apple-example and replaced the config with this:
clientID: "com.myname.web",
teamID: "myteamid",
callbackURL: "https://myurldev.com/auth/apple/redirect",
keyID: "mykeyid",
privateKeyLocation: path.join(__dirname, "../apple-key.p8")
I've also added SSL certificate on my machine and starting the server with https, all works fine & is recognized by my browser. I'm also starting the app on port 443 and proxying using my hosts file myurl.dev.com -> 127.0.0.1.
I have the same auth setup for facebook, google & microsoft and everything works fine.
I have:
Created a new APP identifier and enabled Sign in with Apple for it, named it: com.myname.dev
Created a new SERVICE identifier and enabled Sign in with apple, called it: com.myname.web
Added "https://myurldev.com/auth/apple/redirect" to the "Reply URLS" on the service identifier com.myname.web
Set my app identifier com.myname.dev as the main app identifier my service to be grouped with.
Created a private key and enabled sign in with apple, interface confirmed the presence of grouped ID com.myname.web bundled with com.myname.dev for which the key was created.
I have confirmed using console.log that the private key is indeed at the path being passed as parameter.
converted the .p8 file to base64 & then back to UTF-8 in an attempt to use the string for privateKeyString
successfully implemented Apple Oauth several times in the past using passport-apple
This time around, for some reason, auth simply doesn't work.
If I set the clientID as the APP identifier, not the service, I'm getting
invalid_request
Invalid web redirect url.
instead of invalid_client
Any advice on debugging this is highly appreciated. Thank you.
EDIT #1:
I have dug a bit deeper into the passport-apple package to figure out if anything goes against apple's docs around token generation, but the flow never reaches that part, indicating things go wrong on the actual configuration in Apple's console & what I'm trying to use for my project.
EDIT #2
2 of the app Ids I have created always throw "wrong redirect uri" because they're not service IDs so I can't configure redirect_uri, this will change if to "required" if I pass undefined as a redirect_uri.
One of the app ids throws only invalid client_id instead, regardless if I pass undefined or good value for redirect_uri.
EDIT #3
Went full vanilla through the OAuth code flow process and just created a url & redirected the user it, failing with this method is consistent with what is happening when using the passport-apple module.
const url = new URL("https://appleid.apple.com/auth/authorize");
url.searchParams.append("state", "fdbd287b1f");
url.searchParams.append("response_type", "code");
url.searchParams.append("scope", "name email");
url.searchParams.append("response_mode", "form_post");
url.searchParams.append(
"redirect_uri",
"https://raiseitupdev.com/auth/apple/redirect",
);
url.searchParams.append("client_id", "com.myname.web");
return res.redirect(url.toString());
[Creator of the library here.]
Did it stop working in development too? I feel this is a configuration error because the actual thing is working live on my website:
https://passport-apple.ananay.dev
Please follow up on this Github issue. Thanks!
https://github.com/ananay/passport-apple/issues/23
I have a web application and I want to track its crashing reports.
Can I use Firebase crashlytics or Fabric for this purpose. In their site its mentioned its only for Android or ios.
Regards,
Makrand
There is feature request: https://github.com/firebase/firebase-js-sdk/issues/710
Looks like it's not supported at all, fabric didn't supported crashlytics on web either so it looks like there are maybe some alternatives like https://www.bugsnag.com but I would like to have it too in one place. Don't see difference between web, android or iOS clients at all, don't know why this is not supported.
But for some possible solution for Vue framework is to catch errors and send it to google analytics where you can connect also your firebase mobile apps. I think to try it this way for now. I didnt tested it yet so don't know if I have to catch window errors too.
Vue.config.errorHandler = function (error) {
//Toast.error(error.message)
console.warn(error.message)
//send error as event to google analytcs...
if (error) message = error.stack;
ga('send', 'event', 'Vue.config.errorHandler', message, navigator.userAgent);
}
window.onerror = function(message, source, lineno, colno, error) {
// maybe we need to also catch errors here and send to GA
}
But I found something like this too for typescript https://github.com/enkot/catch-decorator
While there is still no firebase crashlytics for web, google offers Stackdriver with error reporting functionality - it keeps track of all errors with ability to mark them as resolved (it can also send email notifications about new errors):
You can access it using the below url (make sure to put your firebase {project_id} in the link before clicking it):
https://console.cloud.google.com/errors?project={project_id}
There are two ways on how to use it:
Easy way, limited flexibility.
Every console.error(new Error(...)) reported from your firebase function is automatically tracked in the Stackdriver error logging platform.
So you just need to send an error report from your web app to your firebase function and log it using console.error inside that function.
Note, only an instances of Error object will be sent to the Stackdriver platform. For example console.error("{field1: 'text'}") won't be sent to Stackdriver. More info on that in this doc
More comprehensive way that provides an additional control (you can also report userId, your custom platform name, it's version, user agent, etc):
Here is a quick snippet on how it can be used (in our case we first send the error log from web app to our server and then report the error to Stackdriver):
in firebase nodejs:
const {ErrorReporting} = require('#google-cloud/error-reporting');
let serviceAccount = {...} //service account is your firebase credetials that holds your secret keys etc. See below for more details.
let config = {
projectId: serviceAccount.project_id,
reportMode: "always",
credentials: serviceAccount
}
let errors = new ErrorReporting(config);
Report error to Stackdriver from nodejs:
async function reportError(message){
//message is a string that contains the error name with an optional
//stacktrace as a string representing each stack frame separated using "\n".
//For example:
//message = "Error: Oh-hoh\n at MyClass.myMethod (filename.js:12:23)\n etc.etc."
const errorEvent = this.errors.event()
.setMessage(message)
.setUser(userId)
.setServiceContext("web-app", "1.0.0")
await errors.report(errorEvent)
}
More info about the Stackdriver library is available in this doc. And more info about the stacktrace and it's format can be found in the docs here
A few notes on setting it up:
You need to enable two things:
Enable Stackdrive api for your project using the link below (make sure to set your firebase {project_id} in the url below before clicking it)
https://console.developers.google.com/apis/library/clouderrorreporting.googleapis.com?project={project_id}
Make sure to also grant "Error writer" permission to the firebase service account so Stackdriver can receive the error logs (service account is a sort of representation of a "user" for your firebase project who accesses the services)
To grant the premission, follow the below steps:
first locate the "Firebase service account" using your firebase dashboard link (you can find it below) and remember it's value - it looks something like firebase-adminsdk-{random_symbols}#{project_id}.iam.gserviceaccount.com
Then open gcloud console under "Access"->"IAM". Or use the following link:
https://console.cloud.google.com/access/iam?project={project_id} <- put your firebase project id here
Locate your Firebase service account from the step 1.
Press edit for that account and add "Errors writer" permission:
Where to find the serviceAccount.json:
Regarding the serviceAccount - this is a universal credentials that can be used to authenticate many google services including the Stackdriver. You can obtain yours from your firebase dashboard using the url below (just put your firebase project_id in the link before using it):
https://console.firebase.google.com/u/0/project/{project_id}/settings/serviceaccounts/adminsdk
Open it and click "generate new credentials". This will generate a new service account and download the serviceAccount.json that you need to keep safe (you won't be able to get it again unless you generate a new one).
Apparently Sentry now supports several web frameworks out of the box.
I have recently integrated Sentry crashlytics for Django App.
see here:
https://sentry.io/platforms/
I am integrating a payment system using Stripe. In the process, I need to test the webhooks in my local dev. machine before I ship it to QA. I have tried the following,
Ultrahook: however when starting the ultrahook it said, authenticated <myaccount>, but did not give any "Forwarding activated..." message. When I tried to access the url from stripe or web, it did not work. Details below,
local url: https : //localhost/xxx/yyy/zzz
ultrahook command: ultrahook -k localhost https : //localhost.com/xxx/yyy/zzz
hook url used in stripe: http : //localhost.arivanza.ultrahook.com/xxx/yyy/zzz
I have also tried, https : //localhost.com/, but the request does not come through from the hook when tested from stripe.
LocalTunnel: I could not find the way to launch the application after downloading it from the github.
PageKite: It by default opens up localhost:80, not sure how to open up the https://localhost.com
Any help would be greatly appreciated.
Hi I have tried by self.
Please follow following steps
download ngrok and extract in any folder
run ngrok.exe and type following command ngrok http [port] -host-header="localhost:[port]"
Y0u will get a url in ngrok console "Forwording" like https://7755afd8.ngrok.io
this url is replacement of localhost:[port]
You can use no https://7755afd8.ngrok.io/index.html
Code example for stripe webhook using asp.net:
var postdata =new StreamReader(HttpContext.Request.InputStream).ReadToEnd();
var data = JObject.Parse(postdata);
var eventid = data["id"].ToString();
var eventdata = StripeHelper.GetStripeEvent(eventid);
if(eventdata!=null)
{
switch(eventdata.Type)
{
case "charge.succeeded":
//charged event
break;
case "customer.source.created":
//card added
break;
case "customer.source.deleted":
//card deleted
break;
case "customer.subscription.trial_will_end":
//trial will end
break;
}
}
If you need to receive webhooks on your local dev machine (let's say, on localhost:1234/api/url), you could use a local "mock" Stripe server, like localstripe. Once lauched, it will act like Stripe and send events if you configure it to.
Install and run localstripe:
pip3 install --user localstripe
localstripe
Configure your program to use localhost:8420 (localstripe) instead of the real Stripe (api.stripe.com). For instance with a Python program:
import stripe
stripe.api_key = 'sk_test_anythingyouwant'
stripe.api_base = 'http://localhost:8420'`
Configure localstripe to send webhook events to your program:
curl localhost:8420/_config/webhooks/mywebhook1 \
-d url=http://localhost:1234/api/url -d secret=whsec_s3cr3t
Not all events are implemented in localstripe, and it could behave slightly differently from real Stripe. But it allows you to test your application in a local sandbox, without touching actual Stripe servers.
Although the others answers work, I think they are a bit dated.
Stripe now has a CLI tool that allows you to create a connection between Stripe and your local host. Here are the steps
Create the webhook file that handles the Stripe webhook calls. Let's assume that path to this file is http://localhost/webhook.
Go to stripe.com, go to the dashboard, then click on Developers, and Webhooks, then add a new endpoint. Make sure the URL in that endpoint is the one from step 1 above (i.e., http://localhost/webhook)
Download and install the Stripe CLI locally. Then follow the instructions to login
In your Stripe CLI, run the following command:
stripe listen --forward-to http://localhost/webhooks.
This will eventually listen to Stripe for any webhooks to your local server, and forward them to your sever locally (i.e, it creates a bridge between the two)
Test your work.
The problem with the above solution is it is not going to send back the responses of the webhook back to the Stripe server (because the http://localhost/webhook is private to your network).
If you insist on having responses back to Stripe, then you should either
Map your localhost to a public domain
Use a tunnel, such as ngrok. This answer describes how to use ngrok, but for me, I make the ngrok call this way:
ngrok http -host-header=localhost 80
The above call would give me something like https://<some-random-numnber>.ngrok.io
So in stripe.com, I would have to write the endpoint as
https://<some-random-numnber>.ngrok.io/<path-to-webhook-response-page>/
Hope this helps
Although the others answers work, I think they are a bit dated.
Stripe now has a CLI tool that allows you to create a connection between Stripe and your local host. Here are the steps
Create the webhook file that handles the Stripe webhook calls. Let's
assume that path to this file is http://localhost/webhook.
Go to stripe.com, go to the dashboard, then click on Developers, and
Webhooks, then add a new endpoint. Make sure the URL in that
endpoint is the one from step 1 above (i.e.,
http://localhost/webhook)
Download and install the Stripe CLI locally. Then follow the
instructions to login
In your Stripe CLI, run the following command:
stripe listen --forward-to http://localhost/webhooks.
This will eventually listen to Stripe for any webhooks to your local
server, and forward them to your sever locally (i.e, it creates a
bridge between the two)
register url in VerifyCsrfToken[Middleware]:
class VerifyCsrfToken extends BaseVerifier
{
protected $except = [
'webhook'
];
}
Test your work
I've built the sample app from here: https://developer.nest.com/documentation/cloud/control/
I've created a Client configuration on the developer site with the callback url http://localhost:8080.
The app loads and brings you to the Nest login screen. After entering details it should redirect back but instead the URL https://home.nest.com/session fails with a 400 Bad Request and the response:
{"error":"invalid_request","error_description":"missing user credentials"}
Has anyone got this sample working lately? I believe it's failing in the server.js file at this line (but I'm no Node expert unfortunately):
app.get('/auth/nest', passport.authenticate('nest'));
I've replaced the firebase.js file with the version from the Nest site. Could this be a bug in a recent version of Express or the Nest Passport library?
Tried on OSX, Linux and Windows and getting the same issue.
Thanks!
The OAuth Redirect URI in your client for this example should be http://localhost:8080/auth/nest/callback and be sure that your permissions are set for Thermostat read/write.