Index

• 概要

• 关于本次使用的插件

• 演示准备

• 执行

• 代码演示

• 最后

• 注意事项

概要

在上一篇“kintone插件开发入门【Part2: 信息的隐藏方法】”中，我们就访问外部API时使用kintone插件JavaScript API来隐藏重要信息进行了演示。
本次通过实践来确认信息是否确实被隐藏了，以使用插件整合kintone和Slack为例。

具体对

• 能够从kintone发送信息到Slack

• 发送时是否是隐藏了API key等重要信息

这两点进行论证。

 所谓Slack？

关于Slack请参考官网。

Slack官网

关于本次使用的插件

本次通过使用Slack做成的演示用插件进行演示。
使用本演示用插件，可以将登记在kintone的文本发送到指定的slack频道。

关于本次使用的插件，可以从以下链接下载。

使用Slack做成的演示用插件

另外，本次用于演示的kintone和Slack的整合插件目的只是为了演示，因此功能极其简单，仅可以用于演示发送信息到Slack。

像这样，输入“channel“和”text“保存记录，就可以自动发送到Slack了。
本次使用该插件对kintone插件JavaScript API进行演示。

演示准备

准备Slack端

首先要获取执行Slack API时所需的API Token。

访问此网站，创建用于执行Slack API的应用。

点“Create an App”，选择应用名和要使用的Workspace。

本次App Name命名为“kintoneApp”。

关于Slack的Workspace，请选择要使用该Slack API的Workspace。选择后，点“Create App”，将跳转到Basic Information页面。

接下来，选择要使用的Slack API，即可使用该API。

在Basic Information的侧边栏里选择“OAuth & Permissions”，然后从Scopes”里选择本次要使用的API方法。

本次要使用的是用户发送信息的API，因此选择“Send messages as user”。选择后，点击“Save Changes”保存要使用的API信息。

保存后，在同一页面点击“OAuth Tokens & Redirect URLs”的“Install App to Workspace”，并同意安装。

即重定向到发行了API Token的页面！

本次发行的API Token在之后的kintone上需要用到，请复制下来。
Slack端的设置到此结束。

准备kintone端

接下来设置kintone端。首先从“关于本次使用的插件”段落的“使用Slack做成的演示用插件”链接里下载Slack插件的zip文件，并上传到kintone。

创建kintone应用

在kintone上创建应用，添加以下字段。

 本次的插件使用字段代码获取字段信息，因此注意大小写不要弄错。

kintone插件的设置

接下来在Slack插件的设置页面进行设置。
在插件的设置页面的API token栏里输入刚才获取的Slack的token，然后保存。

到这里，设置就完成了!!

执行

 接下来，在应用中添加记录，确认是否发送到Slack。

像这样，channel中输入“kintone”，text中输入“来自kintone的信息”，然后保存。

刚才在kintone的channel中输入的内容就发送到Slack了！！

代码演示

综合上述，在kintone的插件设置页面输入token，kintone和Slack的整合就成功了。
那么，我们来看一下实际的代码，具体分析一下保存的token等是如何传递的。

首先确认一下插件设置对应的config.js。

     $('#submit').on('click', function() {    
         var apitoken = $('#apitoken').val();    
          var headers = {    
               'Content-Type': 'application/json',    
               'Authorization': 'Bearer ' + apitoken    
          };    
          kintone.plugin.app.setProxyConfig('https://slack.com/api/chat.postMessage', 'POST', headers, {});    
     });    
     $('#cancel').on('click', function() {    
          history.back();    
     });    
})(jQuery, kintone.$PLUGIN_ID);

这里是点击保存按钮后的处理。

使用kintone.plugin.app.setProxyConfig()将输入的token添加到header上。

本次头部上保存的token信息，在使用kintone.plugin.app.proxy()执行外部API的时候用到。这时，

• 应用

• 插件

• HTTP方法（本次是POST）

• API的URL（本次是'https://slack.com/api/chat.postMessage'）

必须全部一致，否则添加的token信息不会被调用，因此token的信息只能用在所指定的API。

来确认一下本次执行API的desktop.js。

var submitEvent = [    
    'app.record.edit.submit',    
    'app.record.create.submit',    
    'app.record.index.edit.submit'    
];    
kintone.events.on(submitEvent, function(event) {    
    var URL = 'https://slack.com/api/chat.postMessage';    
    var record = event.record;    
    var channel = record.channel.value;    
    var text = record.text.value;    
    var body = {    
        'channel': channel,    
        'text': text,    
        'as_user': true    
    };    
    kintone.plugin.app.proxy(PLUGIN_ID, URL, 'POST', {}, body, function(response, status, headers) {    
    }, function(error) {    
        console.log(error);    
    });    
    return event;    
});

 上图所示代码是在保存记录的时候向Slack发送请求的处理。
通过kintone.plugin.app.proxy()执行slack的API，因为应用端、插件、HTTP方法、API的URL完全一致，
因此可正确读取刚才添加到头部的token信息，成功执行了处理。
desktop.js的代码内容也可以从浏览器上查看得到，但正如您所见，token等重要信息在desktop.js上完全看不到，
是在只有应用管理员才可以查看的插件设置页面上进行token的设置。
但是，如果在kintone自定义上进行同样的处理，虽说使用kintone.proxy()是可以进行处理的，
但如下所示，需要在请求头部添加token信息，这样就可以在浏览器上查看得到该信息了。
因此无法隐藏信息，也就无法确保安全。

var submitEvent = [    
    'app.record.edit.submit',    
    'app.record.create.submit',    
    'app.record.index.edit.submit'    
];    
kintone.events.on(submitEvent, function(event) {    
    var URL = 'https://slack.com/api/chat.postMessage';    
    var record = event.record;    
    var channel = record.channel.value;    
    var text = record.text.value;    
    //需要在header里添加apitoken的信息。    
    var headers = {    
        'Content-Type': 'application/json',    
        'Authorization': 'xxxxxxxxxxxxxxxxxx'    
    };    
    var body = {    
        'channel': channel,    
        'text': text,    
        'as_user': true    
    };    
    return kintone.proxy(URL, 'POST', headers, body).then(function(resp) {    
        console.log(resp);    
        return event;    
    }).catch(function(err) {    
        console.log(err);    
    });    
});

最后

综上所述，使用kintone插件和kintone插件JavaScript API来跟第三方产品整合时，可以做到隐藏重要信息。本次例举了Slack进行演示，当然还可以跟其他的产品，比如Google等各服务进行整合，您不妨也试一下?

注意事项

• 才望子不保证范例插件的正常处理。

• 才望子不对范例插件提供技术支持。

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