kintone插件开发入门【Part2: 信息的隐藏方法篇】

aki • 发表于：2019年09月27日 10:10:02 • 更新于：2020年11月12日 20:17:22

Index

概要

 在上一篇“kintone插件开发入门【Part1: 优点篇】”中，介绍了不选择自定义，而是选择用kintone插件的优点。

kintone插件的优点有

  1. 批量上传JS, css文件

  2. 更改设置页面的设计

  3. 一次性应用于多个应用&一次性升级

  4. 隐藏重要信息

关于第4点的“隐藏重要信息”，在kintone插件中是如何隐藏信息的，有些部分很难简单表达清楚。
因此，本篇通过边演示边解说的方法介绍kintone插件是如何隐藏信息的。

推荐以下人员使用

  • 想尝试kintone插件开发的人员

  • 想进一步了解kintone插件优点的人员

  • 想了解kintone插件JavaScript API使用方法的人员

演示环境

 本次演示中，用到了

  • AWS EC2 ( Linux )

  • Node.js ( Express )

等。本次使用的是以上环境，但只要是可以确认请求的头部信息的环境，其他的也可以。 
(比如：Apache ＋ PHP等)
另外，演示用的浏览器本次使用Google Chrome。

使用上面的环境搭建服务器，然后从kintone通过kintone插件JavaScript API发送请求，以此来演示并确认请求是如何发送的。

具体步骤

步骤1：在插件上使用kintone.plugin.app.setProxyConfig()把信息设置给头部（头部A）
↓
步骤2: 在自定义用的JavaScript文件上，把不同的信息设置给头部（头部B）
↓
步骤3：用kintone.plugin.app.proxy()把请求发送给服务器。
↓
步骤4：在步骤3中发送的头部信息里，是否是只能看到头部B信息，但看不到头部A的信息。
↓
步骤5：确认服务器。确认头部A,头部B的信息是否可以看得到。
↓
这样就可以确认插件保存的信息是被隐藏了的！

关于服务器端的环境

Node.js的开发环境是在AWS上，按照以下步骤进行搭建。

// 安装用于生成Express应用模板的“express-generator”    
$ npm i express-generator -g    
// 创建Express应用，命名为“kintone-app”    
$ express kintone-app    
//　切换目录　＆　安装包    
$ cd kintone-app && npm install    
// 启动express    
$ node ./bin/www

 在上面创建的应用中，本次只使用“./routes/index.js”。如下编辑index.js

var express = require('express');    
var router = express.Router();    
//从kintone接受请求    
router.post('/api/data', function(req, res, next) {    
    //显示日志    
    console.log(req.headers);    
    res.send('send');    
});    
module.exports = router;

这次URL的路径指定为“指定的URL/api/data”、HTTP方法为POST，设为显示日志。

到这里，服务器的准备就完成了。

关于Node.js,Express的详情，请参考官网的手册。
Express官网手册

关于kintone端的环境

接下来，在kintone端使用kintone插件JavaScript API保存上面构建的信息。
这次，做了一个简单的插件，可在插件设置页面保存信息，然后在kintone记录列表页面向服务器端发送API请求。我们就用这个插件来执行。
（本次使用的插件范例公开在此处。）

文件夹的构成如下。

kintoneProxySamplePlugin

  • /config_css

    • 51-modern-default.css

  • /config_js

    • config.js

  • /contents

    • icon.png

    • setting.html

  • /desktops

    • desktop.js

  • manifest.json

kintone插件的设置页面

首先，在setting.html上创建文本字段，在文本字段内输入的信息用kintone插件JavaScript API的kintone.plugin.app.setProxyConfig()保存。
以下是范例代码。

<div>    
<div class="block">    
<label class="kintoneplugin-label">    
<span id ="container_label">插件设置页面</span>    
</label><br >    
<div class="kintoneplugin-desc">输入要保存在插件上的文本</div>    
<div class="kintoneplugin-input-outer">    
<input id="inputText" class="kintoneplugin-input-text" type="text">    
</div>    
<div class="block">    
		<button type="button" id="check-plugin-submit" class="kintoneplugin-button-dialog-ok">　保存　</button>    
		<button type="button" id="check-plugin-cancel" class="kintoneplugin-button-dialog-cancel">　取消　</button>    
	</div>    
