Develop Reference

Cannot read property 'init' of undefined gapi.client

I am trying to integrate Google Calendar API with Js inside an application. I tried to follow Google Quickstart. If I paste the example code in an HTML doc, change the clientID and the API key, I get the error attached when I open the file in Chrome.
Also, with console.log(gapi.client) I get back null.
The first block of code is where gapi functions are called (calendar_model.js).
The second block is where I link the api script to the document (I need to do that by js, in a file called dependency.js).
The third block is my index.js, from where I call the function in dependency.js.
console.log("first");
// Client ID and API key from the Developer Console
var CLIENT_ID = 'xxxxxxxxxxxxxxxxx.apps.googleusercontent.com';
var API_KEY = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx';
// Array of API discovery doc URLs for APIs used by the quickstart
var DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest"];
// Authorization scopes required by the API; multiple scopes can be
// included, separated by spaces.
var SCOPES = "https://www.googleapis.com/auth/calendar.readonly";
var authorizeButton;
var signoutButton;
/**
* On load, called to load the auth2 library and API client library.
*/
function handleClientLoad() {
console.log("gapi type: " + typeof gapi + '\n');
console.log("gapi client type: " + typeof gapi.client + '\n');
gapi.load('client:auth2', initClient);
}
/**
* Initializes the API client library and sets up sign-in state
* listeners.
*/
function initClient()
{
console.log("initClient callback start");
gapi.client.init({
apiKey: API_KEY,
clientId: CLIENT_ID,
discoveryDocs: DISCOVERY_DOCS,
scope: SCOPES
}).then(function () {
// Listen for sign-in state changes.
gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
console.log(gapi);
// Handle the initial sign-in state.
updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
authorizeButton.onclick = handleAuthClick;
signoutButton.onclick = handleSignoutClick;
}, function(error) {
appendPre(JSON.stringify(error, null, 2));
});
}
window.testMicroAppDependency = {
calendarInit: function(){
var calendar_root = document.getElementById("gcalendar-root");
//create authorize button
var x = document.createElement("button");
x.setAttribute("id", "authorize_button");
//x.style = "display: none";
calendar_root.appendChild(x);
//create signout button
x = document.createElement("button");
x.setAttribute("id", "signout_button");
//x.style = "display: none";
calendar_root.appendChild(x);
authorizeButton = document.getElementById('authorize_button');
signoutButton = document.getElementById('signout_button');
x = document.createElement("script");
x.src = "https://apis.google.com/js/api.js";
x.async = true;
x.defer = true;
x.setAttribute("onload", "handleClientLoad()");
x.setAttribute("onreadystatechange", "if (this.readyState === 'complete') this.onload()");
calendar_root.appendChild(x);
}
}
registry.add("microapp", "googlecalendar", {
init: function (parentNode, options) {
this._waitForDependency(function (error, dependency) {
if (error) {
console.error("Unable to start Google Calendar MicroApp: " + error);
} else {
var content = document.createElement("div");
content.setAttribute("id", "gcalendar-root");
parentNode.appendChild(content);
dependency.calendarInit();
}
});
},
_waitForDependency: function(callback) {
var timeout = 5000;
var startTime = new Date().getTime();
var interval = setInterval(function() {
if (window.hasOwnProperty("testMicroAppDependency")) {
clearInterval(interval);
callback(null, window.testMicroAppDependency);
}
if (new Date().getTime() - startTime > timeout) {
clearInterval(interval);
callback("Loading of HelloWorld MicroApp scripts timed out.", null);
}
console.log("... (waiting for testMicroAppDependency)");
}, 100);
}
});
Here is the console where I log the type of gapi and of gapi.client. gapi is an object, so the library is loaded, but gapi.client is undefined.
I am pretty a newbie in web dev, maybe it's a silly issue or I didn't comprehend something about Google API, but I can't get resolve it.
Any help is appreciated :)

The main issue you are having is you are calling initClient function as an explicit function here:
gapi.load('client:auth2', initClient())
you have to pass it as an implicit function because gapi.load will use it as a callback (I recommend you to check more about them). Therefore, it must be passed like this:
gapi.load('client:auth2', initClient)
Notice the subtle, but really important difference between the parenthesis in initClient() and initClient.
Also, you have these variables in the air without assigning them values for what I could see:
var authorizeButton;
var signoutButton;
They should be assigned the button elements to eventually handle them in your code:
var authorizeButton = document.getElementById('authorize_button');
var signoutButton = document.getElementById('signout_button');

Ouath2 in Google Apps Script

I've followed the guide on https://github.com/gsuitedevs/apps-script-oauth2 for setting up the Oauth2 token for a google services very closely but i'm still not able to get the access token to work.
The error I'm receiving is Access not granted or expired. (line 454, file "Service", project "OAuth2")
Note* My project has already been whitelisted for the GMB API library and I have enabled it in the API console console. I retrieved a ClientID and ClientSecret from my project aswell.
//Oauth 2 Flow Start
function getGmbService() {
// Create a new service with the given name. The name will be used when
// persisting the authorized token, so ensure it is unique within the
// scope of the property store.
return OAuth2.createService('gmb')
// Set the endpoint URLs, which are the same for all Google services.
.setAuthorizationBaseUrl('https://accounts.google.com/o/oauth2/auth')
.setTokenUrl('https://accounts.google.com/o/oauth2/token')
// Set the client ID and secret, from the Google Developers Console.
.setClientId('...')
.setClientSecret('...')
// Set the name of the callback function in the script referenced
// above that should be invoked to complete the OAuth flow.
.setCallbackFunction('authCallback')
// Set the property store where authorized tokens should be persisted.
.setPropertyStore(PropertiesService.getUserProperties())
.setCache(CacheService.getUserCache())
// Set the scopes to request (space-separated for Google services).
.setScope('https://www.googleapis.com/auth/business.manage')
// Below are Google-specific OAuth2 parameters.
// Sets the login hint, which will prevent the account chooser screen
// from being shown to users logged in with multiple accounts.
.setParam('login_hint', Session.getActiveUser().getEmail())
// Requests offline access.
.setParam('access_type', 'offline')
// Forces the approval prompt every time. This is useful for testing,
// but not desirable in a production application.
.setParam('approval_prompt', 'force');
}
function showSidebar() {
var gmbService = getGmbService();
if (!gmbService.hasAccess()) {
var authorizationUrl = gmbService.getAuthorizationUrl();
var template = HtmlService.createTemplate(
'Authorize. ' +
'Reopen the sidebar when the authorization is complete.');
template.authorizationUrl = authorizationUrl;
var page = template.evaluate();
DocumentApp.getUi().showSidebar(page);
} else {
Logger.log("No Access")
}
}
function authCallback(request) {
var gmbService = getGmbService();
var isAuthorized = gmbService.handleCallback(request);
if (isAuthorized) {
return HtmlService.createHtmlOutput('Success! You can close this tab.');
} else {
return HtmlService.createHtmlOutput('Denied. You can close this tab');
}
}
//Oauth2 Flow Finish
function testRequest() {
var gmbService = getGmbService();
var payload = {
"pageSize": 5
}
var options = {
"headers": {
"Authorization": 'Bearer ' + gmbService.getAccessToken()
},
"method": 'GET',
"payload": payload,
"muteHttpExceptions": true
};
var response = UrlFetchApp.fetch("https://mybusiness.googleapis.com/v4/accounts",options)
Logger.log(response);
}

