kintone プラグイン開発入門【Part3: 情報の隠匿方法 実践編】

著者名:宮倉 宗平(サイボウズ株式会社)

目次

はじめに

前回の 「kintone プラグイン開発入門【Part2: 情報の隠匿方法編】」 では、kintone プラグイン JavaScript API を用いて安全に情報を隠しつつ外部 API を実行する方法を検証しました。
今回はより実践的に、kintone と Slack をプラグインを用いて連携しつつ、情報の隠匿ができているのかどうかを検証してみたいと思います。

具体的な検証内容としては、次のとおりです。

  • kintone から Slack に投稿できること
  • 投稿の際に API key などの重要な情報を隠したまま投稿できていること

Slack とは?

Slack に関しては Slack 公式サイト (External link) を確認してください。

今回使用するプラグインについて

今回はこちらで作成した、Slack を用いた検証用プラグインを用いて検証していきます。
検証用プラグインは kintone で登録したテキストを、指定したチャンネルに投稿できる機能を備えたプラグインです。

今回使用しているプラグインに関しては、こちらからダウンロードが可能です。

Slack を用いた検証用プラグイン

なお、今回用意した検証用の Slack 連携プラグインは、あくまで検証用のため、Slack に投稿できる必要最低限の機能のみを実装しています。

このように、「channel」と「text」を入力してレコードを登録すると、自動的に Slack にも投稿されるようになっています。
今回はこのプラグインを用いて、kintone プラグイン JavaScript API を検証します。

検証準備

Slack 側の準備

まず初めに、Slack API を実行するための API トークンを取得します。

こちらのサイト (External link) にアクセスし、Slack API を実行するためのアプリを作成します。

「Create an App」をクリックし、アプリの名前と使用するワークスペースを選択します。

今回は App Name を「kintone App」に設定しました。
Slack のワークスペースに関しては、Slack API を使用したいワークスペースを選択してください。
選択後、「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 トークンが発行された画面にリダイレクトされます。

今回発行した API トークンはこの後 kintone 上で使用するので、コピーしておいてください。
Slack での設定はこれで完了です。

kintone 側の準備

次に kintone 側の設定をします。
まずは「 今回使用するプラグインについて」にある「Slack を用いた検証用プラグイン」というリンクから、Slack プラグインの zip ファイルをダウンロードし、kintone 上にプラグインをインポートしてください。

kintone アプリの作成

kintone 上でアプリを新規作成し、以下のフィールドを追加してください。

フィールド名 フィールドコード フィールドの種類
チャンネル channel 文字列(1 行)
テキスト text 文字列(複数行)

今回のプラグインではフィールドコードを元にフィールドの情報を取得しているので、大文字などの間違いがないようにお願いします。

kintone プラグインの設定

次に Slack プラグインの設定をします。
プラグインの設定画面上の、「API token」欄に、先ほど取得した Slack のトークンを入力し、保存してください。

これで設定はすべて完了しました!!

実行

では実際にアプリにレコードを登録して、Slack にも投稿されているかどうかを確認してみます。

このようにチャンネルを「kintone」とし、テキストを入力して登録をすると、Slack の kintone チャンネルに投稿されます。

コードの検証

以上の流れから、kintone のプラグインの設定画面上でトークンを入力することによって、kintone と Slack を連携させることに成功しました。
では、具体的にどのようにして保存したトークンなどを受け渡しているのかを、実際のコードを見ながら確認していきたいと思います。

まずはプラグイン設定側の config.js を確認してみます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
  $('#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() を用いて、入力されたトークンを header 上に登録します。

今回ヘッダー上に保存したトークンの情報は、kintone.plugin.app.proxy() で外部 API を実行する際に用いられます。
外部 API 実行の際、次の値がすべて一致していないと、登録したトークンの情報は呼ばれないため、トークンの情報が指定した API の実行以外で使われることはありません。

  • アプリ
  • プラグイン
  • HTTP メソッド(今回は POST)
  • API の URL の前方(今回は https://slack.com/api/chat.postMessage

次に実際に API を実行している、desktop.js を確認してみます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
const submitEvent = [
  'app.record.edit.submit',
  'app.record.create.submit',
  'app.record.index.edit.submit'
];
kintone.events.on(submitEvent, (event) => {
  const URL = 'https://slack.com/api/chat.postMessage';
  const record = event.record;
  const channel = record.channel.value;
  const text = record.text.value;
  const body = {
    channel: channel,
    text: text,
    as_user: true
  };

  kintone.plugin.app.proxy(PLUGIN_ID, URL, 'POST', {}, body, (response, status, headers) => {
  }, (error) => {
    console.log(error);
  });
  return event;
});

これはレコードが保存されたタイミングで Slack にリクエストを送信する処理です。
kintone.plugin.app.proxy() で Slack の API を実行しています。
アプリ、プラグイン、HTTP メソッド、API の URL が一致しているため、先ほどヘッダーに登録したトークンの情報が読み込まれ、実行に成功しています。

desktop.js のコードの内容はブラウザーからも確認できます。
しかし、コードを見ていただければ分かるように、トークンなどの重要な情報は desktop.js には一切記載しておらず、アプリの管理者のみが閲覧できるプラグイン設定画面でトークンを設定します。

もしこれと同様の処理を kintone カスタマイズで行う場合、kintone.proxy() を用いて行えるのですが、次のようにリクエストヘッダーにトークンの情報を載せる必要があるため、ブラウザー上から情報が確認できてしまいます。
これでは情報を隠しつつ安全に運用できているとはいえません。

まとめ

このように、kintone プラグインと kintone プラグイン JavaScript API を用いれば、重要な情報を隠しつつさまざまな外部サービスを連携できます。
今回の検証では Slack を用いましたが、その他 Google 各種サービスなどさまざまな外部サービスとも連携可能なので、ぜひいろいろなサービスを連携してみてください!

information

この Tips は、2018 年 11 月版 kintone で動作を確認しています。