How To Set Up A Google Drive Client Id For Access Without A Local Server?

May 08, 2024 Post a Comment

I'm wondering if it's possible to, say, open up a jsfiddle on a random computer and log in and authenticate and use the drive API, without having to have a local server running all

Solution 1:

Okay, so I found a solution that works pretty well:

Make an OAuth.io account (It's free).
Once you're logged in, go to your oauth.io dashboard.
You should be looking at a Default App, or you can make another one it doesn't really matter.
Under "Domains & URLs whitelist", you'll see a little box that says "localhost." Type in " http://fiddle.jshell.net/" (without the quotes) and press enter. This allows any jsfiddle to authenticate with your application
Next, we need to enable Google Drive support
- Go to the Google Developers Console
- Like before, navigate to Credentials under APIs and Auth.
- Click "Create new Client ID"
- Select Web Application
- Under "Redirect URIs" put "https://oauth.io/auth" and "http://oauth.io/auth" (without quotes, on separate lines)
- Under "Javascript Origins" put "https://oauth.io" and "http://oauth.io"
- Press "Create Client ID"
Now go to your Oauth.io key manager. Click on Google Drive in the list to the left. Press next, and enter your client_id and client_secret that you created in the previous step (via the Google Developers Console)
1. Select online (at least online is preferred since offline should be for server side only)
2. Click on the Scope text book, and select "https://www.googleapis.com/auth/drive (View and manage the files in your google Drive)."
3. Press finish. Now click on the Try Auth button, and hopefully you should get some output like

{
  "access_token": "ya29.AwH-1N_gnstLBuZfOR4W9CCcggKrQpMyKYV4QVEtCiIzHozNU5AfUJoYQzukALfjdiw2iOCUve7JbQ",
  "token_type": "Bearer",
  "expires_in": 3600,
  "provider": "google_drive"
}

To use this, you can do something like:

// This only works because we're set to "No wrap - in <head>"functionShowDriveFileList() {
    var accessToken;
    // Initialize OAuth with our key
    OAuth.initialize('lmGlb8BaftfF4Y5en_c8XYOSq2A');

   // Connect to google drive, and print out file list
    OAuth.popup('google_drive').done(function (result) {
    var xmlHttp = null;
        xmlHttp = new XMLHttpRequest();
        xmlHttp.open("GET", "https://www.googleapis.com/drive/v2/files", false);
        xmlHttp.setRequestHeader("Authorization", "Bearer " + result.access_token);
        xmlHttp.send(null);
        alert(xmlHttp.responseText);
    }).fail(function (err) {
        alert(err);
    });;
}

Which you can find at http://jsfiddle.net/JMTVz/41/. This uses my oauth.io client id, but you can replace it with yours and it should work as well.

Solution 2:

You can do the same thing using the OAuth Playground.

Step 11 will be different. Instead of pasting the refresh token into your server app (which you don't have), you'll paste the access token into your JS in the same way as you are doing in your answer.

JavaScript Square

How To Set Up A Google Drive Client Id For Access Without A Local Server?

Solution 1:

Solution 2:

Post a Comment for "How To Set Up A Google Drive Client Id For Access Without A Local Server?"