Upload file to Google cloud storage from web client without user Authorize

I want to allow my users upload images to my google cloud storage without the need to authorize.
I have google app engine server. And I want the upload done directly from the site.
I used the code below. what do I need to change? or mabye I need to do something in my keys ?
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset='utf-8' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://apis.google.com/js/client.js"></script>
<script type="text/javascript">
/**
* The Project ID of your Google Cloud Storage Project.
*/
var PROJECT = 'abcd';
/**
* Enter a client ID for a web application from the Google Developers
* Console on the "APIs & auth", "Credentials" page.
* In your Developers Console project add a JavaScript origin
* that corresponds to the domain from where you will be running the
* script. For more info see:
* https://developers.google.com/console/help/new/#generatingoauth2
*/
var clientId = '701111116470-55bj2lkjlkkjkljhe97di22gus5hs3.apps.googleusercontent.com';
/**
* Enter the API key from the Google Developers Console, by following these
* steps:
* 1) Visit https://cloud.google.com/console and select your project
* 2) Click on "APIs & auth" in the left column and then click “Credentials”
* 3) Find section "Public API Access" and use the "API key." If sample is
* being run on localhost then delete all "Referers" and save. Setting
* should display "Any referer allowed." For more info see:
* https://developers.google.com/console/help/new/#generatingdevkeys
*/
var apiKey = 'JHJhhguy8786875hghgjbS0nYjcMY';
/**
* To enter one or more authentication scopes, refer to the documentation
* for the API.
*/
var scopes = 'https://www.googleapis.com/auth/devstorage.full_control';
/**
* Constants for request parameters. Fill these values in with your custom
* information.
*/
var API_VERSION = 'v1';
/**
* Enter a unique bucket name to create a new bucket. The guidelines for
* bucket naming can be found here:
* https://developers.google.com/storage/docs/bucketnaming
*/
//var BUCKET = 'code-sample-bucket-' + Date.now();
var BUCKET = 'testbucket';
/**
* The name of the object inserted via insertObject method.
*/
var object = "";
/**
* Get this value from the Developers Console. Click on the
* “Cloud Storage” service in the Left column and then select
* “Project Dashboard”. Use one of the Google Cloud Storage group IDs
* listed and combine with the prefix “group-” to get a string
* like the example below.
*/
var GROUP =
'group-kjhHJKHJKH897897878jgjghg8728f21c3ff22597efbfc63ccdb8f2294d8fd2561cb9';
/**
* Valid values are user-userId, user-email, group-groupId, group-email,
* allUsers, allAuthenticatedUsers
*/
var ENTITY = 'allUsers';
/**
* Valid values are READER, OWNER
*/
var ROLE = 'READER';
/**
* Valid values are READER, OWNER
*/
var ROLE_OBJECT = 'READER';
/**
* A list of example calls to the Google Cloud Storage JavaScript client
* library, as well as associated explanations of each call.
*/
var listApiRequestExplanations = {
'listBuckets': 'This API call queries the Google Cloud Storage API ' +
'for a list of buckets in your project, and returns the result as ' +
'a list of Google Cloud Storage buckets.',
'listObjects': 'This API call queries the Google Cloud Storage API ' +
'for a list of objects in your bucket, and returns the result as ' +
'a list of Google Cloud Storage objects.',
'listBucketsAccessControls': 'This API call queries the Google Cloud ' +
'Storage API for the list of access control lists on buckets in your ' +
'project and returns the result as a list of Google Cloud Storage ' +
'Access Control Lists.',
'listObjectsAccessControls': 'This API call queries the Google Cloud ' +
'Storage API for the list of access control lists on objects in your ' +
'bucket and returns the result as a list of Google Cloud Storage ' +
'Access Control Lists.',
'getBucket': 'This API call queries the Google Cloud Storage API ' +
'for a bucket in your project, and returns the result as a ' +
'Google Cloud Storage bucket.',
'getBucketAccessControls': 'This API call queries the Google Cloud ' +
'Storage API for the access control list on a specific bucket ' +
'and returns the result as a Google Cloud Storage Access Control List.',
'getObjectAccessControls': 'This API call queries the Google Cloud ' +
'Storage API for the access control list on a specific object ' +
'and returns the result as a Google Cloud Storage Access Control List.',
'insertBucket': 'This API call uses the Google Cloud Storage API ' +
'to insert a bucket into your project.',
'insertObject': 'This API call uses the Google Cloud Storage API ' +
'to insert an object into your bucket.',
'insertBucketAccessControls': 'This API uses the Google Cloud ' +
'Storage API to insert an access control list on a specific bucket ' +
'and returns the result as a Google Cloud Storage Access Control List.',
'insertObjectAccessControls': 'This API uses the Google Cloud ' +
'Storage API to insert an access control list on a specific object ' +
'and returns the result as a Google Cloud Storage Access Control List.',
'deleteBucket': 'This API uses the Google Cloud Storage API to delete ' +
'an empty bucket and returns an empty response to indicate success.',
'deleteObject': 'This API uses the Google Cloud Storage API to delete ' +
'an object and returns an empty response to indicate success.'
};
/**
* Google Cloud Storage API request to retrieve the list of buckets in
* your Google Cloud Storage project.
*/
function listBuckets() {
var request = gapi.client.storage.buckets.list({
'project': PROJECT
});
executeRequest(request, 'listBuckets');
}
/**
* Google Cloud Storage API request to retrieve the list of objects in
* your Google Cloud Storage project.
*/
function listObjects() {
var request = gapi.client.storage.objects.list({
'bucket': BUCKET
});
executeRequest(request, 'listObjects');
}
/**
* Google Cloud Storage API request to retrieve the access control list on
* a bucket in your Google Cloud Storage project.
*/
function listBucketsAccessControls() {
var request = gapi.client.storage.bucketAccessControls.list({
'bucket': BUCKET
});
executeRequest(request, 'listBucketsAccessControls');
}
/**
* Google Cloud Storage API request to retrieve the access control list on
* an object in your Google Cloud Storage project.
*/
function listObjectsAccessControls() {
var request = gapi.client.storage.objectAccessControls.list({
'bucket': BUCKET,
'object': object
});
executeRequest(request, 'listObjectsAccessControls');
}
/**
* Google Cloud Storage API request to retrieve a bucket in
* your Google Cloud Storage project.
*/
function getBucket() {
var request = gapi.client.storage.buckets.get({
'bucket': BUCKET
});
executeRequest(request, 'getBucket');
}
/**
* Google Cloud Storage API request to retrieve a bucket's Access Control
* List in your Google Cloud Storage project.
*/
function getBucketAccessControls() {
var request = gapi.client.storage.bucketAccessControls.get({
'bucket': BUCKET,
'entity': GROUP
});
executeRequest(request, 'getBucketAccessControls');
}
/**
* Google Cloud Storage API request to retrieve an object's Access Control
* List in your Google Cloud Storage project.
*/
function getObjectAccessControls() {
var request = gapi.client.storage.objectAccessControls.get({
'bucket': BUCKET,
'object': object,
'entity': GROUP
});
executeRequest(request, 'getObjectAccessControls');
}
/**
* Google Cloud Storage API request to insert a bucket into
* your Google Cloud Storage project.
*/
function insertBucket() {
resource = {
'name': BUCKET
};
var request = gapi.client.storage.buckets.insert({
'project': PROJECT,
'resource': resource
});
executeRequest(request, 'insertBucket');
}
/**
* Google Cloud Storage API request to insert an object into
* your Google Cloud Storage bucket.
*/
function insertObject(event) {
try{
var fileData = event.target.files[0];
}
catch(e) {
//'Insert Object' selected from the API Commands select list
//Display insert object button and then exit function
filePicker.style.display = 'block';
return;
}
const boundary = '-------314159265358979323846';
const delimiter = "\r\n--" + boundary + "\r\n";
const close_delim = "\r\n--" + boundary + "--";
var reader = new FileReader();
reader.readAsBinaryString(fileData);
reader.onload = function(e) {
var contentType = fileData.type || 'application/octet-stream';
var metadata = {
'name': fileData.name,
'mimeType': contentType
};
var base64Data = btoa(reader.result);
var multipartRequestBody =
delimiter +
'Content-Type: application/json\r\n\r\n' +
JSON.stringify(metadata) +
delimiter +
'Content-Type: ' + contentType + '\r\n' +
'Content-Transfer-Encoding: base64\r\n' +
'\r\n' +
base64Data +
close_delim;
//Note: gapi.client.storage.objects.insert() can only insert
//small objects (under 64k) so to support larger file sizes
//we're using the generic HTTP request method gapi.client.request()
var request = gapi.client.request({
'path': '/upload/storage/' + API_VERSION + '/b/' + BUCKET + '/o',
'method': 'POST',
'params': {'uploadType': 'multipart'},
'headers': {
'Content-Type': 'multipart/mixed; boundary="' + boundary + '"'
},
'body': multipartRequestBody});
//Remove the current API result entry in the main-content div
listChildren = document.getElementById('main-content').childNodes;
if (listChildren.length > 1) {
listChildren[1].parentNode.removeChild(listChildren[1]);
}
try{
//Execute the insert object request
executeRequest(request, 'insertObject');
//Store the name of the inserted object
object = fileData.name;
}
catch(e) {
alert('An error has occurred: ' + e.message);
}
}
}
/**
* Google Cloud Storage API request to insert an Access Control List into
* your Google Cloud Storage bucket.
*/
function insertBucketAccessControls() {
resource = {
'entity': ENTITY,
'role': ROLE
};
var request = gapi.client.storage.bucketAccessControls.insert({
'bucket': BUCKET,
'resource': resource
});
executeRequest(request, 'insertBucketAccessControls');
}
/**
* Google Cloud Storage API request to insert an Access Control List into
* your Google Cloud Storage object.
*/
function insertObjectAccessControls() {
resource = {
'entity': ENTITY,
'role': ROLE_OBJECT
};
var request = gapi.client.storage.objectAccessControls.insert({
'bucket': BUCKET,
'object': object,
'resource': resource
});
executeRequest(request, 'insertObjectAccessControls');
}
/**
* Google Cloud Storage API request to delete a Google Cloud Storage bucket.
*/
function deleteBucket() {
var request = gapi.client.storage.buckets.delete({
'bucket': BUCKET
});
executeRequest(request, 'deleteBucket');
}
/**
* Google Cloud Storage API request to delete a Google Cloud Storage object.
*/
function deleteObject() {
var request = gapi.client.storage.objects.delete({
'bucket': BUCKET,
'object': object
});
executeRequest(request, 'deleteObject');
}
/**
* Removes the current API result entry in the main-content div, adds the
* results of the entry for your function.
* #param {string} apiRequestName The name of the example API request.
*/
function updateApiResultEntry(apiRequestName) {
listChildren = document.getElementById('main-content')
.childNodes;
if (listChildren.length > 1) {
listChildren[1].parentNode.removeChild(listChildren[1]);
}
if (apiRequestName != 'null') {
window[apiRequestName].apply(this);
}
}
/**
* Determines which API request has been selected, and makes a call to add
* its result entry.
*/
function runSelectedApiRequest() {
var curElement = document.getElementById('api-selection-options');
var apiRequestName = curElement.options[curElement.selectedIndex].value;
updateApiResultEntry(apiRequestName);
}
/**
* Binds event listeners to handle a newly selected API request.
*/
function addSelectionSwitchingListeners() {
document.getElementById('api-selection-options')
.addEventListener('change',
runSelectedApiRequest, false);
}
/**
* Template for getting JavaScript sample code snippets.
* #param {string} method The name of the Google Cloud Storage request
* #param {string} params The parameters passed to method
*/
function getCodeSnippet(method, params) {
var objConstruction = "// Declare your parameter object\n";
objConstruction += "var params = {};";
objConstruction += "\n\n";
var param = "// Initialize your parameters \n";
for (i in params) {
param += "params['" + i + "'] = ";
param += JSON.stringify(params[i], null, '\t');
param += ";";
param += "\n";
}
param += "\n";
var methodCall = "// Make a request to the Google Cloud Storage API \n";
methodCall += "var request = gapi.client." + method + "(params);";
return objConstruction + param + methodCall;
}
/**
* Executes your Google Cloud Storage request object and, subsequently,
* inserts the response into the page.
* #param {string} request A Google Cloud Storage request object issued
* from the Google Cloud Storage JavaScript client library.
* #param {string} apiRequestName The name of the example API request.
*/
function executeRequest(request, apiRequestName) {
request.execute(function(resp) {
console.log(resp);
var apiRequestNode = document.createElement('div');
apiRequestNode.id = apiRequestName;
var apiRequestNodeHeader = document.createElement('h2');
apiRequestNodeHeader.innerHTML = apiRequestName;
var apiRequestExplanationNode = document.createElement('div');
apiRequestExplanationNode.id = apiRequestName + 'RequestExplanation';
var apiRequestExplanationNodeHeader = document.createElement('h3');
apiRequestExplanationNodeHeader.innerHTML = 'API Request Explanation';
apiRequestExplanationNode.appendChild(apiRequestExplanationNodeHeader);
var apiRequestExplanationEntry = document.createElement('p');
apiRequestExplanationEntry.innerHTML =
listApiRequestExplanations[apiRequestName];
apiRequestExplanationNode.appendChild(apiRequestExplanationEntry);
apiRequestNode.appendChild(apiRequestNodeHeader);
apiRequestNode.appendChild(apiRequestExplanationNode);
var apiRequestCodeSnippetNode = document.createElement('div');
apiRequestCodeSnippetNode.id = apiRequestName + 'CodeSnippet';
var apiRequestCodeSnippetHeader = document.createElement('h3');
apiRequestCodeSnippetHeader.innerHTML = 'API Request Code Snippet';
apiRequestCodeSnippetNode.appendChild(apiRequestCodeSnippetHeader);
var apiRequestCodeSnippetEntry = document.createElement('pre');
//If the selected API command is not 'insertObject', pass the request
//paramaters to the getCodeSnippet method call as 'request.wc.wc.params'
//else pass request paramaters as 'request.wc.wc'
/* if (apiRequestName != 'insertObject') {
apiRequestCodeSnippetEntry.innerHTML =
getCodeSnippet(request.wc.wc.method, request.wc.wc.params);
//Selected API Command is not 'insertObject'
//hide insert object button
filePicker.style.display = 'none';
} else {
apiRequestCodeSnippetEntry.innerHTML =
getCodeSnippet(request.wc.wc.method, request.wc.wc);
}*/
apiRequestCodeSnippetNode.appendChild(apiRequestCodeSnippetEntry);
apiRequestNode.appendChild(apiRequestCodeSnippetNode);
var apiResponseNode = document.createElement('div');
apiResponseNode.id = apiRequestName + 'Response';
var apiResponseHeader = document.createElement('h3');
apiResponseHeader.innerHTML = 'API Response';
apiResponseNode.appendChild(apiResponseHeader);
var apiResponseEntry = document.createElement('pre');
apiResponseEntry.innerHTML = JSON.stringify(resp, null, ' ');
apiResponseNode.appendChild(apiResponseEntry);
apiRequestNode.appendChild(apiResponseNode);
var content = document.getElementById('main-content');
content.appendChild(apiRequestNode);
});
}
/**
* Set required API keys and check authentication status.
*/
function handleClientLoad() {
gapi.client.setApiKey(apiKey);
window.setTimeout(checkAuth, 1);
}
/**
* Authorize Google Cloud Storage API.
*/
function checkAuth() {
gapi.auth.authorize({
client_id: clientId,
scope: scopes,
immediate: true
}, handleAuthResult);
}
/**
* Handle authorization.
*/
function handleAuthResult(authResult) {
var authorizeButton = document.getElementById('authorize-button');
if (authResult && !authResult.error) {
authorizeButton.style.visibility = 'hidden';
initializeApi();
filePicker.onchange = insertObject;
} else {
authorizeButton.style.visibility = '';
authorizeButton.onclick = handleAuthClick;
}
}
/**
* Handle authorization click event.
*/
function handleAuthClick(event) {
gapi.auth.authorize({
client_id: clientId,
scope: scopes,
immediate: false
}, handleAuthResult);
return false;
}
/**
* Load the Google Cloud Storage API.
*/
function initializeApi() {
gapi.client.load('storage', API_VERSION);
}
/**
* Driver for sample application.
*/
$(window)
.bind('load', function() {
addSelectionSwitchingListeners();
handleClientLoad();
});
</script>
</head>
<body>
<!--Add a button for the user to click to initiate auth sequence -->
<button id="authorize-button" style="visibility: hidden">Authorize</button>
<header>
<h1>Google Cloud Storage JavaScript Client Library Application</h1>
</header>
<label id="api-label">Try a sample API call!</label>
<select id="api-selection-options">
<option value="null">
Please select an example API call from the dropdown menu
</option>
<option value="listBuckets">
List Buckets
</option>
<option value="insertBucket">
Insert Bucket
</option>
<option value="getBucket">
Get Bucket
</option>
<option value="getBucketAccessControls">
Get Bucket Access Controls
</option>
<option value="insertBucketAccessControls">
Insert Bucket Access Controls
</option>
<option value="listBucketsAccessControls">
List Buckets Access Control List
</option>
<option value="insertObject">
Insert Object
</option>
<option value="listObjects">
List Objects
</option>
<option value="getObjectAccessControls">
Get Object Access Controls
</option>
<option value="insertObjectAccessControls">
Insert Object Access Controls
</option>
<option value="listObjectsAccessControls">
List Objects Access Control List
</option>
<option value="deleteObject">
Delete Object
</option>
<option value="deleteBucket">
Delete Bucket
</option>
</select>
<br/>
<input type="file" id="filePicker" style="display: none" />
<div id="main-content">
</div>
</body>
</html>
Thank you.

