Google API Configuration

In order to use the contents of Google Drive and Youtube in Valamis (Lesson Studio, Assignments), you need to configure the Google API.

  1. Get a Google account
  2. Create a project in Google

    • Go the the Google Developer Console and log in.
    • Click on the drop-down in the upper-right corner, then click New project
    • Name your project and click Create
  3. Go to the API Library

    • In your project Dashboard, click on the Enable APIs and Services button to open the Google API Library.

  4. Search and enable the Google Drive API

    • Once you've enabled it, it will notify you that you cannot use it until you create credentials. Click on the Create Credentials button.

    • The next screen will help you figure out what kind of credentials you need for the Google Drive API.

    • Choose Web browser option and User data

    • Click "What credentials do I need?"

    • Create the OAuth2.0 Client ID. Set the name and the Authorized JavaScript origins (if you develop locally on Tomcat, it will be "http://localhost:8080").

    • Click Create OAuth client ID

    • Provide your email address and the product name on the next screen.

    • Click Continue to receive a client ID. Copy this ID into the Valamis Administration portlet. Also copy the first digits of your client ID into the App ID field.

  5. Search and Enable Google Picker API

    • Search for Google Picker API in the API library and enable it.

    • Create credentials the Google Picker API.

    • You will get an API key. You may want to restrict it, as prompted. During development, this is not necessary, but it is highly recommended to restrict your API key accordingly in production.

    • Once you've got the API key, copy it to the API key field in Valamis Administration.

  6. Search and Enable YouTube Data API v3 

  7. Search and Enable Custom Search API

  8. Test your settings

    • Add a video element to the canvas in Lesson Studio, and click on the Select from Drive/Youtube button
    • Enable pop-ups on the page.
    • Log in with your Google credentials.
    • You might encounter the following error: origin_mismatch. This means that you did not set the "Authorized Javascript origins" correctly for the Client ID. If you open the Advanced tab of the error message, you will find the origins that are used in this case. Once you have set it correctly, you might have to restart your Liferay in order to make it work.
    • After that, your application will ask for permission to use certain things. Allow those.
    • You might encounter the following error: "There was an error! The API developer key is invalid." This means, that your API key is invalid. It has to be a Browser key. Try to generate it again, and restart Liferay once you've saved the new one.
    • Now, you should be able to access Google Drive and the Youtube videos.