Google Drive

• 5-6 minutes to read

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 page. If you don't have a Customer's Canvas license, contact our support team.

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, while Google Drive web service manages the Google Drive APIs.

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.
4. Define an image source in the Asset Manager.

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 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 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.

<configuration>
    <appSettings>
        <add key="OAuthClientSecretPath" value="client_secret.json" />
        <add key="OAuthClientCredentialPath" value="" />
    </appSettings>
    ...
</configuration>

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 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:

-----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.

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:

$.ajax("https://localhost:44352/api/source/gettoken?userid=john@example.com", {
    type: "GET",
    headers: { "X-GoogleDriveAPIKey": "myapikey" },
    contentType: 'application/json; charset=utf-8',
    success: function(token) { 
        console.log(token);
    }
});

To initialize the Design Editor, you should pass the generated value as the token property of the assetSources configuration.

{
  "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:

<configuration>
    <appSettings>
        <add key="OAuthClientSecretPath" value="..\data\client_secret.json" />
        <add key="OAuthClientCredentialPath" value="" />
        <add key="ApiSecurityKey" value="UniqueSecurityKey" />
        <add key="CorsAllowOriginDomains" value="*" />
        <add key="UnsafeHttpWebApiEnabled" value="false" />
        <add key="ApplicationDomain" value="" />
        <add key="ShowSharedWithMeFiles" value="false" />
    </appSettings>
    ...
</configuration>

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.

Note

The IIS pool must have Read and Write permissions to the folder where you keep your token file.