Setting up Google API Integration for Map, Drive, Picker in Claromentis 8.3+

Overview

This guide shows you step by step guide to set up a new Integration project with Google APIs for Claromentis 8.3+

Starting Claromentis 8.3 we have introduced a new panel in Sysadmin Panel to manage all API keys in one place.

Purpose:

1. Document Application

Browsing content of Google Drive within Documents application and gathering necessary information such as document title and content searching.

2. Event Application

Allowing predictive input when adding a location for an event

3. Weather Component

Our Weather Component (from Claromentis 8.6+) requires Dark Sky API and Google Map API to be configured.

 

 

How to

Step 1: Login to Google Developer Console

https://console.developers.google.com/

using our Support Google Account for our internal system  support@claromentis.com
It is advisable for on-premise clients to register API key using their own Google credentials.

 

Step 2: Create a Project

If you have not yet created a project for your system, you can create a new project 

Step 3: Enable APIs and Services

From Dashboard click on Enable APIs and Services here are the list of APIs that required to be enabled:

1. Google Drive API - for accessing and getting file information such as title from Google Drive

2. Google Picker API - for enabling Browse Google Drive document picker to add files easily from Google Drive

3. Maps Embed API - for having google embedded in Event application and CK Editor

4. Maps Static API - required API to have map integration on Event and CK Editor

5. Geocoding API - required to read location in Event App and Weather.

6. Maps Javascript API - required to have predictive location search in the Events app

7. Places API  - required to read Google Places data in the Events app

 

Step 4: Set-up Google Map API

4.1 Click on Credentials menu on the left to create credentials, click Create credentials and select API key

API key will be generated, rename it to [System Name]Google Map API  for example  MyWorkplace Google Map API for ease of identification later.

 

4.2 At Claromentis navigate to Admin > Sysadmin Panel > API keys

Click on Add new integration

API name: google_maps

API description: Google Maps API key

API help: Displaying Google Maps and Google Places predictive input for weather component and event app.

Entry Key: api_key

Entry Value: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Copy value from Google Map API as shown above

 

 

Step 5: Set-up Google Document Picker

For Google Document picker you are going to need both API key and OAuth Client ID

5.1 Click on Credentials menu on the left to create credentials, click Create credentials and select API key

API key will be generated, rename it to [System Name]Google Picker API  for example  MyWorkplace Google Picker API for ease of identification later.

5.2 Click on Credentials menu on the left to create credentials, click Create credentials and selectOAuth Client ID

Application type: Web application

Authorised Javascript Origins: URL of the system

Your intranet URL (eg. https://workplace.myintranet.com)

Authorised redirect URIs

Your intranet URL followed by /intranet/panels/docsadmin_google.php

(eg. https://workplace.myintranet.com/intranet/panels/docsadmin_google.php)

5.3 Upon submission, you may get a warning about limited scope login, Please remember to set-up Google Domain Verification after this stage, guide can be found below.

Google Domain Verification

Take a note of client ID

 

5.4. Creating OAuth client ID require you to configure Consent Screen 

Email address: the same email to access the developer console

Product Logo URL:

https://[yourintranetaddress]/images/favicons/icon-150.png

replace [yourintranetaddress] with your actual URL of claromentis for example http://workplace.claromentis.com

 

Privacy policy URL: link to client's privacy policy

 

5.5 At Claromentis navigate to Admin > Sysadmin Panel > API keys

API Name: google_picker

API Description: Google Picker key and OAuth details

API help: Allowing user to pick a document from Google Docs

developer_key: copy value from Google Picker API

client_id: is the client id from OAuth Client IDs

app_id this can be ignored

 

Step 6: Set-up Google OAuth for Document

This Integration allows gathering additional information about a document when adding from Google Docs

 

Copy & Paste Client ID and Client secret from Google Console into Google OAuth for Document

 

API Name: docs_google_auth

API Description: Google OAuth for Documents

API help: Allows gathering additional information about a document when adding from Google Docs

client_id: is the client id from OAuth Client IDs

client_secret: enter client secret from OAuth Client ID

 

 

Step 7: Testing & Verification.

 

7.1. Document Admin

Testing Google Document Indexing

Navigate to Admin > Documents > Google Authentication

Check API status 

7.2. Adding Google Documents

Add a document from Google by Browse Google Document, you will be prompted to authorize access to your Google Drive

7.3. In Events app - create an event and check event location predictive input

Create an event and check predictive input when typing location.

 



TROUBLESHOOTING

Event App - Location

This page can't load Google Maps Correctly

 

Cause:

This error is caused by misconfiguration in Google Maps API

Solution:

Check Google Maps API Key in Admin / System / API keys / google_maps

 

Documents

Error: redirect_uri_mismatch

Error 400

Browse google document and getting 

This error is caused by incorrect Authorised Javascript Origins and Authorised redirect URIs origin specified in Step 5.2

Navigate to the Google API Console and make the amendments.

Created on 27 March 2018 by Michael Christian. Last modified on 4 June 2019

Was this helpful?  

1 Like
Share