Connect to Google Drive Using the OAuth 2.0 Authorization Code Grant

Here's an example of how to connect to an external REST service, like Google Drive, that supports the OAuth 2.0 Authorization Code Grant. The Authorization Code Grant method is supported by a wide variety of REST APIs.

In this example, we'll look at a scenario where you use the Authorization Code Grant method to connect your extension to Google Drive in order to fetch files from a given folder.

Note:

This example applies to Oracle Cloud Applications 25C and later.

Here are the steps for setting up this scenario:

  1. Create Client Apps in Google
  2. Create a Backend for a Local Server
  3. Add Service Connections to the Backend
  4. Test the Service Connection
  5. Configure the Backend for Your Test Instance
  6. Preview and Deploy to the Test Pod
  7. Deploy to Production and Other Pods

Create Client Apps in Google

To connect to Google Drive using Authorization Code Grant authentication, your extension needs a client ID and secret. This client ID identifies your web app to Google's OAuth servers. To generate these, you'll create a client application from the Google console.

In this example, you'll need two client IDs: one for development and testing and another one for production. For this reason, you'll create two separate client apps in this step.

Note:

When you create a client app, Google generates a client ID and client secret. Make a note of these, as you'll need them when you create a custom backend.

Log in to the Google console at https://console.cloud.google.com and create your client apps with these capabilities and settings. Refer to the Google documentation here: https://developers.google.com/identity/protocols/oauth2/web-server:

  • Data access for the scopes you require for Google Drive.

    Add the scopes you require, such as https://www.googleapis.com/auth/drive, in the Data access section of the client app. If you need additional scopes for greater granularity or to other Google services, refer to your Google documentation.

    For example, if you just want to view and manage metadata for Google Drive files, you may decide to use https://www.googleapis.com/auth/drive.metadata instead.

  • Appropriate values for Authorized redirect URLs and Authorized Java Script Origins as described in this table.
    Property Description
    Authorized redirect URLs

    This is the landing URL in VB Studio or in Oracle Cloud Applications:

    • Visual Builder Studio:

      <VB Studio root url>/oauth/callback

      For example, https://abc-test.developer.ocp.oraclecloud.com/oauth/callback

    • Oracle Cloud Applications:

      https://fa.oraclelcoud.com/api/rwdinfra/trap/2/oauth/callback
    Authorized Java Script Origins

    This is only required if the REST API is being consumed directly from Visual Builder Studio (when the Connection Type is "Dynamic, Service supports CORS").

    Add the Visual Builder domains such as https://abc-test.developer.ocp.oraclecloud.com/

Note:

Step 1: Create a Backend for a Local Server

In this step, you'll create a backend to represent Google Drive. This is a one-time configuration for your extension. Since you're going to use one server for testing and a different one at runtime, you'll want to use a local server for this backend, which means it is used only during test and development and thus isn't stored in the source code.

Tip:

For reusability purposes, it's a good idea to add all your frequently used backends to a common extension, deploy it, then use this extension as a dependency wherever you need it.

To create a custom backend for Google Drive:

  1. In the Services panel, click the Backends tab, then click Add (+) to create a custom backend.
  2. Provide a valid name for the backend, like googleOAuthAuthCode, then click Next.
  3. In the backend's Server tab, add these values:
  4. Click Create.

Step 2: Add a Service Connection for the Backend

Next, add a service connection that your extension requires to the backend you just created.

  1. From the custom backend's Overview tab, click + Service Connection, then select Define by Endpoint.

    VB Studio opens the Create Service Connection wizard. The URL field in the wizard shows the backend's URL in this format:

    vb-catalog://backends/<backend name>/

  2. Enter the rest of the endpoint's URL in the URL field:

    /drive/v3/files

  3. Provide a valid service name, like googleDriveAPI.
  4. From the Response tab, provide a sample response for the REST API you are trying to configure. Here is a sample response for a GET method: 
    {
  "kind": "drive#fileList",
  "incompleteSearch": false,
  "files": [
    {
      "kind": "drive#file",
      "mimeType": "application/vnd.google-apps.folder",
      "id": "1uNtMjxRg7q_BI4LAqL_7fJEv2oS2iAdc",
      "name": "newFolder"
    },
    {
      "kind": "drive#file",
      "mimeType": "application/vnd.google-apps.folder",
      "id": "10plRQFYKN9DD6ifTGfTrSFm53XMaOx_w",
      "name": "test1"
    }
  ]
}

    Note:

    You'll use the Response tab in this step rather then the Test tab here because the Test tab cannot open the Google login flow in a new tab or child window.
  5. Click Save Example to generate a schema for this example.
  6. For methods with a request body, like a POST request, use the Request tab to provide a sample request body. As before, click Save Example to generate a schema.
  7. When you have generated schemas for all required REST APIs, click Create to create your service connection.