　</div>    
</div>


0015d918dbe0a95dbd298186b9f35f0

kintone插件设置用JavaScript文件

接下来，修改插件设置页面的JavaScript文件“config.js”的代码，使其可将信息保存在插件。

jQuery.noConflict();    
(function($, PLUGIN_ID) {    
    'use strict';    
    $('#check-plugin-submit').on('click', function() {    
        var URL = '指定发送请求的URL';    
        // 路径    
        var PATH = 'api/data';    
        // 获取HTML的inputField的文本信息    
        var text = $('#inputText').val();    
        // 要保存的信息放在头部    
        var pluginHeader = {    
            'CUSTOM-REQUEST-HEADER': text    
        };    
        kintone.plugin.app.setProxyConfig(URL + PATH, 'POST', pluginHeader, {});    
    });    
    $('#check-plugin-cancel').on('click', function() {    
        history.back();    
    });    
})(jQuery, kintone.$PLUGIN_ID);

kintone自定义的JavaScript文件

接下来，修改PC上的自定义JavaScript文件“desktop.js”，使其在打开kintone的列表页面时，执行kintone插件JavaScript API的kintone.plugin.app.proxy()。

(function(PLUGIN_ID) {    
    'use strict';    
    kintone.events.on('app.record.index.show', function(event) {    
        var URL = '指定发送请求的URL';    
        // 指定路径    
        var PATH = 'api/data';    
        // 要保存的信息放到头部    
        var desktopHeader = {    
            'DESKTOP_HEADER': 'hoge'    
        };    
        // 向服务器发送请求    
        kintone.plugin.app.proxy(PLUGIN_ID, URL + PATH, 'POST', desktopHeader, {}, function(body, status, headers) {    
            console.log(status, body, headers);    
        }, function(error) {    
            console.log(error);    
        });    
        return event;    
    });    
})(kintone.$PLUGIN_ID);

设置演示用的变量

// 这是步骤2    
var desktopHeader = {    
    'DESKTOP_HEADER': 'hoge'    
};

另外，像这样也要在自定义环境上保存信息。

  • 在插件上保存的pluginHeader变量

  • 在自定义环境上保存的desktopHeader变量

准备这两个变量，在开发者工具的console上确认这些是怎么显示的。

※注意点

在实际演示之前，介绍一下使用kintone插件JavaScript API时的注意点。作为通过 kintone插件JavaScript API发送请求的注意事项，正如保存外部API执行时所需的信息时所述，用“kintone.plugin.app.setProxyConfig()”设置的信息和用“kintone.plugin.app.proxy()”设置的信息中，

  • 应用

  • 插件

  • HTTP方法

  • API的URL的前面

这4各条件必须要一致。

演示

 那么，我们就用上面的开发环境进行演示一下吧。

0015d918e512a93540eb16ba279535f

首先，在插件的设置页面的输入字段里，输入用proxy保存的文本。

比如本次输入“kintoneProxyTest”。

保存后，更新应用，返回记录列表页面时，将自动执行kintone.plugin.app.proxy()。
在记录列表页面，Google developer console的“Network”的“XHR"栏内，确认本次发送的请求头部。
(这是步骤4)

test2v2.png

像这样，在自定义上保存的变量headers可以看到，但在插件上保存的变量看不到。但是，去看一下Node.js的console。
(这是步骤5)

test3v2.png

可以看到在插件上保存的变量！！

总结

像这样，充分利用“kintone.plugin.app.setProxyConfig() ”和“ kintone.plugin.app.proxy() ”的话，就可以将API token等重要信息保存在kintone服务器上，在需要的时候再去取。
本次为了演示，使用了搭建的服务器，但是在实际中，跟Slack及Google等各种外部服务整合的情况比较常见。

其中，在后篇中就介绍了使用slack的API进行整合的范例，如您感兴趣，请务必阅读一下哦。

“kintone插件开发入门　【Part3: 信息的隐藏方法 实践篇】”

使用自定义也是可以跟外部服务整合的，但是就像本次演示的那样，在自定义页面上可以看到API token等重要信息。使用Google Developer Console等的话任何人都可以看到该信息。因此，如想要确保安全正常使用，请务必考虑一下插件哦。

本Tips在2018年11月版的 kintone中确认过。


    最多浏览的文档