You need to generate_signed_url google signed_url, to allow users to upload to the cloud storage without need to authorize.
A very good working example is explanied here https://www.the-swamp.info/blog/uploading-files-google-cloud-storage/

how do I auto authenticate google javascript api ? REST api

I am using php. and want to use some javascript api function in my application. so can any one know that how can I auto authenticate this process:
<!--Add a button for the user to click to initiate auth sequence -->
<button id="authorize-button" style="visibility: hidden">Authorize</button>
<script type="text/javascript">
var clientId = '837050751313';
var apiKey = 'AIzaSyAdjHPT5Pb7Nu56WJ_nlrMGOAgUAtKjiPM';
var scopes = 'https://www.googleapis.com/auth/plus.me';
function handleClientLoad() {
// Step 2: Reference the API key
gapi.client.setApiKey(apiKey);
window.setTimeout(checkAuth,1);
}
function checkAuth() {
gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: true}, handleAuthResult);
}
function handleAuthResult(authResult) {
var authorizeButton = document.getElementById('authorize-button');
if (authResult && !authResult.error) {
authorizeButton.style.visibility = 'hidden';
makeApiCall();
} else {
authorizeButton.style.visibility = '';
authorizeButton.onclick = handleAuthClick;
}
}
function handleAuthClick(event) {
// Step 3: get authorization to use private data
gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthResult);
return false;
}
// Load the API and make an API call. Display the results on the screen.
function makeApiCall() {
// Step 4: Load the Google+ API
gapi.client.load('plus', 'v1').then(function() {
// Step 5: Assemble the API request
var request = gapi.client.plus.people.get({
'userId': 'me'
});
// Step 6: Execute the API request
request.then(function(resp) {
var heading = document.createElement('h4');
var image = document.createElement('img');
image.src = resp.result.image.url;
heading.appendChild(image);
heading.appendChild(document.createTextNode(resp.result.displayName));
document.getElementById('content').appendChild(heading);
}, function(reason) {
console.log('Error: ' + reason.result.error.message);
});
});
}
</script>
// Step 1: Load JavaScript client library
<script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>
I have .json and also .p12 file for authenticate but I only want to direct access to api function instead of redirecting to google for permission access.

