Using Google Cloud Storage Using Javascript

Question

I am trying to upload images to buckets in Google Cloud Storage using the JSON API using a Javascript example: Api Javascript Sample

I can upload photos, but he asks me to log in to my google account.

There is an authorization button in the sample, which, as I understand it, manages OAuth credentials.

function checkAuth() { gapi.auth.authorize({ client_id: clientId, scope: scopes, immediate: true }, handleAuthResult); } 

The problem is this:

I want to authenticate without a pop-up screen, which means without logging in to Google. Since my client does not know the email address or password, I want it to be automatic.

How can i achieve this?

Thanks!

----------------------------- UPDATE ----------------- ---

So, after Brandon's answer, I did the following:

I created my political document and signed it as follows:

 var http = require('http'); var fs = require('fs'); var crypto = require('crypto'); var express = require('express'); var app = express(); var p12ToPem = require("./node_modules/p12-to-pem/p12ToPem.js"); var p12File = fs.readFileSync("./KEY.p12"); var pemKey = p12ToPem(p12File, "notasecret"); var policyJson={"expiration": "2050-06-16T11:11:11Z", "conditions": [["starts-with", "$key", "" ], {"acl": "bucket-owner-read" }, {"bucket": "my-bucket'name"}, {"success_action_redirect":"http://www.example.com/success_notification.html" }, ["eq", "$Content-Type", "image/jpeg" ], ["content-length-range", 0, 1000000] ] }; var policyJson64 = new Buffer(''+policyJson).toString('base64'); var sign = crypto.createSign('RSA-SHA256'); sign.update(policyJson64); var sig = sign.sign(pemKey, 'base64') console.log("policyJson64:"+policyJson64); console.log("sig:"+sig); 

And my message form is as follows:

  <form action="http://my-bucket-name.storage.googleapis.com" method="post" enctype="multipart/form-data"> <input type="text" name="key" value=""> <input type="hidden" name="bucket" value="my-bucket-name"> <input type="hidden" name="Content-Type" value="image/jpeg"> <input type="hidden" name="GoogleAccessId" value=" [e-mail] account.com"> <input type="hidden" name="acl" value="bucket-owner-read"> <input type="hidden" name="success_action_redirect" value="http://www.example.com/success_notification.html"> <input type="hidden" name="policy" value="DONT KNOW WHAT TO PUT HERE"> <input type="hidden" name="signature" value="NEITHER HERE"> <input name="file" type="file"> <input type="submit" value="Upload"> 

No matter what combinations received in javascrypt, I can’t understand what is included in the policy and what is included in the signature, and YES! I read the API, but it is not clear what happens in these two inputs. I tried to include PolicyJson64 and sig in the policy. And I tried to sign the sig value and pemKey too.

I get this error:

 <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> a/vDHoeJ1jIZibjgLnS/ZfMftmyz8IaISJiVt1b2wDNbDjnSR+0HyEDW9/Lew7ufMjU9xdtX/Uld06IJbeYz3OWGHnH4osJNS614RoDVd7lq2qft+bSCqYPtkagJiUWs9SNOPvuQzISthqloPQOwJ1LLXHYmV52c73OpexAnSR4= </StringToSign> </Error> Lew7ufMjU9xdtX / Uld06IJbeYz3OWGHnH4osJNS614RoDVd7lq2qft + bSCqYPtkagJiUWs9SNOPvuQzISthqloPQOwJ1LLXHYmV52c73OpexAnSR4 = <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> a/vDHoeJ1jIZibjgLnS/ZfMftmyz8IaISJiVt1b2wDNbDjnSR+0HyEDW9/Lew7ufMjU9xdtX/Uld06IJbeYz3OWGHnH4osJNS614RoDVd7lq2qft+bSCqYPtkagJiUWs9SNOPvuQzISthqloPQOwJ1LLXHYmV52c73OpexAnSR4= </StringToSign> </Error> 

What should I do?

------ UPDATE ------

Please do not copy the folder documentation, which does not help. Bounty Added

Answer 1

Since Google Cloud Storage has no easy way to upload an image (2014), I ended up working with Amazon Web Services, which even comes with NodeJS sample code. Simple and easy to use.

http://aws.amazon.com/es/developers/getting-started/nodejs/

Clone Sample:

 git clone https://github.com/awslabs/aws-nodejs-sample.git 

Installation:

 npm install 

Run:

 node sample.js 

The sample is supplied using a bucket, and they even store the file in a bucket. So it will be. Be sure to change your credentials:

 aws_access_key_id = YOUR_ACCESS_KEY_ID aws_secret_access_key = YOUR_SECRET_ACCESS_KEY 

Hooray!

Answer 2

Loading an object requires some form of authorization (you can also create a bucket that allows for truly anonymous entries, but this is rarely a good idea). There are several ways to get authorization.

One way you discovered is for the user to log in to their Google account and use this as an authorization. This is a good option if the application is intended for a small number of famous people.

Another way to upload images is to use signed URLs or documents with a signed form policy. This allows your users to use a standard HTML form to select and upload an image that was previously authorized by your application. A policy document is a small piece of text that describes what the user is allowed to do and has been signed with the appropriate credentials.

Here is an example policy document:

 {"expiration": "2010-06-16T11:11:11Z", "conditions": [ ["starts-with", "$key", "" ], {"acl": "bucket-owner-read" }, {"bucket": "travel-maps"}, {"success_action_redirect": "http://www.example.com/success_notification.html" }, ["eq", "$Content-Type", "image/jpeg" ], ["content-length-range", 0, 1000000] ] } 

