4
votes

I am trying to upload audio files on the Client-Side directly to my Google Cloud Storage bucket, for the purpose of avoiding a server-side upload (which has file size limits).

My Issue: I am getting a 403 SignatureDoesNotMatch error on upload.

Here is the error from the response:

<Error>
<Code>SignatureDoesNotMatch</Code>
<Message> The request signature we calculated does not match the signature you provided. Check your Google secret key and signing method</Message>
<StringToSign>
PUT

audio/mp3
1511112552
/bucketname/pathtofile/019%20-%20top%20cntndr%20V1.mp3
</StringToSign>
</Error>

I have created a signed url. It looks like this:

https://storage.googleapis.com/google-testbucket/testdata.txt?GoogleAccessId=
[email protected]&Expires=1331155464&Signature=BCl
z9e4UA2MRRDX62TPd8sNpUCxVsqUDG3YGPWvPcwN%2BmWBPqwgUYcOSszCPlgWREeF7oPGowkeKk
7J4WApzkzxERdOQmAdrvshKSzUHg8Jqp1lw9tbiJfE2ExdOOIoJVmGLoDeAGnfzCd4fTsWcLbal9
sFpqXsQI8IQi1493mw%3D

The signed url is built following the guidlines found in the Google Docs here https://cloud.google.com/storage/docs/access-control/create-signed-urls-program

However, the client-side javascript portion of handling this signed url is very unclear in the documentation.

Here is my python code to create and return the signed url.

GOOGLE_SERVICE_CREDENTIALS = 'google-service-credentials.json'

def get_signed_url(request):
    filename = request.GET.get('filename')
    expiration = request.GET.get('expiration')
    type = request.GET.get('type')
    signed_url = CloudStorageSignedURL(
                method='PUT',
                file_name=filename,
                expiration_m=expiration,
                content_type=type
                )
    signed_url = signed_url.sign_url()


    return JsonResponse({ 'signed_url': signed_url })






class CloudStorageSignedURL(object):


    def __init__(self, method, file_name, expiration_m, content_type):
        self.HTTP_method = method
        self.content_type = 'content-type: ' + content_type
        self.expiration = int(expiration_m)
        self.file_name = file_name


    def sign_url(self):


        expiration_dt = datetime.utcnow() + timedelta(minutes=self.expiration)
        expiration = int(time.mktime( expiration_dt.timetuple() ))
        bucket_path = '/' + settings.CLOUD_STORAGE_BUCKET + '/dev/tests/' + self.file_name
        signature_string = self.HTTP_method + '\n' + '\n' + self.content_type + "\n" + str(expiration) + '\n' + bucket_path
        print(signature_string)
        creds = ServiceAccountCredentials.from_json_keyfile_name(GOOGLE_SERVICE_CREDENTIALS)
        client_email = creds.service_account_email
        signature = creds.sign_blob(signature_string)[1]
        encoded_signature = base64.urlsafe_b64encode(signature).decode('utf-8')
        base_url = settings.CLOUD_STORAGE_ROOT + 'dev/tests/' + self.file_name


        return base_url + '?GoogleAccessId=' + client_email + '&Expires=' + str(expiration) + '&Signature=' + encoded_signature

Client-side Javascript to upload the file

import $ from 'jquery';
import axios from 'axios';



$("document").ready( () => {
  console.log('window loaded');


  $("#id_audio_file").change(function() {

    const file = this.files[0]

    const url = window.location.href.replace('submit/', 'upload/');
    $.get(url + `?filename=${file.name}&expiration=10&type=${file.type}`, (data) => {
      upload(data.signed_url, file);
    })

  });
});



function upload(url, file) {

  const config = {
    headers: {
      'Content-Type': file.type,
    }
  }

  axios.put(url, file, config)
    .then(function (res) {
      console.log(res);
    })
    .catch(function (err) {
      console.log(err);
    });
}

I really feel like I covered all the bases here, but I am obviously missing something minute. Any help would be greatly appreciated!

1
Expires=1331155464 means that access provided by the URL expired some 5 years ago. Still, the error would have been: <Error> <Code>ExpiredToken</Code> <Message>The provided token has expired.</Message> <Details>Request has expired: timestamp</Details> </Error> . I suggest using the API explorer to generate a signature as an alternative to sign_url, for testing - Tudormi

1 Answers

1
votes

First, make sure that the service account that you are using has the proper permissions to upload a file to a bucket: either through IAM settings or through access control.

If this is set, then it's a matter of the code. I have tried your approach, with creating the signed url rather manually and it failed for me as well, with the same error. But, I have managed to upload a file via a signedURL, using the generate_signed_url method from the Google Cloud python client library. Less talk, more code:

from google.oauth2 import service_account
import base64
import json
from datetime import datetime, timedelta
import time
import requests
from google.cloud import storage

# client = storage.Client()
# bucket = client.get_bucket('a-test-bucket')
# blob = bucket.blob('/test/mpthreetest.mp3')

GOOGLE_SERVICE_CREDENTIALS = 'signed_url_account.json'
FILENAME = 'mpthreetest.mp3'
EXPIRATION = 1511826970  # epoch time
TYPE = 'audio/mp3'

creds = service_account.Credentials.from_service_account_file(GOOGLE_SERVICE_CREDENTIALS)
bucket = storage.Client().get_bucket('a-test-bucket')
blob = bucket.blob('test/mpthreetest.mp3')

signed_url = blob.generate_signed_url(method='PUT', expiration=EXPIRATION, content_type=TYPE, credentials=creds)

print (signed_url)

req = requests.put(signed_url, open(FILENAME), headers={'Content-Type': TYPE})
print(req.content)