Authenticate with Google

You can authenticate with Google to create your own instance of the Gmail element through the UI or through APIs. Once authenticated, you can use the element instance to access the different functionality offered by the Google platform.

Authenticate Through the UI

Use the UI to authenticate with Google and create a Gmail element instance. Google authentication follows the typical OAuth 2.0 framework and you will need to sign in to Google as part of the process.

If you are configuring events, see the Events section.

To authenticate an element instance:

  1. Sign in to Cloud Elements, and then search for Gmail in our Elements Catalog. Search
  2. Hover over the element card, and then click Authenticate. Create Instance
  3. Enter a name for the element instance.
  4. Optionally type or select one or more Element Instance Tags to add to the authenticated element instance.
  5. Click Create Instance.
  6. Provide your Google credentials, and then allow the connection.

After successfully authenticating, we give you several options for next steps. Make requests using the API docs associated with the instance, map the instance to a virtual data resource, or use it in a formula template.

Authenticate Through API

Authenticating through API is similar to authenticating via the UI. Instead of clicking and typing through a series of buttons, text boxes, and menus, you will instead send a request to our instance endpoint. The end result is the same, though: an authenticated element instance with a token and id.

Authenticating through API follows a multi-step OAuth 2.0 process that involves:

1
Redirect URL

2
Authenticate Users

3
Authenticate Instance

Getting a Redirect URL

1
Redirect URL

2
Authenticate Users

3
Authenticate Instance

Use the following API call to request a redirect URL where the user can authenticate with the service provider. Replace {keyOrId} with the element key, gmail.

curl -X GET /elements/{keyOrId}/oauth/url?apiKey=<api_key>&apiSecret=<api_secret>&callbackUrl=<url>&siteAddress=<url>

Query Parameters

Query Parameter Description
apiKey The API key or client ID obtained from registering your app with the provider. This is the Client ID that you recorded in API Provider Setup.
apiSecret The client secret obtained from registering your app with the API provider. This is the Client secret that you recorded in API Provider Setup.
callbackUrl The URL that the API provider returns a user to after they authorize access. This is the Authorized redirect URI that you recorded in API Provider Setup

Example cURL

curl -X GET \
'https://api.cloud-elements.com/elements/api-v2/elements/gmail/oauth/url?apiKey=Rand0MAP1-key&apiSecret=fak3AP1-s3Cr3t&callbackUrl=https:%3A%2F%2Fwww.mycoolapp.com%2auth' \

Example Response

Use the oauthUrl in the response to allow users to authenticate with the vendor.

{
  "oauthUrl": "https://accounts.google.com/o/oauth2/v2/auth?access_type=offline&prompt=consent&scope=https%3A%2F%2Fmail.google.com%2F+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fgmail.settings.basic&response_type=code&redirect_uri=https%3A%2F%2Fhttpbin.org%2Fget&state=gmail&client_id=902730456353-eg6u18jk0b6ud8lcp3gg6i3r9l8fhvf3.apps.googleusercontent.com",
  "element": "gmail"
}

Authenticating Users and Receiving the Authorization Grant Code

1
Redirect URL

2
Authenticate Users

3
Authenticate Instance

Provide the oauthUrl in the response from the previous step to the users. After users authenticate, Google provides the following information in the response:

  • code
  • state
Response Parameter Description
code The authorization grant code returned from the API provider in an OAuth 2.0 authentication workflow. Cloud Elements uses the code to retrieve the OAuth access and refresh tokens from the endpoint.
state A customizable identifier, typically the element key (gmail) .

Authenticating the Element Instance

1
Redirect URL

2
Authenticate Users

3
Authenticate Instance

Use the code from the previous step and the /instances endpoint to authenticate with Google and create an element instance. If you are configuring events, see the Events section.

