...
The Google API Integration plugin includes Google Auth, Google Calendar, Google Drive, Google Sheets. Utilises OAuth2.0 where you can authorise using frontend and the authorization code will be passed through backend to get the bearer token. It uses REST API to communicate to Google.
Google Auth
Form Element
Securely enable users to sign in with their Google accounts via OAuth 2.0
Authorise and retrieve bearer token from frontend to be saved into App Variable
Google Calendar
Post Processing Tool
Allow users to add calendar events
Google Drive
File Upload Element and Datalist Binder
Allow users to upload file to Google Drive
Retrieves all files from Google Drive in datalist
Google Sheets
Form Binder
Perform CRUD on Google Sheets
Plugin Info
Plugins Available in the Bundle:
...
To be able to authorise to Google using Google Auth, and perform actions related to Google Calendar, Google Drive, and Google Sheets, such as adding Google Calendar events, uploading files to Google Drive, retrieving file lists, and performing CRUD operations on Google Sheets.
Get Started
Prerequisites
1. Google Cloud Console Setup
Setup an application and project in Google Cloud Console by referring to Google Documentation.
Figure 1: Google Cloud Console Create Project
2. Google OAuth 2.0 Client ID
Create a Google OAuth 2.0 Client ID and remember to key in the redirect URIs following the format as in Table 1. You will need to note down the Client ID and Client secret to be used in the plugin configuration later.
Figure 2: Google Cloud Console Create Web Application
| Format | Example |
|---|---|
| <domain>/jw/web/json/plugin/org.joget.marketplace.auth.GoogleAuth/service | http://localhost:8080/jw/web/json/plugin/org.joget.marketplace.auth.GoogleAuth/service |
Table 1: Format for redirect URI
You will face this error if you did not key in the Redirect URI. You can also retrieve the redirect URI by this way, by clicking on the "error details".
Figure 3: Redirect URI Mismatch Error
3. Enable Necessary APIs
On the sidebar, search for APIs and Services > Library and enable necessary APIs such as Google Calendar API, Google Sheets API, Google Drive API.
...
Figure 4: Google Cloud Console API Library
4. Setup Test User
On the sidebar, navigate to OAuth consent screen > Test users, click on Add Users to add a new test user to be able to authenticate to the application.
...
Figure 36: Plugin Configurations for Google Auth
Name | Description |
|---|---|
| Custom ID * | Element custom ID. |
| Label * | Button label. |
| Client ID from Fixed App Variable * | A unique identifier for the application requesting access. |
Client Secret from Fixed App Variable * | A confidential key associated with the client ID, used to verify the identity of the application. |
Scopes * | OAuth 2.0 scopes to determine which Google APIs and services the application can access. For example, "https://www.googleapis.com/auth/spreadsheets https://www.googleapis.com/auth/drive https://www.googleapis.com/auth/calendar" can allow access to Google Sheets, Google Drive and Google Calendar. |
Google Calendar Add Event Properties
...
Figure 37: Plugin Configurations for Google Calendar Add Event
Name | Description |
|---|---|
| Form ID * | The form that has the plugin attached. |
| Event Details | Header |
| Title * | Title of the calendar event. |
Start Date * | Start date of the calendar event. |
End Date * | End date of the calendar event. |
Calendar ID * | The email address of the calendar owner for primary calendars, or a specific identifier for secondary calendars. |
Google Sheets Form Binder Properties
...
Figure 39: Plugin Configurations for Google Sheets Form Binder - Action Type Modify Data
Name | Description |
|---|---|
| Action Type * | Action to be performed to the Google Sheet
|
| Form * | Form with plugin attached |
| Spreadsheet Name * | If Action Type is Create New Spreadsheet, this field is to retrieve the spreadsheet name to create a new spreadsheet. |
| Form Field Mappings | If Action Type is Modify Data, this grid is to map all the fields to the necessary fields
|
Allow to store data in local database | If Action Type is Modify Data, if checked, the data will be added to the spreadsheet and stored as a record in Joget database. If unchecked, the data will only be added to the spreadsheet. |
Source Code and Plugin Download
...