Get kintone data into external microsite via AWS

6-9-2017 | AWS, AWS Lambda, Cloud, kintone

### Integrate kintone data via AWS ###

I would like to show you how to access and retrieve data using kintone API into third-party applications.

Once I tried to access data in a kintone application via REST API by programming with JavaScript directly from external business service site, but it was unsuccessful because of the security warning.

After further research, according to help guide in kintone’s developer network website, direct access to REST API from an external site is not allowed because of the cross-site scripting restriction. (See more details)

Thus, I further researched the problem and found this article in Japanese (外部サイトから直接kintone APIを実行したい) and found out that it is possible to access kintone’s REST API from an external site via Amazon API gateway.

According to the article, by running scripts to access kintone’s REST API in AWS Lambda and setting CORS in Amazon API Gateway, you can avoid Cross-site scripting restriction. With this method, it turns out to be able to accomplish our objective serverless without a proxy server.

The following will explain how to access kintone’s REST API from an external site referring to the article in Japanse (外部サイトから直接kintone APIを実行したい)

### Project Overview ###

  1. Import Puerto Rico Bond transaction data as CSV into kintone application every day.
  2. Display daily transaction data in a table on the custom microsite of the external social marketing service. (Curata.com)
  3. The microsite will be customized with JavaScript (jQuery).

### Development Workflow ###

  1. By importing transaction data of Puerto Rico bond transaction from a CSV file, create a kintone application.
  2. Generate API token in App settings page of the created Puerto Rico bonds application in order to get access from an external service.
  3. Login to AWS, move to AWS Lambda management console and create Lambda Function with Node.js.
  4. Move to the Amazon API Gateway console and create API.
  5. On the API Gateway management console, set CORS for the API and deploy it.
  6. Create jQuery code to call the API Gateway in the microsite management console of the Curata.com

### Develop kintone Application ###

Create a kintone application by importing a CSV file of Puerto Rico Bond transaction data. (How to create a business application with kintone)

Generate API Token in App Settings of the created application to get API access from an external service. (Linking WordPress and kintone)

### Configure AWS Lambda ###

Create AWS account and log in.

From “Service” menu, choose “Lambda” service under “Compute” category

AWS Service Menu

 

On the AWS Lambda Managment console, click “Create a Lambda function” button and configure a Lambda function.

AWS Lambda function

 

Choose “Blank Function” on the “Select Blueprint” page.

Select blueprint

 

Click “Next” to proceed next.

“Configura Function” の設定ページにて:

On “Configure function” page:

  • Enter Name, Description fields.
  • Select “Node.js” as Runtime field.
  • Select “Edit code inline” as “Code entry type”

 

Configure function

 

  • Enter the following Node.js code.
  • Set kintone’s subdomain name in DOMAIN variable, set kintone’s App ID in APP_ID variable and set the generated token in AUTH_VALUE.
var aws = require(‘aws-sdk’);
var https = require(‘https’);// Set kintone
var DOMAIN = ‘yourdomain.kintone.com’;
var APP_ID = 41;/////////////////////////////////////////
var AUTH_VALUE = ‘API Token’;
var headers = { ‘X-Cybozu-API-Token’: AUTH_VALUE };exports.handler = function (event, context) {
var options = {
hostname: DOMAIN,
port: 443,
path: ‘/k/v1/records.json?app=’ + APP_ID’,
method: ‘GET’,
headers: headers
};var req = https.request(options, function (res) {
var data = “”;
res.setEncoding(‘utf8’);
res.on(‘data’, function (chunk) {
data += chunk;
});
res.on(‘end’, function () {
context.done(null, JSON.parse(data));
})
});req.on(‘error’, function (e) {
console.log(‘problem with request: ‘ + e.message);
});// write data to request body
req.end();};

 

 

  • Select from existing role as “Role” or create “Custom Role”. Select from existing role this time.
  • Leave default values for the rest and click “Next”.

Role Settings

 

  • Review all settings and click “Create function” button to create a Lambda function.

Lambda Review

 

