Customer PUT API returns the authentication page HTML

Solved
New Member
18 0 0

Hello team, I read all the articles related to this issue, but I can't find the solution. I followed the API guides but I don't see more information about how to solve my problem. 

 

I'm building a basic page in my store to customer change their information (name, phone, and other simple information), so I was testing in the PostMan and it works fine: 

 

 

https://mystore.myshopify.com/admin/api/2020-01/customers/[CUSTOMER_ID].json

But the problem is on my page:

 

 

var settings = {
    "url": "https://mystore.myshopify.com/admin/api/2020-01/customers/" + customer_id + ".json",
    "method": "PUT",
    "headers": {
        "Content-Type": "application/json"
    },
    "data": JSON.stringify({"customer":{"first_name":"Test"}}),
};

$.ajax(settings).done(function (response) {
    console.log(response);
});

The response is basically the authentication page HTML. I already changed the headers including the Access Token, API key, etc. I already cleaned my cookies twice, but I didn't get any success. If I change the method to GET, I get the customer data normally.

 

I didn't find any solution to my problem, all topics related to my problem are still open or don't have the answer. Thanks!

 

 

0 Likes
Highlighted
Shopify Partner
1433 171 262

I think you are misusing Admin API which can be accessed only from a non browser context and backend?

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
Highlighted
New Member
18 0 0

Hello! As I understand, I'm using the Postman Desktop version and it's working fine! I'm using the same URL, the same data structure, and the same data type (JSON). I was reading something related to Proxy (https://help.shopify.com/en/api/guides/modifying-online-store/application-proxies), but I can't create the APP following the steps. What is the best way? And how can I create the app to make the Admin API requests?  

 

Thanks for your attention.

0 Likes
Highlighted

Success.

Shopify Partner
1433 171 262

You'll have to rely on the Storefront API instead of Admin API, more information here - https://help.shopify.com/en/api/storefront-api/reference. Please note that the token and the header name used differs from the the one created for Admin API.

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
Highlighted
New Member
18 0 0

Good idea! About the authentication:

 

X-Shopify-Storefront-Access-Token: <storefront-access-token>

 

Is it correct to reveal this Storefront access token in my front-end? Is it safe?

 

0 Likes
Highlighted
Shopify Partner
1433 171 262

Well, it depends. The caution says:

Caution
The Storefront API is an unauthenticated public API, which means that all data you expose to the Storefront API could be seen by any visitors to the store. You should use the Storefront API only if you and the storeowner are comfortable with this risk, and you should give permissions for only the types of data that the private app needs.

This is why Admin API exists. But to access it you need to send the requests to your servers/AWS/GC/etc and then use the Admin API to connect securely to Shopify and pass the results back to the storefront.

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
Highlighted
New Member
18 0 0

Ok, thanks! 

 

I got it! I'll try to change my application to use this Storefront API + GraphQL. 

0 Likes
Highlighted
New Member
18 0 0

Hello, my Storefront API is not working as well. 

 

$(function(){

    $.ajax({
        method: "POST",
        url: "https://mystore.myshopify.com/admin/api/2020-01/graphql.json",
        contentType: "application/json",
        headers: {
            "X-Shopify-Storefront-Access-Token": "1234" // My storefront access token
        },
        data: JSON.stringify({
            query: `{shop { name }}`,
            variables: {}
        })
    }).done(function(data){
        console.log(data)
    });

});

I wrote this code to get simple information Shop Name. 

 

The response is the same I mentioned in the beginning: LOGIN PAGE HTML.

 

