Just go to the bottom
Here is the code that is currently working for me. This is my first hour using this API, although I really don't know what any of these functions do, and I don't know what the correct order and error handling is, but at least now it works. Perhaps this will help someone else in the future.
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google Picker Example</title> </head> <body style="width: 70%; margin: 100px auto;"> <button onclick="loadPicker();" >Open from GoogleDrive</button> <div id="result"></div> <script type="text/javascript"> </script> <script type="text/javascript" src="https://apis.google.com/js/api.js"></script> </body> </html>
Edit: if you get a popup that doesn't load, just close it and click the button again. This fixed another issue I just had.
Again, I don’t know what I'm doing, so I hope I can better understand this and clarify the situation later.
E2: Oh, there is more information about OAuth2 on the Javascript GAPI documentation page, which can be found here: https://developers.google.com/api-client-library/javascript/features/authentication
From another document, it seems that gapi.load('client', callback) will load auth2 if it is not already loaded. Calling gapi.load('client:auth2', callback) simply save 1 network request.
Note. When authorizing the application using Oauth 2.0, you also do not need to set the API key, as in the first example. However, it is good practice if your code is ever extended to handle unauthorized requests.
This explains why I can remove the API / developer key.
Edit 3: It is good that the above code is technically incorrect.
Warning: do not use this method along with recommended costs gapi.auth2.init and signIn. These are two different behaviors (authorization for gapi.auth2.authorize vs Authentication for gapi.auth2.init / signIn) and will have unexpected problems if they are used in the same application.
autorize - for single-user authentication (if you have been registered with two Google accounts, for example). Although the use of gapi.init() intended for a longer session (for example, to log in and out of a website).
How it works now, I don’t know.
Do not use the above code, just want to document the progress. Here's a better demo with getAuthResponse()
<html> <head></head> <body> <div style="padding: 50px"> <h2 style="color: #2196f3;">Status: <span id='status'></span></h2> <button id="signin-button" onclick="handleSignInClick()">Sign In</button> <button id="signout-button" onclick="handleSignOutClick()">Sign Out</button> <button id="signout-button" onclick="openFile()">Open File</button> </div> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> var cid = '<CLIENTID_HERE>'; var scope = 'https://www.googleapis.com/auth/drive'; var authenticated = false; var pickerLoaded = false; var auth = null; var user = null; var response = null; var token = null; var stat = $('#status'); function openFile() { gapi.load('client:auth2', initClient); gapi.load('picker', onPickerLoad); } function initClient() { stat.html("starting"); gapi.client.init({ clientId: cid, scope: scope }).then( function () { console.log("init"); </script> <script async defer src="https://apis.google.com/js/api.js"> </script> </body> </html>