Click “Text” and confirm the code runs successfully.

Lambda function test

 

The Lambda function is now ready.

### Configure Amazon API Gateway ###

  • From the “Service” menu, choose “API gateway”.
  • On the API Gateway management console, click the “Create API” button and move to the configuration page.

 

AWS API Gateway Management Console

 

  • Select “New API”, enter API name and click “Create API” button to create an API.

Create new API page

 

 

  • Next, configure resource.
  • From “Action” menu, select “Create Resource”.

 

Actions

 

 

  • Enter Resource Name, check “Enable API Gateway CORS” and click “Create Resource” button to create a resource.

 

New Resource

 

  • Select “Lambda Function” as Integration type, select Lambda Region, the same region of created Lambda function, enter Lambda function Name and click “Save”.

 

GET Method Configuration

 

  • From “Action” menu, select “Enable CORS”.
  • Click “Enable CORS and replace existing CORS headers” button.

 

Enable CORS Configuration

 

 

  • Next, select “Deploy API” from the “Action” menu.
  • Select “New Stage” and enter Stage name.
  • Click the “Deploy” button.

 

Deploy API

 

  • Click “Stages” under my API and select “GET” method under “Test”.
  • Jot down “Invoke URL”. This Url is called from an external service.
  • Now, Amazon API Gateway is ready.

 

GET method Stage Configuration

 

### Call API from External Service ###

  • Create a program with JavaScript or jQuery, if supported, on the external custom microsite to display kintone’s data.
  • Refer to the following code, create the code to call the API from Amazon API gateway.

 

$(document).ready(function(){$.getJSON(‘https://YourAPIURL.execute-api.us-west-2.amazonaws.com/Test/my-resource’,function(data){
var infoHTML = ”;
infoHTML += ‘<table class=”bondsTable” align=”center” width=”100%”>’;
infoHTML += ‘<caption>Puerto Rico Bond activity</caption><tr/>’;
infoHTML += ‘<thead>’;
infoHTML += ‘<tr>’;
infoHTML += ‘<th>CUSIP</th>’;
infoHTML += ‘<th>ISSUER</th>’;
infoHTML += ‘<th>CPN</th>’;
infoHTML += ‘<th>MATURITY</th>’;
infoHTML += ‘<th>DESCRIPTION</th>’;
infoHTML += ‘<th>CURRENT<br/>PRICE</th>’;
infoHTML += ‘<th>PREVIOUS<br/>PRICE</th>’;
infoHTML += ‘<th>CHANGE</th>’;
infoHTML += ‘</tr>’;
infoHTML += ‘</thead>’ $.each(data, function(i,item){ if (item != null)
{
infoHTML += ‘<tbody>’;
$.each(item, function(header,record){
infoHTML += ‘<tr><td>’ + record.CUSIP.value + ‘</td>’;
infoHTML += ‘<td>’ + record.ISSUER.value + ‘</td>’;
infoHTML += ‘<td>’ + Number(record.COUPON.value).toFixed(2) + ‘</td>’;
infoHTML += ‘<td>’ + record.MATURITY.value + ‘</td>’;
infoHTML += ‘<td>’ + record.DESCRIPTION.value + ‘</td>’;
infoHTML += ‘<td>’ + Number(record.Todays_Price.value).toFixed(3) + ‘</td>’;
infoHTML += ‘<td>’ + Number(record.Yesterdays_Price.value).toFixed(3) + ‘</td>’;
infoHTML += ‘<td>’ + Number(record.change.value).toFixed(3) + ‘</td></tr>’;
});infoHTML += ‘<tr><td>&nbsp;</td></tr></tbody>’;
}
});
infoHTML += ‘</table>’;
$(‘#BondsData’).html(infoHTML);

});
});

This time, we use the Curate.com’s custom microsite.

 

Curata Microsite Scripting

 

Now, retrieving Puerto Rico Transaction data from the kintone app is successful and display the data in the table on the microsite.

Curata Microsite

 

 

 

 

 

 

Newsletter