---
title: "Google Drive | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/howto/asset-sources/google-drive/"
---
# Google Drive
> Design Editor allows your users to browse images from either your corporate or personal Google Drive account and use these images in user designs.
You can download **Apps for Google Drive integration** on the [My Account](https://customerscanvas.com/account/licenses) page. If you don't have a Customer's Canvas license, [contact our support team](https://customerscanvas.com/account/cases).
This package contains two applications: **Google Drive token generator** and **Google Drive web service**. The first application contains an authentication token generator for [user accounts](#user-accounts), while Google Drive web service manages the [Google Drive APIs](#google-drive-web-service).
To enable Google Drive as an external source for Design Editor, you need to:
1. Get a private key.
2. Get an access token.
3. Set up and run the [Google Drive web service](#google-drive-web-service).
4. Define an image source in the [Asset Manager](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/editor-configuration/image-manager.md).
Depending on your Google Drive account type, you need either a client key for a **user** account or a private key for a **service** account to access images from the Design Editor. After you have obtained the key, you need to get an access token. **Google Drive token generator** creates such tokens for user accounts. For service accounts, you need to call the [getToken](#generating-a-design-editor-token) method of **Google Drive web service** to create a token.
## User Accounts
This chapter describes how you can obtain a private key and an access token to allow your users to work with your Google Drive assets.
### Getting a Private Key
**To get a key for a user account:**
1. Click https://console.developers.google.com/start/api?id=drive to create a project and automatically turn on the API.
2. When the Google Cloud Platform opens, click **Create project**.
3. Type in your project name and click **Create**.
4. To enable access to API, click **Next** and then click **Enable**.
5. Click the menu button, hover over **APIs & Services**, and then click **Oauth consent screen**.
6. Select **External** and click **Create**.
7. Fill in the **App Name**, **User support email**, and **Email addresses**, and click **Save and continue**.
8. Open the **Credentials** tab, click **Create credentials**, and click **OAuth client ID**.
9. Select the application type **Desktop app**, enter the name **Drive API**, and then click **Create**.
10. When the OAuth client is created, click **Download json**.
11. Move the downloaded file to your working directory and rename it as **client_secret.json**.
### Getting a Google Access Token
The [Google Drive web service](#google-drive-web-service) uses Google Access Tokens to work under user accounts.
Prior to the token generation, you need to specify paths to your client key and an output token file in **gdtokengen.exe.config**.
```xml title="OAuthClientSecret"
...
```
In this example, the `OAuthClientSecretPath` parameter defines the location of the OAuth Client (the **client_secret.json** file) in the same folder where you unzipped this console application to. If `OAuthClientCredentialPath` is an empty string, then a token file will be created in the folder specified in `OAuthClientSecretPath`.
To generate a token:
1. Run **gdtokengen.exe**.
2. Sign in to your Google account.
3. Click **Allow**.
4. Press any key to close the application.
5. Verify that the `Google.Apis.Auth.OAuth2.Responses.TokenResponse-CustomersCanvas` token file has appeared in your `OAuthClientCredentialPath` folder.
## Service Accounts
You can use assets from your service account in web applications. This chapter describes how you can obtain a private key and an access token to allow your users to work with your Google Drive assets.
### Getting a Private Key
To enable your images in Design Editor, you need to delegate domain-wide authority to your service account and download a private key. For an existing service account, you can perform this on the [Service accounts](https://console.developers.google.com/iam-admin/serviceaccounts) page. Also, you can get a private key when creating a new service account. Select **Furnish a new private key** and click **Save** to start downloading your private key.
After you have downloaded a JSON file with your private key, copy the **private_key** field and save it to a separate file in the PKCS #8 format, for example:
```text
-----BEGIN PRIVATE KEY-----
MIIBVgIBADANBgkqhkiG9w0BAQEFAASCAUAwggE8AgEAAkEAq7BFUpkGp3+LQmlQ
Yx2eqzDV+xeG8kx/sQFV18S5JhzGeIJNA72wSeukEPojtqUyX2J0CciPBh7eqclQ
2zpAswIDAQABAkAgisq4+zRdrzkwH1ITV1vpytnkO/NiHcnePQiOW0VUybPyHoGM
/jf75C5xET7ZQpBe5kx5VHsPZj0CBb3b+wSRAiEA2mPWCBytosIU/ODRfq6EiV04
lt6waE7I2uSPqIC20LcCIQDJQYIHQII+3YaPqyhGgqMexuuuGx+lDKD6/Fu/JwPb
5QIhAKthiYcYKlL9h8bjDsQhZDUACPasjzdsDEdq8inDyLOFAiEAmCr/tZwA3qeA
ZoBzI10DGPIuoKXBd3nk/eBxPkaxlEECIQCNymjsoI7GldtujVnr1qT+3yedLfHK
srDVjIT3LsvTqw==
-----END PRIVATE KEY-----
```
Later, you will specify a path to this file (as `ServiceAccountKeyPath`) in **Web.config** of the Google Drive web service.
For more details about creating a Google service account, you can refer to the following instructions: [https://developers.google.com/identity/protocols/OAuth2ServiceAccount](https://developers.google.com/identity/protocols/OAuth2ServiceAccount).
### Generating a Design Editor Token
For your **service** account, you can generate a token by using the `getToken(userId)` method of the Google Drive web service.
**URL:** `/api/source/gettoken?userid={userId}`
**Request type:** `[GET]`
**URL param:** `userId=[string]` - an email allowing you to impersonate users
**Success response:**
```
1BC29B36F623BA82AAF6724FD3B16718
```
**Example of usage:**
```js title="Generating Tokens"
const generateToken = async () => {
const baseURL = "https://localhost:44352/api/source/gettoken";
const params = new URLSearchParams({
userid: "john@example.com"
});
try {
const response = await fetch(`${baseURL}?${params.toString()}`, {
method: "GET",
headers: {
"X-GoogleDriveAPIKey": "myapikey",
"Content-Type": "application/json; charset=utf-8"
}
});
if (!response.ok) {
// Check for 4xx/5xx status.
throw new Error(`Server error: ${response.status}`);
}
const token = await response.json();
console.log("Token received:", token);
return token;
} catch (error) {
console.error("Failed to generate token:", error.message);
}
};
```
To initialize the Design Editor, you should pass the generated value as the `token` property of the `assetSources` configuration.
```json title="Tokens"
{
"assetSources": {
"[source]Google Drive": {
"type": "RemoteSource",
"url": "https://example.com:3124/",
"requestParams": {
"token": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
}
}
}
}
```
## Google Drive Web Service
Now that you have private keys and tokens providing access to your Google Drive images, you can set up the Google Drive web service (GDWS). This chapter helps you configure this service.
### Configuring the Google Drive web service
In the **\\GoogleDriveWebService\\** folder, open the **Web.config** file and find the default `AppSettings` section:
```xml title="Configuring GDWS"
...
```
Here, you can specify the following parameters for both Google Drive account types:
- `CorsAllowOriginDomains` restricts the use of your Google Drive images to pages hosted only on listed domains. The `"*"` default value allows access from any domain.
- `UnsafeHttpWebApiEnabled` enables access to the Web API through HTTP. By default, this value is `False`, and you can only call the Web API through the secure protocol (HTTPS).
- `ApplicationDomain` specifies a scheme and authority of URL where you run this web service, for example, `"https://portal.customerscanvas.com"`.
Also, **Web.config** contains type-specific parameters.
#### User Accounts
If you have a user account, then you need to specify the following mandatory parameters:
- `OAuthClientSecretPath` defines the location of the **client_secret.json** file.
- `OAuthClientCredentialPath` defines the location of your token file.
- `ApiSecurityKey` is a secret key, which you send as `X-GoogleDriveAPIKey` in request headers to retrieve images.
#### Service Accounts
If you have a service account, specify the following mandatory parameters:
- `ServiceAccountEmail` defines the email to generate a token.
- `ServiceAccountKeyPath` defines the location of your private key in the PKCS #8 format.
- `ApiSecurityKey` is a secret key, which you send as `X-GoogleDriveAPIKey` in request headers to generate tokens.
### Running the Google Drive web service
To run this service, create a pool with the `NetworkService` identity and add a website to the Sites list in IIS Manager.
:::important
The IIS pool must have Read and Write permissions to the folder where you keep your token file.
:::