Shopify CLI 3.0从Frontend到后端进行REST API呼叫

发布于 2025-02-13 11:00:36 字数 1409 浏览 1 评论 0原文

我是Shopify CLI 3.0的新手。我已经从YARN创建 @Shopify/App -template php下载了入门模板。现在，我试图从我的应用程序中注册Web挂钩。

我使用以下代码从Frontend进行了Ajax调用：

 useEffect(() => {
  fetch("/api/orderCreateWebhooks")
    .then((response) => response.json())
    .then(({ fact }) => console.log(fact))
     .catch((error) => {
    });
 }, []);

在我的后端代码中，我的代码下面。

 Route::get('/api/orderCreateWebhooks', function (Request $request) {
/** @var AuthSession */
$session = $request->get('shopifySession'); // Provided by the shopify.auth middleware, guaranteed to be active

$client = new Rest($session->getShop(), $session->getAccessToken());
$data = [
    "webhook"=> [
      "topic"=> "orders/create",
      "address"=> "https://9918-110-44-127-202.ngrok.io/",
      "format"=> "json"
    ]
    ];
$result = $client->post('/admin/api/2022-04/webhooks.json',$data);

return response($result->getDecodedBody());
})->middleware('shopify.auth:online');

使用此AJAX调用，该调用是/api/auth？shop？shop = url，带有500响应HTTP代码。是否缺少任何需要做的事情？

Shopify也没有关于此的良好文件。任何帮助将不胜感激。

更新：

查看网络请求后，我发现该请求正在使用302状态代码重定向。请在下面找到屏幕截图。这似乎是一些身份验证问题。如何验证我们要求的API？

谢谢

原文

I am new to Shopify CLI 3.0. I have downloaded the starter template from yarn create @shopify/app --template php. Now I am trying to register the web hook from my apps.

I made the ajax call from frontend using the below code:

 useEffect(() => {
  fetch("/api/orderCreateWebhooks")
    .then((response) => response.json())
    .then(({ fact }) => console.log(fact))
     .catch((error) => {
    });
 }, []);

And In my backend code, I have below code.

 Route::get('/api/orderCreateWebhooks', function (Request $request) {
/** @var AuthSession */
$session = $request->get('shopifySession'); // Provided by the shopify.auth middleware, guaranteed to be active

$client = new Rest($session->getShop(), $session->getAccessToken());
$data = [
    "webhook"=> [
      "topic"=> "orders/create",
      "address"=> "https://9918-110-44-127-202.ngrok.io/",
      "format"=> "json"
    ]
    ];
$result = $client->post('/admin/api/2022-04/webhooks.json',$data);

return response($result->getDecodedBody());
})->middleware('shopify.auth:online');

With this ajax call, the call is made instead to /api/auth?shop= URL with 500 response HTTP code. Is there any thing missing that needs to be done?

There is no well documentation on this from Shopify as well. Any help would be appreciated.

UPDATE:

After looking in to the network request I found that the request are being redirect with 302 status code. Please find the screenshot below. It seems like some authentication issue. How can be authenticate the API that we are requesting?

Thank you

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

留一抹残留的笑 2025-02-20 11:00:36

似乎您缺少原始代码上的身份验证。您需要在您的请求中提供一些授权令牌[授权-JWT令牌]，否则您需要在查询参数变量中通过ShopIfySession。

 useEffect(() => {
  fetch("/api/orderCreateWebhooks")
    .then((response) => response.json())
    .then(({ fact }) => console.log(fact))
     .catch((error) => {
    });
 }, []);

会变成类似的东西，

 useEffect(() => {
  fetch("/api/orderCreateWebhooks?shopifySession=", 
  {  method: 'get'
   })
    .then((response) => response.json())
    .then(({ fact }) => console.log(fact))
     .catch((error) => {
    });
 }, []);

如下提到的是提取请求的一般格式

fetch('URL_GOES_HERE', { 
    method: 'post', 
    headers: new Headers({
        'Authorization': 'Basic '+btoa('username:password'), 
        'Content-Type': 'application/x-www-form-urlencoded'
    }), 
    body: 'A=1&B=2'
});

it seems like you are missing authentication on your original code. You would need to provide some Authorization token [Authorization - Bearer JWT TOKEN] in your request or you need to pass ShopifySession in the query parameter variables.

 useEffect(() => {
  fetch("/api/orderCreateWebhooks")
    .then((response) => response.json())
    .then(({ fact }) => console.log(fact))
     .catch((error) => {
    });
 }, []);

would become something like,

 useEffect(() => {
  fetch("/api/orderCreateWebhooks?shopifySession=", 
  {  method: 'get'
   })
    .then((response) => response.json())
    .then(({ fact }) => console.log(fact))
     .catch((error) => {
    });
 }, []);

Mentioned below is a general format of fetch requests

fetch('URL_GOES_HERE', { 
    method: 'post', 
    headers: new Headers({
        'Authorization': 'Basic '+btoa('username:password'), 
        'Content-Type': 'application/x-www-form-urlencoded'
    }), 
    body: 'A=1&B=2'
});

回复收藏 0 原文

~没有更多了~