Google Drive

You can use files that are on your Google Drive rather than recreating their contents from scratch.

There are two ways to use files on Google Drive:

• embed a file (for Google Docs, Sheets, Slides, and Drawings)
• import a file (currently only for Google Docs)

Embed a file

Embedding a file is the simpler option:

1. Publish the file to the web and get the URL for the published copy. Learn more about publishing a file on Google Drive.

2. In the course content, click a component from the content editor’s menu:

   • Docs: use the Google Doc component

   • Sheets: use the Google Sheet component

   • Slides: use the IFrame component

   • Drawings: use the Image component

Import a file

Importing a file from Google Drive into Course Builder lets you edit the file in Course Builder and make it available along with the rest of your course content. Note that changes made to an imported file in Course Builder are not reflected in the file on Google Drive.

To import a file, you use the content editor’s Google Drive component.

This option is currently available only for Google Docs. For other Google Drive file types, you can embed the file instead.

Setting up to import from Google Drive

To be able to import from Google Drive, your course must be able to call certain Google APIs.

Adding this ability takes several steps in both Course Builder and Google Developers Console. The steps can be divided into two parts:

• enable two Google APIs for your site
• get credentials for your course

To take these steps, you must be signed into a Google account with

• edit-level project permissions on the Google Developers Console
• site-wide admin permissions for Course Builder

Enable required Google APIs

To enable required Google APIs, you must enable the Google Drive and Google Picker APIs in Google Developer Console:

1. Go to Google Developers Console.

2. Make sure that the project that includes the course is selected.

3. Open the API Manager on the console dashboard.

API Manager

The API Manager Library page lists popular Google APIs and provides a search bar to find others.

Each API has its own page with an Enable button right at the top.

Enable Drive API

1. Search for Drive API.
2. Click Drive API in the results to open its API page
3. Click Enable.

Enable Google Picker API

1. Search for Google Picker API.
2. Click Google Picker API in the results to open its API page
3. Click Enable.

Now your site is enabled to use these two APIs, but you still need credentials to allow the course to make calls to them.

Get Credentials

To make calls to Google APIs from you Course Builder app, you need two credentials:

• an API key
• an OAuth client ID and secret

In API Manager’s lefthand menu, click Credentials.

• If the necessary credentials are already listed, you can copy and paste them into the appropriate course settings.

• If not, you must

  • create an API Key
  • create an OAuth client ID and secret

Create API key

1. Click the New Credentials drop-down menu and select API key.

2. Select Browser key from the choices that appear.

3. In the dialog that appears, fill out two fields:

   • For the Name field, you can keep the default name.

   • For the Accept requests from these HTTP referrers field, add the URL pattern for your site. For example, if your site URL is https://introduction-to-haiku.appspot.com, enter

     *introduction-to-haiku.appspot.com/*
     

4. Click Create.

Create OAuth client ID and secret

Creating the OAuth client ID and secret takes two steps:

• enter consent screen details

• create the client ID and secret

OAuth consent screen details

When your site requires access to private data (such as a file on Google Drive), the owner of the account will be asked to consent to the access. To prepare the consent screen to ask for access, you must provide a product name and an email address.

1. Click the OAuth consent screen tab.

2. Fill out the fields:

   • For Email address, select one of the valid addresses.

   • For Product name show to users, enter the name of your course or site.

   • Considering ignoring the other fields, which are optional.

3. Click Save.

OAuth client ID and secret

1. Click New Credentials and select OAuth client ID.

2. Fill out the following fields:

   • For Application type, select Web application.

   • For Name, you can keep the default name.

   • In Authorized Javascript origins, enter the URL for your Course Builder site. For example, if your application URL is https://www.introduction-to-haiku.appspot.com/, then enter

     https://introduction-to-haiku.appspot.com
     

   • In the Authorized redirect URIs, delete any URIs. This field must be empty.

3. Click Create.

You will be presented with a client ID and a client secret.

Enter credentials in Course Builder

To enter credentials in course settings, you can copy and paste them from the API Manager’s Credentials page.

1. In Course Builder, go to Settings > Course.

2. Find Google API Key and enter the API key listed in your project’s API credentials.

3. Find Google Client ID and enter the client ID listed in your project’s API credentials.

4. Find Google Client Secret and enter the client secret listed in your project’s API credentials.

5. Click Save to save these changes.

Remember that you must enter these credentials for each course to import from Google Drive using the content editor’s Google Drive component.