Skip to content

Google Drive Persistence

Jump to bottom
angelsl edited this page Jun 24, 2020 · 4 revisions

User interface and flow

The first time the user opens the popover, this is shown:

image

Open shows the Google Drive Picker. The user can select a file to open in the workspace, overwriting the previous contents of the workspace.

Save as shows the Google Drive Picker twice—once to let the user pick a folder, and then once to let the user pick a file to overwrite. The UX here is not great, but we are constrained by the Picker, which is designed as a file open dialog, not as a save-as dialog.

If the user is not logged in, clicking either of the buttons will start the log-in process.

When a file is open, the popover label changes to show the filename, and the Save button is enabled:

image

Obtaining the API keys from the Google API Console

  1. Go to the API Console.

  2. You can create a new project, or use an existing project. The project name does not matter.

  3. To obtain REACT_APP_GOOGLE_APP_ID, open IAM & Admin → Settings and look for the project number.

    image

  4. Go to APIs & Services → Library. Search for the Google Drive API and Google Picker API, and enable them.

  5. Next, set up the OAuth consent screen. Go to APIs & Services → OAuth consent screen. Fill in the details as requested. (You may need to first click on Edit app).

    Add the https://www.googleapis.com/auth/drive.file OAuth scope.

  6. Next, generate OAuth credentials. Go to APIs & Services → Credentials. Click Create credentials, and select OAuth client ID.

    For the application type, select Web application.

    Under Authorized JavaScript origins, specify the origin(s) as appropriate, by taking the URL to your deployment and dropping the path. For example, if your deployment is at https://source-academy.github.io:1234/some/path, then add https://source-academy.github.io:1234 as an origin. (If you are not using a non-standard port, then you can leave the port off.)

    REACT_APP_GOOGLE_CLIENT_ID is the generated OAuth client ID.

  7. Next, generate an API key for the Google Picker API. Go to APIs & Services → Credentials. Click Create credentials, and select API key.

    A dialog will appear with the API key. Click on Restrict key.

    Under Application restrictions, select HTTP referrers. Then under Website restrictions, add your deployment URL followed by a *. For example, if your deployment is at https://source-academy.github.io:1234/some/path, then add https://source-academy.github.io:1234/some/path/*.

    Under API restrictions, you can either leave it at Don't restrict key, or Restrict key, and then allow the Google Drive and Picker APIs.

    REACT_APP_GOOGLE_API_KEY is the API key generated.

Clone this wiki locally