When using the Google+ API or other API that accesses user-specific data (e.g. Gmail, Calendar), you need to either use an OAuth client and ask the user for permission to access their data (i.e. the "redirect to google for permission access"), or use a service account.
A service account is a robot account that is used in place of a real user. If you decide to use a service account, you'll need to use the JSON or P12 key as you mentioned. Using a service account from JavaScript code requires a lot of work and is generally insecure since you would be making your service account key accessible to everyone. If you're going to use a service account, you should call the API from the server using a Google API Client Library.

How to pass Service OAuth access_token from PHP to JavaScript

I am working on an application that is using Google Cloud Storage. I would like to use the JSON_API to manage uploading/downloading the pictures our user's provide. My goal is to grab the access_token using my service account method, and pass it off the the JSON_API JavaScript client api.
Here's my fancy pants class to grab the access_token:
<?php
require_once 'google-api-php-client/src/Google_Client.php';
require_once 'google-api-php-client/src/contrib/Google_StorageService.php';
class Model_Storage_Auth
{
const CLIENT_ID = "clientid.apps.googleusercontent.com";
const SERVICE_ACCOUNT_NAME = "accountname#developer.gserviceaccount.com";
const KEY_FILE = "/super/secret/path/key.p12";
const ACCESS_TOKEN = 'access_token';
const APP_NAME = 'Fancy App';
private $google_client;
function __construct()
{
$this->google_client = new Google_Client();
$this->google_client->setApplicationName(self::APP_NAME);
}
public function getToken()
{
//return '{}';
if(is_null($this->google_client->getAccessToken()))
{
try{$this->google_client->setAccessToken(Session::get(self::ACCESS_TOKEN, '{}'));}catch(Exception $e){}
if(is_null($this->google_client->getAccessToken()))
{
$scope = array();
$scope[] = 'https://www.googleapis.com/auth/devstorage.full_control';
$key = file_get_contents(self::KEY_FILE);
$this->google_client->setAssertionCredentials(new Google_AssertionCredentials(
self::SERVICE_ACCOUNT_NAME,
$scope,
$key)
);
$this->google_client->setClientId(self::CLIENT_ID);
Google_Client::$auth->refreshTokenWithAssertion();
$token = $this->google_client->getAccessToken();
Session::set(self::ACCESS_TOKEN, $token);
}
}
return $this->google_client->getAccessToken();
}
}
I took the google JavaScript example and modified it a little bit to try to add my implementation, here it is:
<?php
$access_token = json_decode(html_entity_decode($access_token), true);
?>
<!--
Copyright (c) 2012 Google Inc.
Licensed under the Apache License, Version 2.0 (the "License"); you may not
use this file except in compliance with the License. You may obtain a copy of
the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations under
the License.
To run this sample, replace YOUR_API_KEY with your application's API key.
It can be found at https://code.google.com/apis/console under API
Access. Activate the Google Cloud Storage service at
https://code.google.com/apis/console/ under Services
-->
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://apis.google.com/js/client.js"></script>
<script type="text/javascript">
/**
* The number of your Google Cloud Storage Project.
*/
var projectNumber = 'HAS REAL NUMBER IN MINE';
/**
* Enter a client ID for a web application from the Google Developer
* Console. In your Developer Console project, add a JavaScript origin
* that corresponds to the domain from where you will be running the
* script.
*/
var clientId = 'YOUR_CLIENT_ID';
/**
* Enter the API key from the Google Developer Console, by following these
* steps:
* 1) Visit https://code.google.com/apis/console/?api=storage
* 2) Click on "API Access" in the left column
* 3) Find section "Simple API Access" and use the "API key." If sample is
* being run on localhost then delete all "Referers" and save. Setting
* should display "Any referer allowed."
*/
var apiKey = 'YOUR_API_KEY';
/**
* To enter one or more authentication scopes, refer to the documentation
* for the API.
*/
var scopes = 'https://www.googleapis.com/auth/devstorage.full_control';
/**
* Constants for request parameters. Fill these values in with your custom
* information.
*/
var API_VERSION = 'v1beta1';
var PROJECT = projectNumber;
/**
* The name of the new bucket to create.
*/
var BUCKET = 'code-sample-bucket';
/**
* The name of the object inserted via insertObject method.
*/
var object = "";
/**
* Get this value from the API console.
*/
var GROUP =
'group-0000000000000000000000000000000000000000000000000000000000000000';
/**
* Valid values are user-userId, user-email, group-groupId, group-email,
* allUsers, allAuthenticatedUsers
*/
var ENTITY = 'allUsers';
/**
* Valid values are READER, OWNER
*/
var ROLE = 'READER';
/**
* Valid values are READER, OWNER
*/
var ROLE_OBJECT = 'READER';
/**
* A list of example calls to the Google Cloud Storage JavaScript client
* library, as well as associated explanations of each call.
*/
var listApiRequestExplanations = {
'listBuckets': 'This API call queries the Google Cloud Storage API ' +
'for a list of buckets in your project, and returns the result as ' +
'a list of Google Cloud Storage buckets.',
'listObjects': 'This API call queries the Google Cloud Storage API ' +
'for a list of objects in your bucket, and returns the result as ' +
'a list of Google Cloud Storage objects.',
'listBucketsAccessControls': 'This API call queries the Google Cloud ' +
'Storage API for the list of access control lists on buckets in your ' +
'project and returns the result as a list of Google Cloud Storage ' +
'Access Control Lists.',
'listObjectsAccessControls': 'This API call queries the Google Cloud ' +
'Storage API for the list of access control lists on objects in your ' +
'bucket and returns the result as a list of Google Cloud Storage ' +
'Access Control Lists.',
'getBucket': 'This API call queries the Google Cloud Storage API ' +
'for a bucket in your project, and returns the result as a ' +
'Google Cloud Storage bucket.',
'getBucketAccessControls': 'This API call queries the Google Cloud ' +
'Storage API for the access control list on a specific bucket ' +
'and returns the result as a Google Cloud Storage Access Control List.',
'getObjectAccessControls': 'This API call queries the Google Cloud ' +
'Storage API for the access control list on a specific object ' +
'and returns the result as a Google Cloud Storage Access Control List.',
'insertBucket': 'This API call uses the Google Cloud Storage API ' +
'to insert a bucket into your project.',
'insertObject': 'This API call uses the Google Cloud Storage API ' +
'to insert an object into your bucket.',
'insertBucketAccessControls': 'This API uses the Google Cloud ' +
'Storage API to insert an access control list on a specific bucket ' +
'and returns the result as a Google Cloud Storage Access Control List.',
'insertObjectAccessControls': 'This API uses the Google Cloud ' +
'Storage API to insert an access control list on a specific object ' +
'and returns the result as a Google Cloud Storage Access Control List.',
'deleteBucket': 'This API uses the Google Cloud Storage API to delete ' +
'an empty bucket and returns an empty response to indicate success.',
'deleteObject': 'This API uses the Google Cloud Storage API to delete ' +
'an object and returns an empty response to indicate success.'
};
/**
* Google Cloud Storage API request to retrieve the list of buckets in
* your Google Cloud Storage project.
*/
function listBuckets() {
var request = gapi.client.storage.buckets.list({
'projectId': PROJECT
});
executeRequest(request, 'listBuckets');
}
/**
* Google Cloud Storage API request to retrieve the list of objects in
* your Google Cloud Storage project.
*/
function listObjects() {
var request = gapi.client.storage.objects.list({
'bucket': BUCKET
});
executeRequest(request, 'listObjects');
}
/**
* Google Cloud Storage API request to retrieve the access control list on
* a bucket in your Google Cloud Storage project.
*/
function listBucketsAccessControls() {
var request = gapi.client.storage.bucketAccessControls.list({
'bucket': BUCKET
});
executeRequest(request, 'listBucketsAccessControls');
}
/**
* Google Cloud Storage API request to retrieve the access control list on
* an object in your Google Cloud Storage project.
*/
function listObjectsAccessControls() {
var request = gapi.client.storage.objectAccessControls.list({
'bucket': BUCKET,
'object': object
});
executeRequest(request, 'listObjectsAccessControls');
}
/**
* Google Cloud Storage API request to retrieve a bucket in
* your Google Cloud Storage project.
*/
function getBucket() {
var request = gapi.client.storage.buckets.get({
'bucket': BUCKET
});
executeRequest(request, 'getBucket');
}
/**
* Google Cloud Storage API request to retrieve a bucket's Access Control
* List in your Google Cloud Storage project.
*/
function getBucketAccessControls() {
var request = gapi.client.storage.bucketAccessControls.get({
'bucket': BUCKET,
'entity': GROUP
});
executeRequest(request, 'getBucketAccessControls');
}
/**
* Google Cloud Storage API request to retrieve an object's Access Control
* List in your Google Cloud Storage project.
*/
function getObjectAccessControls() {
var request = gapi.client.storage.objectAccessControls.get({
'bucket': BUCKET,
'object': object,
'entity': GROUP
});
executeRequest(request, 'getObjectAccessControls');
}
/**
* Google Cloud Storage API request to insert a bucket into
* your Google Cloud Storage project.
*/
function insertBucket() {
resource = {
'id': BUCKET,
'projectId': PROJECT
};
var request = gapi.client.storage.buckets.insert({
'resource': resource
});
executeRequest(request, 'insertBucket');
}
/**
* Google Cloud Storage API request to insert an object into
* your Google Cloud Storage bucket.
*/
function insertObject(event) {
try{
var fileData = event.target.files[0];
}
catch(e) {
//'Insert Object' selected from the API Commands select list
//Display insert object button and then exit function
filePicker.style.display = 'block';
return;
}
const boundary = '-------314159265358979323846';
const delimiter = "\r\n--" + boundary + "\r\n";
const close_delim = "\r\n--" + boundary + "--";
var reader = new FileReader();
reader.readAsBinaryString(fileData);
reader.onload = function(e) {
var contentType = fileData.type || 'application/octet-stream';
var metadata = {
'name': fileData.name,
'mimeType': contentType
};
var base64Data = btoa(reader.result);
var multipartRequestBody =
delimiter +
'Content-Type: application/json\r\n\r\n' +
JSON.stringify(metadata) +
delimiter +
'Content-Type: ' + contentType + '\r\n' +
'Content-Transfer-Encoding: base64\r\n' +
'\r\n' +
base64Data +
close_delim;
//Note: gapi.client.storage.objects.insert() can only insert
//small objects (under 64k) so to support larger file sizes
//we're using the generic HTTP request method gapi.client.request()
var request = gapi.client.request({
'path': '/upload/storage/v1beta2/b/' + BUCKET + '/o',
'method': 'POST',
'params': {'uploadType': 'multipart'},
'headers': {
'Content-Type': 'multipart/mixed; boundary="' + boundary + '"'
},
'body': multipartRequestBody});
//Remove the current API result entry in the main-content div
listChildren = document.getElementById('main-content').childNodes;
if (listChildren.length > 1) {
listChildren[1].parentNode.removeChild(listChildren[1]);
}
try{
//Execute the insert object request
executeRequest(request, 'insertObject');
//Store the name of the inserted object
object = fileData.name;
}
catch(e) {
alert('An error has occurred: ' + e.message);
}
}
}
/**
* Google Cloud Storage API request to insert an Access Control List into
* your Google Cloud Storage bucket.
*/
function insertBucketAccessControls() {
resource = {
'entity': ENTITY,
'role': ROLE
};
var request = gapi.client.storage.bucketAccessControls.insert({
'bucket': BUCKET,
'resource': resource
});
executeRequest(request, 'insertBucketAccessControls');
}
/**
* Google Cloud Storage API request to insert an Access Control List into
* your Google Cloud Storage object.
*/
function insertObjectAccessControls() {
resource = {
'entity': ENTITY,
'role': ROLE_OBJECT
};
var request = gapi.client.storage.objectAccessControls.insert({
'bucket': BUCKET,
'object': object,
'resource': resource
});
executeRequest(request, 'insertObjectAccessControls');
}
/**
* Google Cloud Storage API request to delete a Google Cloud Storage bucket.
*/
function deleteBucket() {
var request = gapi.client.storage.buckets.delete({
'bucket': BUCKET
});
executeRequest(request, 'deleteBucket');
}
/**
* Google Cloud Storage API request to delete a Google Cloud Storage object.
*/
function deleteObject() {
var request = gapi.client.storage.objects.delete({
'bucket': BUCKET,
'object': object
});
executeRequest(request, 'deleteObject');
}
/**
* Removes the current API result entry in the main-content div, adds the
* results of the entry for your function.
* #param {string} apiRequestName The name of the example API request.
*/
function updateApiResultEntry(apiRequestName) {
listChildren = document.getElementById('main-content')
.childNodes;
if (listChildren.length > 1) {
listChildren[1].parentNode.removeChild(listChildren[1]);
}
if (apiRequestName != 'null') {
window[apiRequestName].apply(this);
}
}
/**
* Determines which API request has been selected, and makes a call to add
* its result entry.
*/
function runSelectedApiRequest() {
var curElement = document.getElementById('api-selection-options');
var apiRequestName = curElement.options[curElement.selectedIndex].value;
updateApiResultEntry(apiRequestName);
}
/**
* Binds event listeners to handle a newly selected API request.
*/
function addSelectionSwitchingListeners() {
document.getElementById('api-selection-options')
.addEventListener('change',
runSelectedApiRequest, false);
}
/**
* Template for getting JavaScript sample code snippets.
* #param {string} method The name of the Google Cloud Storage request
* #param {string} params The parameters passed to method
*/
function getCodeSnippet(method, params) {
var objConstruction = "// Declare your parameter object\n";
objConstruction += "var params = {};";
objConstruction += "\n\n";
var param = "// Initialize your parameters \n";
for (i in params) {
param += "params['" + i + "'] = ";
param += JSON.stringify(params[i], null, '\t');
param += ";";
param += "\n";
}
param += "\n";
var methodCall = "// Make a request to the Google Cloud Storage API \n";
methodCall += "var request = gapi.client." + method + "(params);";
return objConstruction + param + methodCall;
}
/**
* Executes your Google Cloud Storage request object and, subsequently,
* inserts the response into the page.
* #param {string} request A Google Cloud Storage request object issued
* from the Google Cloud Storage JavaScript client library.
* #param {string} apiRequestName The name of the example API request.
*/
function executeRequest(request, apiRequestName) {
request.execute(function(resp) {
console.log(resp);
var apiRequestNode = document.createElement('div');
apiRequestNode.id = apiRequestName;
var apiRequestNodeHeader = document.createElement('h2');
apiRequestNodeHeader.innerHTML = apiRequestName;
var apiRequestExplanationNode = document.createElement('div');
apiRequestExplanationNode.id = apiRequestName + 'RequestExplanation';
var apiRequestExplanationNodeHeader = document.createElement('h3');
apiRequestExplanationNodeHeader.innerHTML = 'API Request Explanation';
apiRequestExplanationNode.appendChild(apiRequestExplanationNodeHeader);
var apiRequestExplanationEntry = document.createElement('p');
apiRequestExplanationEntry.innerHTML =
listApiRequestExplanations[apiRequestName];
apiRequestExplanationNode.appendChild(apiRequestExplanationEntry);
apiRequestNode.appendChild(apiRequestNodeHeader);
apiRequestNode.appendChild(apiRequestExplanationNode);
var apiRequestCodeSnippetNode = document.createElement('div');
apiRequestCodeSnippetNode.id = apiRequestName + 'CodeSnippet';
var apiRequestCodeSnippetHeader = document.createElement('h3');
apiRequestCodeSnippetHeader.innerHTML = 'API Request Code Snippet';
apiRequestCodeSnippetNode.appendChild(apiRequestCodeSnippetHeader);
var apiRequestCodeSnippetEntry = document.createElement('pre');
//If the selected API command is not 'insertObject', pass the request
//paramaters to the getCodeSnippet method call as 'request.B.rpcParams'
//else pass request paramaters as 'request.B'
if (apiRequestName != 'insertObject') {
apiRequestCodeSnippetEntry.innerHTML =
getCodeSnippet(request.B.method, request.B.rpcParams);
//Selected API Command is not 'insertObject'
//hide insert object button
filePicker.style.display = 'none';
} else {
apiRequestCodeSnippetEntry.innerHTML =
getCodeSnippet(request.B.method, request.B);
}
apiRequestCodeSnippetNode.appendChild(apiRequestCodeSnippetEntry);
apiRequestNode.appendChild(apiRequestCodeSnippetNode);
var apiResponseNode = document.createElement('div');
apiResponseNode.id = apiRequestName + 'Response';
var apiResponseHeader = document.createElement('h3');
apiResponseHeader.innerHTML = 'API Response';
apiResponseNode.appendChild(apiResponseHeader);
var apiResponseEntry = document.createElement('pre');
apiResponseEntry.innerHTML = JSON.stringify(resp, null, ' ');
apiResponseNode.appendChild(apiResponseEntry);
apiRequestNode.appendChild(apiResponseNode);
var content = document.getElementById('main-content');
content.appendChild(apiRequestNode);
});
}
/**
* Set required API keys and check authentication status.
*/
function handleClientLoad() {
gapi.client.setApiKey(apiKey);
window.setTimeout(checkAuth, 1);
}
/**
* Authorize Google Cloud Storage API.
*/
function checkAuth() {
gapi.auth.authorize({
client_id: clientId,
scope: scopes,
immediate: true
}, handleAuthResult);
}
/**
* Handle authorization.
*/
function handleAuthResult(authResult) {
var authorizeButton = document.getElementById('authorize-button');
if (authResult && !authResult.error) {
authorizeButton.style.visibility = 'hidden';
initializeApi();
filePicker.onchange = insertObject;
} else {
authorizeButton.style.visibility = '';
authorizeButton.onclick = handleAuthClick;
} console.log(gapi.auth);
}
/**
* Handle authorization click event.
*/
function handleAuthClick(event) {
gapi.auth.authorize({
client_id: clientId,
scope: scopes,
immediate: false
}, handleAuthResult);
return false;
}
/**
* Load Google Cloud Storage API v1beta12.
*/
function initializeApi() {
gapi.client.load('storage', API_VERSION);
}
/**
* Driver for sample application.
*/
$(window)
.bind('load', function() {
gapi.auth.setToken('<?php print $access_token["access_token"]; ?>');
gapi.auth.token= '<?php print $access_token["access_token"]; ?>';
console.log(gapi.auth.getToken());
addSelectionSwitchingListeners();
handleClientLoad();
});
</script>
</head>
<body>
<!--Add a button for the user to click to initiate auth sequence -->
<button id="authorize-button" style="visibility: hidden">Authorize</button>
<header>
<h1>Google Cloud Storage JavaScript Client Library Application</h1>
</header>
<label id="api-label">Try a sample API call!</label>
<select id="api-selection-options">
<option value="null">
Please select an example API call from the dropdown menu
</option>
<option value="listBuckets">
List Buckets
</option>
<option value="listObjects">
List Objects
</option>
<option value="listBucketsAccessControls">
List Buckets Access Control List
</option>
<option value="listObjectsAccessControls">
List Objects Access Control List
</option>
<option value="getBucket">
Get Bucket
</option>
<option value="getBucketAccessControls">
Get Bucket Access Controls
</option>
<option value="getObjectAccessControls">
Get Object Access Controls
</option>
<option value="insertBucket">
Insert Bucket
</option>
<option value="insertObject">
Insert Object
</option>
<option value="insertBucketAccessControls">
Insert Bucket Access Controls
</option>
<option value="insertObjectAccessControls">
Insert Object Access Controls
</option>
<option value="deleteBucket">
Delete Bucket
</option>
<option value="deleteObject">
Delete Object
</option>
</select>
<br/>
<input type="file" id="filePicker" style="display: none" />
<div id="main-content">
</div>
</body>
</html>
Does anyone have any ideas? I'm not being successful because my console prints this out:
as an error loading the page https://accounts.google.com/o/oauth2/auth?client_id=YOUR_CLIENT_ID&scope=ht…ifechurch.tv&response_type=token&state=412841043%7C0.2670569503&authuser=0

