The Visual Builder Cloud Service Blog

Connecting to API Gateway from Visual Builder with Authentication

Aparna Gaonkar
Product Manager

This is the second part of the Visual Builder integration with API Gateway series.  In the previous blog, we saw the steps needed to configure a Function, wire it to the API Gateway, and finally call the API Gateway resource endpoint from Visual Builder.  However there were two things that werent complete about the API Gateway setup :

  • Authentication - right now the resource endpoint is accessible without any authorization header, and that is not what we want
  • CORS setup - this is an optional step, and is needed if we want to allow JavaScript clients to call the resource endpoint directly.  (Read more about CORS here)


We can configure the API Gateway with different types of Authentication policies - like Basic Auth, API key based authentication, OAuth authentication and IDCS authentication.  We will implement in this tutorial the IDCS Assertion based authentication, so that a logged in user in VB app if added to the right role in IDCS, will automatically gain access to this API.  This will require you to login to IDCS as an administrator.

Create a Confidential Application in IDCS

Login to IDCS as the administrator and go to the Admin Console (https://idcs-xxxxxxxx.identity.oraclecloud.com/ui/v1/adminconsole).  Navigate to Applications from the hamburger menu and start creating a new Confidential Application


Click Next.  Give a name to the application (oci-fn-vb-idcs-app) and proceed leaving the other things as default

In the next screen choose Configure as a Client application, and add the following details

Allowed Grant Types : Client Credentials and JWT Assertion
All other attributes : default

Click Next and choose Configure as a Resource application and add the following details

Primary Audience : oci-fn-vb (this could be any string)
Scope : oci-fn-vb 


Click on Finish to complete the setup.  At this point a Client ID and Secret would be shown.  Note these down for future use.  Finally activate the IDCS Application.  


Create the Authorizer Function

We will create an Oracle Function that will inspect the Authorization header of the incoming request and validate the bearer token in the header as to whether it has been signed by IDCS.  For this we have a sample function that we will use called oci-apigw-authorizer-idcs-java

The steps to setup this Function are the same as those used for the previous blog, namely:

  • Go to Application oci-fn-vb-app
  • Follow Quick Start instructions to launch Cloud Shell and initialize
  • Create the Function oci-apigw-authorizer-idcs-java by copying the entire directory from the github sample
  • Change the working directory to oci-apigw-authorizer-idcs-java

In addition, navigate to the folder src/main/java/com/example/utils and rename the ResourceServerConfig.java.template to ResourceServerConfig.java and change the following variables in the file according to your IDCS configuration

public static final String CLIENT_ID = "xxxxxxxxxxx";
public static final String CLIENT_SECRET = "xxxxxxxxx";
public static final String IDCS_URL = "https://idcs-xxxxxxxx.identity.oraclecloud.com";

public static final String SCOPE_AUD = "oci-fn-vb";

Finally deploy the function 
fn deploy -v oci-fn-vb-app

The authorizer function should now show up in the list of functions of the Application oci-fn-vb-app

Configure the API Gateway Authentication

Now we need to make the API Gateway Deployment use the authorizer Function for authentication.  For this navigate to the oci-fn-vb-apigw created in the previous blog.  Navigate to Deployments and edit the existing deployment.for path prefix /v1

Navigate to the Authentication section of the deployment and click on Add

In the Authentication Policy screen set the followng attributes:

Authentication Type : Custom
Application : oci-fn-vb-app
Function Name : oci-apigw-authorizer-idcs-java
Authentication Token : Header
Header Name : Authorization

Now the API Gateway resource endpoint should always check the incoming request for an Authorization header for a token, and validate it with the oci-apigw-authorizer-idcs-java Function

After this, connecting to the OCI resource endpoint https://plbo2fabcigu.apigateway.ap-mumbai-1.oci.customer-oci.com/v1/compartment, in the URL browser should give a 401 error like below


Visual Builder Service Connection

Login to Visual Builder.  Create a Visual Application called OCIAPIGWTest.  In that, navigate to Service Connections and create a new Service Connection by Endpoint with the following details

Method : GET
URL : API Gateway Deployment Endpoint full path ( e.g. https://plbo2fabcigu.apigateway.ap-mumbai-1.oci.customer-oci.com/v1/compartment )
Action Hint : Get Many

Click Next and change the Service name and title to be relevant (it is ociAPIGW in my case).  Navigate to the server tab. Enter the following details

Authentication : OAuth 2.0 User Assertion
Connection Type : Dynamic, Service doesnt support CORS
Client ID : leave blank
Client Secret : leave blank
Scope : Primary Audience + the Scope of the IDCS APPLICATION - oci-fn-vboci-fn-vb (IMPORTANT!)
Token URL : IDCS token URL (i.e. https://idcs-xxxxxxxx.identity.oraclecloud.com/oauth2/v1/token )

Navigate to Test and click on Send.  If all the previous setup is correct, you should be able to see a successful response as below:

That's the magic of OAuth 2.0 User Assertion authentication!  We will cover this in a separate blog to understand it in depth and also understand some troubleshooting techniques.

Finally create the Service Connection, and it is ready to be used.  You would notice that we changed the Connection Type to Dynamic - Service doesnt support CORS, since our API Gateway endpoint doesnt have CORS support.  The advantage of having CORS support is that it gives us a faster experience because it eliminates a key server side component in the route (Read more about Connection Types in VB).  Let us do that in the next section.

Adding CORS support to API Gateway

For CORS setup, we just need to add the VB origin (i.e. the calling domain) into the allowed Origin list of the API Gateway deployment.  This way API Gateway figures out that it is allowed to call a resource endpoint on this deployment from the VB origin even from a browser (via a JavaScript Fetch / AJAX call)

API Gateway CORS setup

For this navigate to the API Gateway Deployment and click on Edit.  This should open the below screen

Navigate to the CORS Section and click on Add.  Enter the following details

Allowed Origin : VB host (e.g. https://vbcs-cloudinst.integration.ocp.oraclecloud.com )
Allowed Methods : Add all methods ( GET, POST, PUT, PATCH, DELETE, OPTIONS, HEAD)
Allowed Headers : authorization
Exposed Headers : leave blank
Enable Allow Credentials : checked


Changing Visual Builder Service Connection to use CORS

For this, login to Visual Builder, and edit the Service Connection that we created previously (ociAPIGW in my case),  Change the Connection Type to "Dynamic Service Supports CORS" .  Navigate to Test tab, and click Send.  You should now get a successful response even with the "supports CORS" option.


This completes the series on API Gateway and Visual Builder integration.



Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.