This document states that users can only use it to download objects using the ACL with a slave owner, only to load them into "travel cards" in the bucket, they can only load objects up to 1 megabyte in size, etc., then the server will sign this document using a secret key. The document (in base 64) and its signature will then be included in the HTML form, for example:

 <form action="http://travel-maps.storage.googleapis.com" method="post" enctype="multipart/form-data"> <input type="text" name="key" value=""> <input type="hidden" name="bucket" value="travel-maps"> <input type="hidden" name="Content-Type" value="image/jpeg"> <input type="hidden" name="GoogleAccessId" value=" [e-mail] "> <input type="hidden" name="acl" value="bucket-owner-read"> <input type="hidden" name="success_action_redirect" value="http://www.example.com/success_notification.html"> <input type="hidden" name="policy" value="eyJleHBpcmF0aW9uIjogIjIwMTAtMDYtMTZUMTE6MTE6MTFaIiwNCiAiY29uZGl0aW9ucyI6IFsNCiAgWyJzdGFydHMtd2l0aCIsICJrZXkiLCAiIiBdLA0KICB7ImFjbCI6ICJidWNrZXQtb3duZXItcmVhZCIgfSwNCiAgeyJidWNrZXQiOiAidHJhdmVsLW1hcHMifSwNCiAgeyJzdWNjZXNzX2FjdGlvbl9yZWRpcmVjdCI6ICJodHRwOi8vd3d3LmV4YW1wbGUuY29tL3N1Y2Nlc3Nfbm90aWZpY2F0aW9uLmh0bWwiIH0sDQogIFsiZXEiLCAiQ29udGVudC1UeXBlIiwgImltYWdlL2pwZWciIF0sDQogIFsiY29udGVudC1sZW5ndGgtcmFuZ2UiLCAwLCAxMDAwMDAwXQ0KICBdDQp9"> <input type="hidden" name="signature" value="BSAMPLEaASAMPLE6SAMPLE+SAMPPLEqSAMPLEPSAMPLE+SAMPLEgSAMPLEzCPlgWREeF7oPGowkeKk7J4WApzkzxERdOQmAdrvshKSzUHg8Jqp1lw9tbiJfE2ExdOOIoJVmGLoDeAGnfzCd4fTsWcLbal9sFpqXsQI8IQi1493mw="> <input name="file" type="file"> <input type="submit" value="Upload"> </form> = "policy" value = "eyJleHBpcmF0aW9uIjogIjIwMTAtMDYtMTZUMTE6MTE6MTFaIiwNCiAiY29uZGl0aW9ucyI6IFsNCiAgWyJzdGFydHMtd2l0aCIsICJrZXkiLCAiIiBdLA0KICB7ImFjbCI6ICJidWNrZXQtb3duZXItcmVhZCIgfSwNCiAgeyJidWNrZXQiOiAidHJhdmVsLW1hcHMifSwNCiAgeyJzdWNjZXNzX2FjdGlvbl9yZWRpcmVjdCI6ICJodHRwOi8vd3d3LmV4YW1wbGUuY29tL3N1Y2Nlc3Nfbm90aWZpY2F0aW9uLmh0bWwiIH0sDQogIFsiZXEiLCAiQ29udGVudC1UeXBlIiwgImltYWdlL2pwZWciIF0sDQogIFsiY29udGVudC1sZW5ndGgtcmFuZ2UiLCAwLCAxMDAwMDAwXQ0KICBdDQp9"> <form action="http://travel-maps.storage.googleapis.com" method="post" enctype="multipart/form-data"> <input type="text" name="key" value=""> <input type="hidden" name="bucket" value="travel-maps"> <input type="hidden" name="Content-Type" value="image/jpeg"> <input type="hidden" name="GoogleAccessId" value=" [e-mail] "> <input type="hidden" name="acl" value="bucket-owner-read"> <input type="hidden" name="success_action_redirect" value="http://www.example.com/success_notification.html"> <input type="hidden" name="policy" value="eyJleHBpcmF0aW9uIjogIjIwMTAtMDYtMTZUMTE6MTE6MTFaIiwNCiAiY29uZGl0aW9ucyI6IFsNCiAgWyJzdGFydHMtd2l0aCIsICJrZXkiLCAiIiBdLA0KICB7ImFjbCI6ICJidWNrZXQtb3duZXItcmVhZCIgfSwNCiAgeyJidWNrZXQiOiAidHJhdmVsLW1hcHMifSwNCiAgeyJzdWNjZXNzX2FjdGlvbl9yZWRpcmVjdCI6ICJodHRwOi8vd3d3LmV4YW1wbGUuY29tL3N1Y2Nlc3Nfbm90aWZpY2F0aW9uLmh0bWwiIH0sDQogIFsiZXEiLCAiQ29udGVudC1UeXBlIiwgImltYWdlL2pwZWciIF0sDQogIFsiY29udGVudC1sZW5ndGgtcmFuZ2UiLCAwLCAxMDAwMDAwXQ0KICBdDQp9"> <input type="hidden" name="signature" value="BSAMPLEaASAMPLE6SAMPLE+SAMPPLEqSAMPLEPSAMPLE+SAMPLEgSAMPLEzCPlgWREeF7oPGowkeKk7J4WApzkzxERdOQmAdrvshKSzUHg8Jqp1lw9tbiJfE2ExdOOIoJVmGLoDeAGnfzCd4fTsWcLbal9sFpqXsQI8IQi1493mw="> <input name="file" type="file"> <input type="submit" value="Upload"> </form> 

There is more documentation on how this works here:

https://cloud.google.com/storage/docs/reference-methods#policydocument

Keep in mind that the signed URL is different from the signed form. "Signed URLs" are very specific, arbitrary commands that can be executed exactly as indicated. You can use them to download, but they are less versatile than signed policy documents.