While it is possible to retrieve an access token in your server code for a service account, and then include that as part of a web-page or Javascript response to allow a browser direct access to Google Cloud Storage - this is generally a very dangerous approach, as the access token will allow anyone who has it full access to all of your Cloud Storage resources - without opportunity for your trusted server-side code to be able to apply access control restrictions specific to your application (for example to allow a user of your application only to upload/downloads files/object they should have access to).
Direct file upload/download to Cloud Storage can however be achieved a slightly different way. Google Cloud Storage supports a signed URL - this is a URL that you can generate in your server code (using the same private key you used to get an access token) that allows the bearer the ability to upload or download a specific file for a specific period of time.
Documentation for this can be found here:
https://developers.google.com/storage/docs/accesscontrol#Signed-URLs
And an example from PHP here:
https://groups.google.com/forum/#!msg/google-api-php-client/jaRYDWdpteQ/xbNTLfDhUggJ
Once you generate this URL on your server you can pass to the browser, which in turn can then PUT directly to that URL, or GET directly from it without the need to use any special Google Javascript libraries. See for an example: Google Storage REST PUT With Signed URLs

I have recently completed a similar project using Ajax to access my PHP class which controls the access token renewals, connection URls etc. As it a live connection over HTTPS no sensitive information is visible in code and I can then load the relevant data directly into javascript.
Hope this helps