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中确认过。


    注意:贴代码时请注意格式并使用"代码语言",与本文无关的问题请至“讨论社区”提问。
    您需要登录后才可以回复