{"id":22164,"date":"2018-07-16T12:15:45","date_gmt":"2018-07-16T09:15:45","guid":{"rendered":"https:\/\/www.webcodegeeks.com\/?p=22164"},"modified":"2018-07-13T11:14:39","modified_gmt":"2018-07-13T08:14:39","slug":"server-less-google-drive-client-html-js","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/web-development\/server-less-google-drive-client-html-js\/","title":{"rendered":"How to create a Server-less Google Drive client using only HTML and JavaScript"},"content":{"rendered":"

A few days ago, I had to work on a project of this kind and the information and documentation available on this topic was quite bewildering. As a result, I decided to write this article in order to make everything available at one place.<\/p>\n

Almost everyone knows about the Google API Python Client <\/a>(and similar others in Java, PHP, etc.) which can be accessed from the server, but few are aware that Google even supports a totally server-less implementation of a client using only client-side technology (HTML\/JavaScript). The only caveat here is that your app won\u2019t get a permanent access token like the server side apps do, but instead, has a temporary access until your web page isn\u2019t closed. Here is how to go about doing it:<\/p>\n

Step-1: Register your App by visiting the Google Cloud Console:<\/h2>\n

As usual, visit the Google Cloud Console <\/a>and register your app first, enable the Google Drive API by visiting \u201cAPIs & Services\u201d=>\u201dDashboard\u201d, then click on \u201cCredentials\u201d to create an API Key, an OAuth credential and setup the authentication screen for your user. While setting credentials, remember to add your app\u2019s URL in authorized Redirect-URIs section. If you have multiple URLs for your app (like localhost for testing, www.YourSite.com for production, etc., then add them all to the list):<\/p>\n

\"google<\/a>
Credentials Configuration: Redirect URIs<\/figcaption><\/figure>\n

Step-2: Setup the OAuth consent screen.<\/h2>\n

This is what your user will see when they visit your app and it redirects them to Google for getting permissions for Drive access. Click on the \u201cOAuth consent screen\u201d tab and configure it with your app\u2019s name, logo, etc.<\/p>\n

Step-3: Add script references.<\/h2>\n

After you create the credentials and get your ClientID, API Key and secret key (not useful for our app, really), the next step is to start building the app. I usually prefer to keep the JavaScript logic in a separate file such as app.js instead of keeping it in the main index.html. Just add a script tag in your main index.html and add a reference to this app.js in which you\u2019ll write the Google Drive logic:<\/p>\n

<script src=\"\/static\/app.js\"><\/script><\/pre>\n
I\u2019ve kept the app.js in a sub-folder named \/static, if yours is different, then adjust the path accordingly. You\u2019ll also need to add a reference to Google authentication library in order to perform the OAuth authentication:<\/p>\n
<script async defer src=\"https:\/\/apis.google.com\/js\/api.js\" \r\n onload=\"this.onload=function(){};handleClientLoad()\" \r\n onreadystatechange=\"if (this.readyState === 'complete') this.onload()\"><\/script><\/pre>\n
Finally, also add a reference to jQuery if you want to use it. In most apps, its usually a must!<\/p>\n
<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.3\/jquery.min.js\"><\/script><\/pre>\n
Step-4: Build the app.<\/h2>\n
Now, in your app.js, first add global variables that you\u2019ll need throughout your app:<\/p>\n
var GoogleAuth;\r\nvar SCOPE = 'https:\/\/www.googleapis.com\/auth\/drive'; \/\/.metadata.readonly\r\nSCOPE += \" https:\/\/www.googleapis.com\/auth\/drive.install\";\r\nSCOPE += \" https:\/\/www.googleapis.com\/auth\/drive.file\";\r\n\r\nvar files = []; \/\/array to store the list of files in user's drive.<\/pre>\n
Add the scopes as per your requirements, I had included auth\/drive.install<\/code> and auth\/drive.file<\/code> only because I had to provide an \u201copen with this app\u201d feature in the user\u2019s own google drive interface so that they may visit our app and run their files through it, and thus use it as a \u201cfile opener\u201d. If you don\u2019t need to provide such extended features and just want full access to the user\u2019s files, then the first one (auth\/drive<\/code>) is sufficient.<\/p>\n
After that, write the entry point for our app in app.js. As per the script attribute, you\u2019ll be redirected here by the Google authentication library:<\/p>\n
\/**\r\n* This is the entry-point that gapi calls.\r\n* \r\n* *\/\r\nfunction handleClientLoad() {\r\n \/\/ Load the API's client and auth2 modules.\r\n \/\/ Call the initClient function after the modules load.\r\n gapi.load('client:auth2', initClient);\r\n}<\/pre>\n
gapi.load()<\/code> loads the auth library and prepares your app for authentication, then signals the control to initClient()<\/code> function where you\u2019ll perform the actual authentication like this:<\/p>\n
\u00a0\/**\r\n * starts the client authorization, most useful for debugging.\r\n * \r\n * *\/\r\nfunction initClient() {\r\n\t\/\/ Retrieve the discovery document for version 3 of Google Drive API.\r\n\t\/\/ In practice, your app can retrieve one or more discovery documents.\r\n\tvar discoveryUrl = 'https:\/\/www.googleapis.com\/discovery\/v1\/apis\/drive\/v3\/rest';\r\n\r\n\t\/\/ Initialize the gapi.client object, which app uses to make API requests.\r\n\t\/\/ Get API key and client ID from API Console.\r\n\t\/\/ 'scope' field specifies space-delimited list of access scopes.\r\n\tgapi.client.init({\r\n\t\tapiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',\r\n\t\tdiscoveryDocs: [discoveryUrl],\r\n\t\tclientId: 'yyyyyyyyyy-yyyyyyyyyyyyyy.apps.googleusercontent.com',\r\n\t\tscope: SCOPE\r\n\t}).then(function () {\r\n\t  console.log(\"init happened successfully.\");\r\n\t  GoogleAuth = gapi.auth2.getAuthInstance();\r\n\t  \r\n\t  console.log(\"now binding updateSigninStatus\");\r\n\t  GoogleAuth.isSignedIn.listen(updateSigninStatus); \/\/ Listen for sign-in state changes.\r\n\r\n\t  \/\/ Listen for sign-in state changes.\r\n\t  console.log(\"now calling updateSigninStatus\");\r\n\t  updateSigninStatus(GoogleAuth.isSignedIn.get());\r\n\r\n\t  \/\/ Handle initial sign-in state. (Determine if user is already signed in.)\r\n\t  \/\/var user = GoogleAuth.currentUser.get();\r\n\t  \r\n\t  \/\/ Call handleAuthClick function when user clicks on\r\n\t  \/\/      \"Sign In\/Authorize\" button.\r\n\t  $('#sign-in-or-out-button').click(function() {\r\n\t\thandleAuthClick();\r\n\t  }); \r\n\t  $('#revoke-access-button').click(function() {\r\n\t\trevokeAccess();\r\n\t  }); \r\n\r\n\t}, function(error){\r\n\t\tconsole.log(\"ERROR in gapi.init:\", error);\r\n\t});\r\n}<\/pre>\n
(Remember to replace the long string of \u201cxxxxxx\u2026\u201d with your own API Key, and the long string of \u201cyyyyyy\u2026.\u201d with your own Client ID)<\/p>\n
gapi.client.init()<\/code> is an important function which does all the hard work of checking whether a user is authenticated, and if not, then redirect them to Google\u2019s servers, perform the authentication, and if successful, redirect them back to your server and inside the .then()<\/code> block in which you\u2019ll handle your applications logic (like displaying the logged-in user\u2019s name which you get using GoogleAuth.currentUser.get()<\/code>, update the logged-in status (toggle sign-in and sign-out buttons accordingly), etc:<\/p>\n
gapi.client<\/code> is your global variable that could be used for doing all kinds of stuff. For example, this is how you can list the files available in the Google Drive\u2019s root folder of the user as links in your document:<\/p>\n
gapi.client.drive.files.get({\r\n\t\tfileId: id,\r\n\t\tfields: 'name,webContentLink'\r\n\t}).then(function(success) {\r\n\t\tvar webContentLink = success.result.webContentLink;\r\n\t\tvar fileName = success.result.name;\r\n\t\tconsole.log(\"SUCCESS! name is: \", webContentLink);\r\n\t\tconsole.log(\"SUCCESS! webContentLink is: \", webContentLink);\r\n\t\t$source = $(\"<a href='\" + webContentLink + \"' >\" + fileName + \"<a>\");\r\n\t\t$('body').append($source);\r\n\t}, function(fail){\r\n\t\tconsole.log(fail);\r\n\t\tconsole.log('Error '+ fail.result.error.message);\r\n\t});<\/pre>\n
The name<\/code> field represents the file name and webContentLink<\/code> is the actual link to the file in the user\u2019s drive, you can use it however in your app once you get it (like download it using the AJAX jquery.get()<\/code> method, etc.).<\/p>\n
\n\n\n\n
Published on Web Code Geeks with permission by Prahlad Yeri, partner at our WCG program<\/a>. See the original article here: How to create a Server-less Google Drive client using only HTML and JavaScript<\/a><\/p>\n
Opinions expressed by Web Code Geeks contributors are their own.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
A few days ago, I had to work on a project of this kind and the information and documentation available on this topic was quite bewildering. As a result, I decided to write this article in order to make everything available at one place. Almost everyone knows about the Google API Python Client (and similar …<\/p>\n","protected":false},"author":20,"featured_media":920,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[416,82],"class_list":["post-22164","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development","tag-html","tag-javascript"],"yoast_head":"\nHow to create a Server-less Google Drive client using only HTML and JavaScript - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"Interested to learn more about google drive client? Then check out our article where we create a server-less google drive client with HTML and JavaScript!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/web-development\/server-less-google-drive-client-html-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create a Server-less Google Drive client using only HTML and JavaScript - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"Interested to learn more about google drive client? Then check out our article where we create a server-less google drive client with HTML and JavaScript!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/web-development\/server-less-google-drive-client-html-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/prahlad1981\" \/>\n<meta property=\"article:published_time\" content=\"2018-07-16T09:15:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Prahlad Yeri\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/prahladyeri\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Prahlad Yeri\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/web-development\/server-less-google-drive-client-html-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/web-development\/server-less-google-drive-client-html-js\/\"},\"author\":{\"name\":\"Prahlad Yeri\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/adbf41ec03855cdb1730dd42f2725bfd\"},\"headline\":\"How to create a Server-less Google Drive client using only HTML and JavaScript\",\"datePublished\":\"2018-07-16T09:15:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/web-development\/server-less-google-drive-client-html-js\/\"},\"wordCount\":807,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/web-development\/server-less-google-drive-client-html-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"keywords\":[\"HTML\",\"javascript\"],\"articleSection\":[\"Web Dev\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/web-development\/server-less-google-drive-client-html-js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/web-development\/server-less-google-drive-client-html-js\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/web-development\/server-less-google-drive-client-html-js\/\",\"name\":\"How to create a Server-less Google Drive client using only HTML and JavaScript - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/web-development\/server-less-google-drive-client-html-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/web-development\/server-less-google-drive-client-html-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"datePublished\":\"2018-07-16T09:15:45+00:00\",\"description\":\"Interested to learn more about google drive client? Then check out our article where we create a server-less google drive client with HTML and JavaScript!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/web-development\/server-less-google-drive-client-html-js\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/web-development\/server-less-google-drive-client-html-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/web-development\/server-less-google-drive-client-html-js\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/web-development\/server-less-google-drive-client-html-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Dev\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/web-development\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to create a Server-less Google Drive client using only HTML and JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/adbf41ec03855cdb1730dd42f2725bfd\",\"name\":\"Prahlad Yeri\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/70a8e7bba939c7539943aa1191374d2504d95a2a95acb04a1e44adc3b4c72fe3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/70a8e7bba939c7539943aa1191374d2504d95a2a95acb04a1e44adc3b4c72fe3?s=96&d=mm&r=g\",\"caption\":\"Prahlad Yeri\"},\"description\":\"Prahlad is a freelance software developer working on web and mobile application development. He also likes to blog about programming and contribute to opensource.\",\"sameAs\":[\"http:\/\/www.prahladyeri.com\/\",\"https:\/\/www.facebook.com\/prahlad1981\",\"http:\/\/in.linkedin.com\/pub\/prahlad-yeri\/16\/a53\/243\/\",\"https:\/\/x.com\/https:\/\/twitter.com\/prahladyeri\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/prahlad-yeri\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to create a Server-less Google Drive client using only HTML and JavaScript - Web Code Geeks - 2026","description":"Interested to learn more about google drive client? Then check out our article where we create a server-less google drive client with HTML and JavaScript!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/web-development\/server-less-google-drive-client-html-js\/","og_locale":"en_US","og_type":"article","og_title":"How to create a Server-less Google Drive client using only HTML and JavaScript - Web Code Geeks - 2026","og_description":"Interested to learn more about google drive client? Then check out our article where we create a server-less google drive client with HTML and JavaScript!","og_url":"https:\/\/www.webcodegeeks.com\/web-development\/server-less-google-drive-client-html-js\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/prahlad1981","article_published_time":"2018-07-16T09:15:45+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","type":"image\/jpeg"}],"author":"Prahlad Yeri","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/prahladyeri","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Prahlad Yeri","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/web-development\/server-less-google-drive-client-html-js\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/web-development\/server-less-google-drive-client-html-js\/"},"author":{"name":"Prahlad Yeri","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/adbf41ec03855cdb1730dd42f2725bfd"},"headline":"How to create a Server-less Google Drive client using only HTML and JavaScript","datePublished":"2018-07-16T09:15:45+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/web-development\/server-less-google-drive-client-html-js\/"},"wordCount":807,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/web-development\/server-less-google-drive-client-html-js\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","keywords":["HTML","javascript"],"articleSection":["Web Dev"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/web-development\/server-less-google-drive-client-html-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/web-development\/server-less-google-drive-client-html-js\/","url":"https:\/\/www.webcodegeeks.com\/web-development\/server-less-google-drive-client-html-js\/","name":"How to create a Server-less Google Drive client using only HTML and JavaScript - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/web-development\/server-less-google-drive-client-html-js\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/web-development\/server-less-google-drive-client-html-js\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","datePublished":"2018-07-16T09:15:45+00:00","description":"Interested to learn more about google drive client? Then check out our article where we create a server-less google drive client with HTML and JavaScript!","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/web-development\/server-less-google-drive-client-html-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/web-development\/server-less-google-drive-client-html-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/web-development\/server-less-google-drive-client-html-js\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/web-development\/server-less-google-drive-client-html-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"Web Dev","item":"https:\/\/www.webcodegeeks.com\/category\/web-development\/"},{"@type":"ListItem","position":3,"name":"How to create a Server-less Google Drive client using only HTML and JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/adbf41ec03855cdb1730dd42f2725bfd","name":"Prahlad Yeri","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/70a8e7bba939c7539943aa1191374d2504d95a2a95acb04a1e44adc3b4c72fe3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/70a8e7bba939c7539943aa1191374d2504d95a2a95acb04a1e44adc3b4c72fe3?s=96&d=mm&r=g","caption":"Prahlad Yeri"},"description":"Prahlad is a freelance software developer working on web and mobile application development. He also likes to blog about programming and contribute to opensource.","sameAs":["http:\/\/www.prahladyeri.com\/","https:\/\/www.facebook.com\/prahlad1981","http:\/\/in.linkedin.com\/pub\/prahlad-yeri\/16\/a53\/243\/","https:\/\/x.com\/https:\/\/twitter.com\/prahladyeri"],"url":"https:\/\/www.webcodegeeks.com\/author\/prahlad-yeri\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/22164","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=22164"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/22164\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/920"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=22164"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=22164"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=22164"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}