Integrating Kloudless Authenticator JS plugin

In this article, we’ll use Kloudless’s Authenticator JS, an open-source plugin that prompts the user to grant access to a given cloud service, and how to handle that operation. We will look at the setup of a basic web server, and how to use the Authenticator to setup a client-side form with all the data needed to submit to a server-side API call. Authenticator JS has documentation that we will reference through the article. You can find them here.

Here is a form with all the fields needed to create a basic .txt file, which will eventually end up stored in the Google Drive account that the user has access to and granted permission to utilize.

Our web server is Node + Express based, and will use the submitted form data to create a file, verify the authentication token, construct an API call, and run some cleanup once the action is complete. If you look at the code above, there are two inputs with the type=“hidden” that do not yet contain values. These values, “account_id” and “access_token” need to be supplied to us in order to access the storage service. Here is where the Authenticator JS plugin comes in.

First we need to obtain the correct values. To do so we’ll need to embed the Authenticator in the client-side page using this script tag, which is documented in the Authenticator’s README.

This exposes a global `Kloudless` object. This contains `Kloudless.authenticator` method, which is what we’ll use to trigger an authentication pop-up for the end-user.

authenticator.js

Kloudless.authenticator(element, params, callback)

Before that can happen, we need to setup some logic to handle the end-user’s input. `element` is the triggering action, for this example I’ve used jQuery to set the triggering element. We also need to pass the configuration to the `Kloudless.authenticator` method to suit our application needs. They are required parameters that the end-user does not need to be aware of, but that do need to be passed in to the authentication. At the minimum, you must pass a client ID to identify the Kloudless app. In our case, we only need to authenticate one service, Google Drive, so we will also be setting `scope` in our configuration. The config will look like this:

The next pieces we need to include will be setting up some more jQuery use to set our received data to the correct inputs in our form, and setting a callback function that will determine what we do with the response data. The jQuery setup is pretty quick, something that defines some needed variables

Now for the callback function setup. We’ll need to handle errors, as well as what to do with our successful data. Using the variables we just setup, we can reset the input values with the returned information

With that, we now have all the data in need to send to our server-side code to make and API call. Our next article will cover some of the server-side setup needed to make the API call, as well as cover some important security setup needed to ensure your app is less vulnerable to certain kinds of malicious attacks aimed at OAuth.