Question 11505 in Shopify Question posted in
The Shopify help center can be found here.

How To Access Custom App API From Theme App Extension in Shopify?

Created a Custom App and Theme App extension (App Block) in Shopify and configured the app proxy to make third party API call from App block (app.js) to backend node js code. Currently getting 304 error and it is redirecting to /api/auth?shop=shopDomain and expecting Authorization header to be present.

Steps followed are:
Created a Custom App and Theme App extension (App Block) in Shopify
Configured the App Proxy
Trying to make API call from App Block ( app.js ) to the Custom App backend (Node) API.

Issue:
The API calls are returning 302/304 status codes

Following error is shown on Custom App terminal

2023-01-18 13:53:48 | backend | [shopify-app/INFO] Running validateAuthenticatedSession
2023-01-18 13:53:48 | backend | [shopify-app/INFO] Session was not valid. Redirecting to /api/auth?shop=shopDomain | {shop: shopDomain}
2023-01-18 13:53:48 | backend | [shopify-api/ERROR] Missing Authorization header, was the request made with authenticatedFetch? | {isOnline: false}

How to get the authentication token from Theme App Extension( App Block app.js ) or how to successfully authenticate the backend node APIs ?
(https://i.stack.imgur.com/yKUDB.png)](https://i.stack.imgur.com/PRdas.png)](https://i.stack.imgur.com/PqlEY.png)]

Tags:

2

Answers


  1. 0

    You can’t, you need to create a secure endpoint that will handle requests coming from a frontend (world) and then use JavaScript Fetch API to query that endpoint. That includes building custom auth for frontend requests and validation logic. So you should end up with creating a theme app block that will contain <script> tags with your fetch request in it.

    By the way, /api/auth is usually used to handle OAuth 2.0 during app installation process, so you won’t be able to do anything related to what you want to achieve with it.

    Login or Signup to reply.
  2. 0

    If you have set the app proxy correctly, all fetches to /apps/subpath will be redirected to your app (/api/app_proxy in this case):
    enter image description here

    After that you have to check if the request is secure and made by Shopify, this is the Ruby code to check it:

    require 'openssl'
require 'rack/utils'
SHARED_SECRET = 'hush'

# Use request.query_string in rails
query_string = "extra=1&extra=2&shop=shop-name.myshopify.com&logged_in_customer_id=1&path_prefix=%2Fapps%2Fawesome_reviews&timestamp=1317327555&signature=4c68c8624d737112c91818c11017d24d334b524cb5c2b8ba08daa056f7395ddb"

query_hash = Rack::Utils.parse_query(query_string)
# => {
#   "extra" => ["1", "2"],
#   "shop" => "shop-name.myshopify.com",
#   "logged_in_customer_id" => 1,
#   "path_prefix" => "/apps/awesome_reviews",
#   "timestamp" => "1317327555",
#   "signature" => "4c68c8624d737112c91818c11017d24d334b524cb5c2b8ba08daa056f7395ddb",
# }

# Remove and save the "signature" entry
signature = query_hash.delete("signature")

sorted_params = query_hash.collect{ |k, v| "#{k}=#{Array(v).join(',')}" }.sort.join
# => "extra=1,2logged_in_customer_id=1path_prefix=/apps/awesome_reviewsshop=shop-name.myshopify.comtimestamp=1317327555"

calculated_signature = OpenSSL::HMAC.hexdigest(OpenSSL::Digest.new('sha256'), SHARED_SECRET, sorted_params)
raise 'Invalid signature' unless ActiveSupport::SecurityUtils.secure_compare(signature, calculated_signature)

    I hope it helps!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search