PUT request to google cloud storage signed URL generated by Shopify throws error MalformedSecurityHeader - file-upload

Question

I'm trying to upload a .glb file to a product in a Shopify store through Shopify GraphQL Admin API. For that, it first returns a google cloud storage signed URL, to where I should upload my file through an HTTP PUT request. After uploading, I should attach the same URL to the product with another API call.
This question is about that file uploading to the cloud storage signed URL. I include all these details to make this question easy to be getting answered. So, please read till the end.
What data Shopify provides me with is mentioned below.
{
"data": {
"stagedUploadsCreate": {
"stagedTargets": [
{
"parameters": [
{
"name": "GoogleAccessId",
"value": "threed-model-service--6bgx7cbe#shopify-applications.iam.gserviceaccount.com"
},
{
"name": "key",
"value": "models/a6436c066064bac3/windmill.glb"
},
{
"name": "policy",
"value": "eyJleHBpcmF0aW9uIjoiMjAyMC0wNy0yMVQwOToxNjoxMFoiLCJjb25kaXRpb25zIjpbWyJlcSIsIiRidWNrZXQiLCJ0aHJlZWQtbW9kZWxzLXByb2R1Y3Rpb24iXSxbImVxIiwiJGtleSIsIm1vZGVscy9hNjQzNmMwNjYwNjRiYWMzL3dpbmRtaWxsLmdsYiJdLFsiY29udGVudC1sZW5ndGgtcmFuZ2UiLDE5NzE3MiwxOTcxNzJdXX0="
},
{
"name": "signature",
"value": "vz+OdcEmD9Kbv2FbXdxWNUk59XO2GmXzhvtDswXbDQNcyZpUufI85z5x2PFGv/XZ+tSBsl/S393pmy0Bu9xG7oVgOZcMIWEbOIm9kXgQunbjKQY3Ff3BBpMocB0xazzlYmckZozdJ8ZZkyox/c/gEe1QaxqW4+419iufuFHy4Bp3LL/aUr+ATNChwn9Dn8+XnHMOckZxDlbiggcF3dx+yBuTFia8FneaVSiU0M5DIWmHqHb2YDCV0KtEP6jfTj/PQVUjS8pn8EGhrRaMx7Q2A5G8Pycgc9H35hqJnnUKCTa3AYeyI45RbhddYnIWw9YrAADXuQYlVCo6LYBHjxsCWA=="
}
],
"resourceUrl": "https://storage.googleapis.com/threed-models-production/models/a6436c066064bac3/windmill.glb?external_model3d_id=bW9kZWwzZC00MDg5Ng==",
"url": "https://storage.googleapis.com/threed-models-production/models/a6436c066064bac3/windmill.glb?external_model3d_id=bW9kZWwzZC00MDg5Ng=="
}
],
"userErrors": []
}
}
}
Using these parameters, I construct a signed URL as follows.
resourceUrl+"&signature="+signature+"&key="+key+"&policy="+policy+"&GoogleAccessId="+GoogleAccessId
Eg:
https://storage.googleapis.com/threed-models-production/models/a6436c066064bac3/windmill.glb?external_model3d_id=bW9kZWwzZC00MDg5Ng==&signature=vz+OdcEmD9Kbv2FbXdxWNUk59XO2GmXzhvtDswXbDQNcyZpUufI85z5x2PFGv/XZ+tSBsl/S393pmy0Bu9xG7oVgOZcMIWEbOIm9kXgQunbjKQY3Ff3BBpMocB0xazzlYmckZozdJ8ZZkyox/c/gEe1QaxqW4+419iufuFHy4Bp3LL/aUr+ATNChwn9Dn8+XnHMOckZxDlbiggcF3dx+yBuTFia8FneaVSiU0M5DIWmHqHb2YDCV0KtEP6jfTj/PQVUjS8pn8EGhrRaMx7Q2A5G8Pycgc9H35hqJnnUKCTa3AYeyI45RbhddYnIWw9YrAADXuQYlVCo6LYBHjxsCWA==&key=models/a6436c066064bac3/windmill.glb&policy=eyJleHBpcmF0aW9uIjoiMjAyMC0wNy0yMVQwOToxNjoxMFoiLCJjb25kaXRpb25zIjpbWyJlcSIsIiRidWNrZXQiLCJ0aHJlZWQtbW9kZWxzLXByb2R1Y3Rpb24iXSxbImVxIiwiJGtleSIsIm1vZGVscy9hNjQzNmMwNjYwNjRiYWMzL3dpbmRtaWxsLmdsYiJdLFsiY29udGVudC1sZW5ndGgtcmFuZ2UiLDE5NzE3MiwxOTcxNzJdXX0=&GoogleAccessId=threed-model-service--6bgx7cbe#shopify-applications.iam.gserviceaccount.com
Then I try to make a PUT request to this URL with the .glb file in POSTman as shown in this image -->
with the following headers.
But I don't get a success response. In fact, I get a 400 error with the following message.
<?xml version='1.0' encoding='UTF-8'?>
<Error>
<Code>MalformedSecurityHeader</Code>
<Message>Your request has a malformed header.</Message>
<ParameterName>signature</ParameterName>
<Details>Signature was not base64 encoded</Details>
</Error>
Can someone point me out what I'm doing wrong here? I have been dealing with this error for days and read a lot of questions and articles, but couldn't get this to work. Therefore, any helpful suggestion is highly appreciated.

Answer 1

Few suggestions for you to try:
When generating the initial request (Shopify did this in this case), GCS usually includes HTTP headers of that request and includes them in the request signature and expects the upload request (the one you're trying to do) to match same HTTP header values.
This means you are advised to include only those headers Shopify specified in their request in your signed key upload request and nothing extra. So first try removing all HTTP headers that are not documented by Shopify (e.g. ones added by POSTMAN) and ensure all headers values follow Shopify docs (e.g. Content-Type should match)
You need to ensure signature parameters are in the expected names and formats:
signature value field is named: x-goog-signature and not signature (This is the likely reason for the error you're getting that GCS can't find the expected param)
you likely have to provide a signing algorithm key as well (x-goog-algorithm)
you might need other keys as well depending on other factors like authentication and so
I'd say these should be documented by Shopify SDK and/or examples
One suggestion to simplify/speed up things for you might be to use Google Cloud Utils (gsutil command line tool) to create a signed url request and then try to reproduce the same behaviour in your code
For more information see these links:
https://cloud.google.com/storage/docs/access-control/signed-urls
https://cloud.google.com/storage/docs/access-control/signing-urls-with-helpers#gsutil
Then after familiazing yourself with signed url format, you can check this for some sample code on how to do in your own code:
https://cloud.google.com/storage/docs/access-control/signing-urls-manually
For your reference when reading the docs, the type of Signed URL you're trying to create is non-resumable upload (which uses a single PUT request) rather than resumable (which uses an initial POST plus a series of PUTs)
Sorry I haven't worked with Shopify but the above is from my experience working with GCS signed urls