<html>
  <body>
    <noscript>
      <a href="https://app.shopify.com/services/login/identity?destination_uuid=1c24846f-da7c-46ae-86e5-1079a4146a66&amp;login_hint=abajrushi%40redstage.com&amp;merge_ignore_postponed=false&amp;prompt=merge&amp;return_to=https%3A%2F%2Fapp.shopify.com%2Fservices%2Flogin%2Fidentity_callback%3Ffrom_signup%3Dfalse%26locale%3Den%26shop_name%3Duat-proampac%26state%3DQUdqEXSY73LmPB2j-zCrkKockjsgn0HflAKjx_gbHr8oWR9D686X16guqpqcb8V1GADtQbJCDTMpkJ7wjUfep1HozUkvPkvau21WFUPwV9-27c_VUFXw1OGYSDzD9XBvaRMCpBfZBNeSi_xVciiPvPb03WaQ-LgNjZ-JxoPfoxN-JC9fs2h5I_UfwO7lHN6SM9cil7Nt_Qwy9eLVBUFBxsGZykUUuMJ8-qwPwznsaO4%253D&amp;ui_locales=en&amp;ux=shop">Continue</a>
    </noscript>

    <script type="text/javascript">
      window.location = "https:\/\/app.shopify.com\/services\/login\/identity?destination_uuid=1c24846f-da7c-46ae-86e5-1079a4146a66\u0026login_hint=abajrushi%40redstage.com\u0026merge_ignore_postponed=false\u0026prompt=merge\u0026return_to=https%3A%2F%2Fapp.shopify.com%2Fservices%2Flogin%2Fidentity_callback%3Ffrom_signup%3Dfalse%26locale%3Den%26shop_name%3Duat-proampac%26state%3DQUdqEXSY73LmPB2j-zCrkKockjsgn0HflAKjx_gbHr8oWR9D686X16guqpqcb8V1GADtQbJCDTMpkJ7wjUfep1HozUkvPkvau21WFUPwV9-27c_VUFXw1OGYSDzD9XBvaRMCpBfZBNeSi_xVciiPvPb03WaQ-LgNjZ-JxoPfoxN-JC9fs2h5I_UfwO7lHN6SM9cil7Nt_Qwy9eLVBUFBxsGZykUUuMJ8-qwPwznsaO4%253D\u0026ui_locales=en\u0026ux=shop";
    </script>
  </body>
</html>

What I did wrong in this time? 

 

0 Likes
Highlighted
Shopify Partner
1433 171 262

@gfagnani remove the "admin" part from the URL.

Sergiu Svinarciuc | CTO @ visely.io
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more about the awesome stuff we do head over to visely.io or our blog
0 Likes
Highlighted
New Member
18 0 0

Ok! I fixed it, but now I have another problem. I'm just trying to update my current logged user.

 

 

$(function(){

    $.ajax({
        method: "POST",
        url: "https://mystore.myshopify.com/api/2020-01/graphql.json",
        contentType: "application/json",
        headers: {
            "X-Shopify-Storefront-Access-Token": "1234" // Access code
        },
        data: JSON.stringify({
            query: `mutation customerUpdate($input: CustomerInput!) {
                customerUpdate(input: $input) {
                    customer {
                        id
                    }
                    userErrors {
                        field
                    message
                    }
                }
            }`,
            variables: {
                "input": {
                    "firstName": "GraphqL",
                    "id": "123" // Where can I get this information?
                }
            }
        })
    }).done(function(data){
        console.log(data)
    });

});

I need to change his name. Where can I get the customer storefront API ID? 

 

Response: 

0:
message: "CustomerInput isn't a defined input type (on $input)"
locations: [{…}]
path: ["mutation customerUpdate"]
extensions: {code: "variableRequiresValidType", typeName: "CustomerInput", variableName: "input"}
1:
message: "Field 'customerUpdate' is missing required arguments: customerAccessToken, customer"
locations: [{…}]
path: (2) ["mutation customerUpdate", "customerUpdate"]
extensions: {code: "missingRequiredArguments", className: "Field", name: "customerUpdate", arguments: "customerAccessToken, customer"}
2:
message: "Field 'customerUpdate' doesn't accept argument 'input'"
locations: [{…}]
path: (3) ["mutation customerUpdate", "customerUpdate", "input"]
extensions: {code: "argumentNotAccepted", name: "customerUpdate", typeName: "Field", argumentName: "input"}
3:
message: "Variable $input is declared by customerUpdate but not used"
locations: [{…}]
path: ["mutation customerUpdate"]
extensions: {code: "variableNotUsed", variableName: "input"}

I was looking into this method: https://help.shopify.com/en/api/storefront-api/reference/mutation/customerupdate

How can I get the customer Access Token without their user and password, because they are already logged, right?

 

It's so confusing!

 

Thanks!

 

0 Likes