Step 3: Test the Service Connection

In this step, you'll add a button to an App UI with an event that calls the newly created service connection, googleDriveAPI. You do this configure the button with an event that calls an action chain, then configure the action chain with a "RestAction" representing the service connection.

Note:

You can currently only test GET endpoints from the Page Designer using these steps. POST, PUT, and PATCH endpoints are currently blocked when sourced from a local server.

To test the service connection:

  1. From the Page Designer, drag a button from the Components palette and drop it into position on the canvas.
  2. From the Events tab on the button's Properties pane, add an oj-action event to the button. See Start an Action Chain From a Component.
  3. From the Action Chain editor, add a "Call REST" action and provide the googleDriveAPI endpoint in the configuration of the action. See Add a Call REST Action.
  4. Add a Fire Notification action with "info" on the success of the REST call, and another Fire Notification action on the failure of the REST call. See Add a Fire Notification Action.
  5. Switch to Live mode and click the button.

    This action opens the Google login flow in a new tab or new window, depending on what you have configured. Once you log in, the new tab or window closes and you are returned to the main flow with the Google API results.

Step 4: Configure the Backend for Your Test Instance

In this step, you'll provide your backend with runtime server details in Oracle Cloud Applications itself. Each VB Studio backend that has a local server, but no in-source server, needs this configuration so you can use the Preview action in Step 5 to test your extension. Preview runs on your Oracle Cloud Application test instance. (For screen shots, see Provide a Backend's Runtime Server Details.)

To do this:

  1. Navigate to the Overview tab for the backend (googleOAuthAuthCode).

    You will see a warning there, which indicates that we haven't yet provided Oracle Cloud Applications with the information it needs.

  2. Click Edit Configuration.

    If you don't have the required administrative privileges, ask your administrator to complete the next steps. If you don't see this button at all, that means your instance has not yet been enabled to use this functionality and you won't be able to continue. Contact Oracle Support for more information.

  3. In the Manage Backends on Visual Builder Studio screen, enter these details:

    Note:

    The Connection Type field is not available for Oracle Cloud Applications, as all REST API calls go through the proxy for this authentication type.
  4. Click Create.

Once this is done, you'll no longer see a warning on the backend's Overview tab.

Step 5: Preview and Deploy to the Test Pod

  1. From the Designer, click Preview from the header to ensure that the extension is running as expected.
  2. Commit the sources and push them (or merge them) to the branch used to package your extension.
  3. If the build pipeline isn't configured for the extension, configure the build pipeline and deploy the extension on the Test instance.
  4. Test the extension to ensure everything works correctly.

Step 6: Deploy to Production and Other Instances

In this step, you'll deploy your extension to an appropriate production instance, and configure it to connect to a different Google client application configured for production use. To do this, you'll need to supply new details about the googleOAuthAuthCode backend on the Oracle Cloud Application Manage Backends for Visual Builder Studio screen.

If you want to deploy to other instances, follow this procedure to configure this backend for each instance.

  1. Create the production build pipeline for the production instance according to Create and Configure Production Build Jobs in Administering Visual Builder Studio.
  2. Navigate to the googleOAuthAuthCode backend's Overview tab.
  3. Click Copy Link to copy the current URL for your test instance to the clipboard. You'll modify this URL to open the Manage Backends for Visual Builder Studio screen for the desired production instance.
  4. Paste the copied URL into a text editor, then replace the base portion of the URL with the base URL for the Oracle Cloud Applications production instance. For example, replace https://fa-test.oraclelcoud.com with https://fa.oraclelcoud.com.
  5. Use the URL you modified in the previous step to open the Manage Backends for Visual Builder Studio screen on the production instance you want to deploy to. If you don't have the required administrative privileges, send the link to your administrator to complete the next step.
  6. Enter the same information you used in Step 4: Configure the Backend for Your Test Instance, but instead use the client id and secret you created for the production Google client app.
  7. Run the production build pipeline, then test the deployed extension in the production instance.