To authenticate an element instance:

  1. Construct a JSON body as shown below (see Parameters):

    {
      "element": {
        "key": "gmail"
      },
      "providerData": {
        "code": "<AUTHORIZATION_GRANT_CODE>"
      },
      "configuration": {
        "oauth.api.key": "<Google app Client ID>",
        "oauth.api.secret": "<Google app Client secret>",
        "oauth.callback.url": "<Google app Authorized redirect URI >"
      },
      "tags": [
        "<Add_Your_Tag>"
      ],
      "name": "<INSTANCE_NAME>"
    }
    
  2. Call the following, including the JSON body you constructed in the previous step:

    POST /instances
    
  3. Locate the token and id in the response and save them for all future requests using the element instance.

Example cURL

curl -X POST \
  https://api.cloud-elements.com/elements/api-v2/instances \
  -H 'authorization: User <USER_SECRET>, Organization <ORGANIZATION_SECRET>' \
  -H 'content-type: application/json' \
  -d '{
  "element": {
    "key": "gmail"
  },
  "providerData": {
    "code": "xxxxxxxxxxxxxxxxxxxxxxx"
  },
  "configuration": {
    "oauth.callback.url": "https;//mycoolapp.com",
    "oauth.api.key": "xxxxxxxxxxxxxxxxxx",
    "oauth.api.secret": "xxxxxxxxxxxxxxxxxxxxxxxx"
  },
  "tags": [
    "Docs"
  ],
  "name": "API Instance"
}'

Parameters

API parameters not shown in Cloud Elements are in code formatting.

Parameter Description Data Type
key The element key.
gmail
string
code The authorization grant code returned from the API provider in an OAuth 2.0 authentication workflow. Cloud Elements uses the code to retrieve the OAuth access and refresh tokens from the endpoint. string
Name
name
The name of the element instance created during authentication. string
oauth.api.key The API key or client ID obtained from registering your app with the provider. This is the Client ID that you noted in API Provider Setup. string
oauth.api.secret The client secret obtained from registering your app with the API provider. This is the Client secret that you noted in API Provider Setup. string
oauth.callback.url The API key or client ID obtained from registering your app with the provider. This is the Authorized redirect URI that you noted in API Provider Setup.
tags Optional. User-defined tags to further identify the instance. string

Example Response for an Authenticated Element Instance

In this example, the instance ID is 12345 and the instance token starts with "ABC/D...". The actual values returned to you will be unique: make sure you save them for future requests to this new instance.

{
  "id": 12345,
  "name": "API Instance",
  "createdDate": "2018-01-22T20:55:08Z",
  "token": "ABC/Dxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  "element": {
    "id": 6409,
    "name": "Gmail",
    "hookName": "Gmail",
    "key": "gmail",
    "description": "Add a Gmail Instance to connect your existing Google account to the general Hub, allowing you to manage your emails.You will need your Google account information to add an instance ",
    "image": "elements/custom-element-default-logo.png",
    "active": true,
    "deleted": false,
    "typeOauth": false,
    "trialAccount": false,
    "resources": [ ],
    "transformationsEnabled": true,
    "bulkDownloadEnabled": false,
    "bulkUploadEnabled": false,
    "cloneable": true,
    "extendable": false,
    "beta": false,
    "authentication": {
        "type": "oauth2"
    },
    "extended": false,
    "hub": "general",
    "protocolType": "http",
    "parameters": [],
    "private": false
    },
  "elementId": 8153,
  "tags": [
      "Docs"
  ],
  "provisionInteractions": [  ],
  "valid": true,
  "disabled": false,
  "maxCacheSize": 0,
  "cacheTimeToLive": 0,
  "providerData": {
    "code": "4/T6i0VObdJU8_reE0xQ90cGJJNTPW8MS-Ri_7G_x3FIQ"
  },
  "configuration": {    },
  "eventsEnabled": false,
  "eventsNotificationCallbackUrl": "false",
  "traceLoggingEnabled": false,
  "cachingEnabled": false,
  "externalAuthentication": "none",
    "user": {
        "id": 3306,
        "emailAddress": "claude.elements@cloud-elements.com",
        "firstName": "Claude",
        "lastName": "Elements"
      }
}