カテゴリー内の他の記事

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

フォローする

(著者:サイボウズ 宮倉 宗平)

Index

はじめに

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

具体的な検証内容としては、

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

について検証していきます。

 Slackとは?

Slackに関してはこちらの公式サイトをご覧ください。

Slack公式サイト

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

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

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

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

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

slackPlugin.PNG

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

検証準備

Slack側の準備

まず初めに、Slack APIを実行するためのAPI Tokenを取得します。

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

slackSetting1.PNG

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

slackSetting2.PNG

今回はApp Nameを「kintone App」に設定しました。

Slackのワークスペースに関しては、Slack APIを使用したいワークスペースを選択してください。選択後、「Create App」をクリックすると、Basic Information画面に遷移します。

slackSetting3.png

次に、使用するSlack APIを選択し、APIを使用可能にしていきます。

Basic Informationからのサイドバーの「OAuth & Permissions」を選択し、「Scopes」から、今回使用するAPIメソッドを選択します。

今回は、ユーザーがメッセージを送信するAPIを使用したいため、「Send messages as user」を選択します。選択後、「Save Changes」で使用するAPI情報を保存します。

slackSetting4.PNG

保存後、同画面の「OAuth Tokens & Redirect URLs」の「Install App to Workspace」をクリックし、インストールの許可をすると、

slackSetting5.png

API Tokenが発行された画面にリダイレクトされます!

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

kintone側の準備

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

kintoneアプリの作成

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

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

 

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

kintoneSetting1.PNG

kintoneプラグインの設定

次にSlackプラグインの設定画面での設定を行います。
プラグインの設定画面にある、API token欄に、先ほど取得したSlackのtokenを入力し、保存してください。

 kintoneSetting3.PNG

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

実行

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

kintoneSetting2.PNG

このように
チャンネルを「kintone」
テキストを「これはkintoneからの投稿です!!」
として登録をすると、、、

kensho2.PNG

Slackにもkintoneチャンネルに投稿されました!!

コードの検証

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

まずはプラグイン上の設定を行っているconfig.jsを確認してみます。

これは保存ボタンをクリックした後の処理です。
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を確認してみます。

console2.PNG

 これはレコードが保存されたタイミングでSlackにリクエストを送信する処理です。
kintone.plugin.app.proxy()でslackのAPIを実行しているのですが、アプリ、プラグイン、HTTPメソッド、APIのURLが一致しているため、

先ほどヘッダーに登録したtokenの情報が読み込まれ、実行に成功しています。

desktop.jsのコードの内容はブラウザからも確認できますが、コードを見ていただければ分かるように、tokenなどの重要な情報はdesktop.jsには一切記載しておらず、

アプリの管理者のみが閲覧できるプラグイン設定画面でtokenの設定を行っています。

しかし、もしこれと同様の処理をkintoneカスタマイズで行う場合、kintone.proxy()を用いて行えるのですが、

console1.png

このように、リクエストヘッダーにtokenの情報を載せる必要があるため、ブラウザ上から情報が確認できてしまいます。これでは情報を隠しつつ安全に運用できているとは言えません。

 

まとめ

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

注意事項

  • サンプルプラグインは、その動作を保証するものではありません。
  • サンプルプラグインの技術的なサポート等は行っていません。

このTipsは、2018年11月版 kintoneで確認したものになります。

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

ログインしてコメントを残してください。