· 7 years ago · Apr 09, 2018, 02:08 PM
1// The Client ID obtained from the Google API Console. Replace with your own Client ID.
2var clientId = '*********-k826p6sl1qkhpnrtbbi0jktboijupvf9.apps.googleusercontent.com';
3
4// Scope to use to access user's photos.
5var scope = 'https://www.googleapis.com/auth/drive.readonly';
6
7var pickerApiLoaded = false;
8var oauthToken;
9
10// Use the API Loader script to load google.picker and gapi.auth.
11function onApiLoad() {
12 gapi.load('auth2', onAuthApiLoad);
13 gapi.load('picker', onPickerApiLoad);
14}
15
16function onAuthApiLoad() {
17 var authBtn = document.getElementById('GoogleDrive');
18 authBtn.disabled = false;
19 authBtn.addEventListener('click', function () {
20 gapi.auth2.authorize({
21 client_id: clientId,
22 scope: scope
23 }, handleAuthResult);
24 });
25}
26
27function onPickerApiLoad() {
28 pickerApiLoaded = true;
29 createPicker();
30}
31
32function handleAuthResult(authResult) {
33
34 if (authResult && !authResult.error) {
35 oauthToken = authResult.access_token;
36 createPicker();
37 }
38}
39
40// Create and render a Picker object for picking user Photos.
41function createPicker() {
42
43 if (pickerApiLoaded && oauthToken) {
44 var picker = new google.picker.PickerBuilder().
45 addView(google.picker.ViewId.PHOTOS).
46 setOAuthToken(oauthToken).
47 setDeveloperKey(developerKey).
48 setCallback(pickerCallback).
49 build();
50 picker.setVisible(true);
51 }
52
53}
54
55// A simple callback implementation.
56function pickerCallback(data) {
57 var url = 'nothing';
58 if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
59 var doc = data[google.picker.Response.DOCUMENTS][0];
60 url = doc[google.picker.Document.URL];
61 }
62 var message = 'You picked: ' + url;
63 document.getElementById('result').innerHTML = message;
64}
65
66<script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>