Outlook連携 - kintoneからOutlookメールの送受信をしよう！！

2020年8月改訂のセキュアコーディング ガイドラインに抵触する内容が含まれています。認証情報が漏洩した場合の影響を考慮して慎重に検討してください。
該当箇所：外部ライブラリ（MSAL.js）内のアクセストークン保存部分

このカスタマイズで利用している kintone JS SDK は現在推奨されていません。今後は kintone JavaScript Client (@kintone/rest-api-client) を利用するように書き換えてください。

Index

• はじめに
• 概要
• kintoneアプリの作成
• Azure Active Directory アプリケーションの登録
• プログラムの説明
• 動作確認
• おわりに
• 変更履歴

はじめに

MicrosoftのOutlookといえばビジネス利用でお世話になっている方も多いはず。
そのOutlookメールがkintone上で送受信できるサンプルです。

メリットとしては、メールをkintoneに取り込むことで、他のkintoneアプリとの連携がしやすくなります。
また、kintoneのプロセス管理機能を使用してステータスの管理を行うことができます。

Outlook側への認証にOAuth2.0を利用しています。少し敷居が高く感じられるかもしれませんが、
詳しい手順の解説とサンプルコードを公開しておりますのでぜひ参考にしてください。

サンプルコードは GitHub上に公開しています。

概要

今回の注目部分はなんといっても認証部分です！Microsoftが提供している MSAL.js (外部サイト) を利用することで、Outlook(Microsoftアカウント)とのOAuth2.0を利用した認証をkintone上で行うことができます。

連携の流れは以下となっています。

• kintoneからOAuth認証を用いてAzure AD V2 Endpoint へサインイン
• kintoneからAzureへアクセストークンを取得
• アクセストークンを使って Graph API を叩く
• レスポンスを kintone のアプリに登録

Graph APIはMicrosoft Cloudサービスリソースへのアクセスを可能にするAPIです。

kintone アプリの作成

kintoneアプリでは以下のフィールドを配置してください。

フィールド名	フィールドタイプ	フィールドコード
subject	文字列（1行）	subject
contents	リッチエディター	contents
from	文字列（1行）	from
TO	文字列（1行）	TO
CC	文字列（1行）	CC
BCC	文字列（1行）	BCC
messageId	文字列（1行）	messageId
mailAccount	文字列（1行）	mailAccount
attachFile	添付ファイル	attachFile

こちらがアプリの配置したフィールドのフォーム画面です。

Azure Active Directory アプリケーションの登録

事前準備

Outlook と kintone を連携させるため、Azure Active Directory へアプリケーションを登録する必要があります。
事前に以下を行ってください。

1. Microsoft アカウントの取得
2. 1. で取得したアカウントで Azure Portal へログイン

アプリケーションの登録

左メニューの「Azure Active Directory」を選択します。

「アプリの登録」を選択します。

「アプリケーションの登録」ボタンをクリックします。

次のように入力します。入力が終わったら「登録」ボタンをクリックします。

項目	値
名前	任意のアプリ名（今回は kintone×Outlookとします）
サポートされているアカウントの種類	必要に応じて、以下のいずれかを選択します。 任意の施設ディレクトリ内のアカウント（任意の Azure AD ディレクトリ・マルチテナント） 任意の施設ディレクトリ内のアカウント（任意の Azure AD ディレクトリ・マルチテナント）と個人の Microsoft アカウント
リダイレクトURI	「Web」 先ほど作成した kintone アプリの URL

作成したアプリケーションで、「認証」メニューを選択します。
「暗黙の付与」の「アクセストークン」と「IDトークン」にチェックを入れ、「保存」ボタンをクリックします。

アプリケーションIDは、作成したアプリケーションの「概要」メニューで確認できます。
kintone に適用する カスタマイズファイルに利用するので、メモしておいてください。

 以上で登録は完了です。

※ 認証時のリクエストにアクセス権のスコープを含めているため、アプリ登録画面での「Microsoft Graph のアクセス許可」の設定は不要です。 

プログラムの説明

今回使用するプログラム

• SAMPLE-kintone-connect-azure
  サンプルプログラム一式です。
  • 入手方法
    1. https://github.com/kintone-samples/SAMPLE-kintone-connect-azure/releases/tag/1.1.0 へアクセスします。
    2. [Assets] の 「Source code（zip）」をクリックし、zip ファイルをダウンロードします。
    3. ファイルを解凍します。利用するプログラムファイルは下記をご参照ください。
• 利用するプログラムファイル
  • common-js-functions.min.js
    
    • 共通処理を記述するプログラムです
    • common ディレクトリ内にあります。
  • kintone-connect-outlook_mail_common.js
    
    • kintoneアプリ/Microsoftアプリの設定を記述するプログラムです
    • 環境に合わせて修正する部分があります（後述）
    • outlook-mail ディレクトリ内にあります。
  • oauth.js
    
    • OAuth2.0を利用してAzureへの認証処理を行うプログラムです。
    • common ディレクトリ内にあります。
  • kintone-connect-outlook_mail.js
    
    • アクセストークンを用いてOutlookからメールデータを取得するプログラムです
    • outlook-mail ディレクトリ内にあります。

• kinotne JS SDK v0.7.0
  kintone REST API を便利に扱うことができるライブラリです。詳しくはコチラの紹介記事をご覧ください。
  • 入手方法
    1.  https://github.com/kintone-labs/kintone-js-sdk にアクセスします。
    2. [Clone or download]ボタンをクリックし、zip ファイルをダウンロードします。
    3. ファイルを解凍し、「dist」下の「kintone-js-sdk.min.js」を利用します。
• kintone UI Component v0.4.2
  kintone ライクなUIパーツをかんたんに作成できるライブラリです。詳しくは、コチラの紹介記事を御覧ください。
  • 入手方法
    1. https://github.com/kintone-labs/kintone-ui-component/releases/tag/v0.4.2 にアクセスします。
    2. 「Assets」の [Source code]をクリックし、zip ファイルをダウンロードします。
    3. ファイルを解凍し、「dist」下の「kintone-ui-component.min.js」「kintone-ui-component.min.css」を利用します。

また、今回は上記プログラム以外にライブラリとして以下を利用します。

• MSAL.js
  AzureからOAuth認証でアクセストークンを取得するプログラムです。
  • https://secure.aadcdn.microsoftonline-p.com/lib/1.0.0/js/msal.js
• jQuery v3.4.1
  • https://js.cybozu.com/jquery/3.4.1/jquery.min.js
• Sweet Alert2 v8.17.6
  • https://js.cybozu.com/sweetalert2/v8.17.6/sweetalert2.min.js
  • https://js.cybozu.com/sweetalert2/v8.17.6/sweetalert2.min.css

プログラムの修正

kintone-connect-outlook_mail_common.js を修正します。

• Microsoftアプリの設定でメモしておいたアプリケーションID（7行目）を変更してください。
• kintone アプリのフィールドコードが kintone アプリの作成 に記載したフィールドコードと異なる場合には、28行目〜53行目を修正してください。

プログラムの配置

これらのプログラムを「アプリの設定>JavaScript/CSSでカスタマイズ」下に配置します

プログラムの解説

kintoneイベントの処理 (kintone-connect-outlook_mail.js )

kintoneの各イベント処理は以下となっています。

レコード一覧画面表示イベント

レコード詳細画面表示イベント

レコード作成/編集画面表示イベント

Outlookモジュール ( kintone-connect-outlook_mail.js )

kintoneとOutlookのコネクション部分を一部抜粋して説明します。

MSAL.jsのインスタンス化

userAgentApplicationとしてインスタンス化し、以降の処理に利用します。

Azureからトークンを取得する

サインイン処理では、まずAzureからIDトークンを取得します。

そして取得したIDトークンを用いてアクセストークンを取得します。

取得したアクセストークンを用いてメールデータを取得する

GraphAPIをkintone上で叩いてOutlookのメールデータを取得しています。
外部APIをkintone上で叩く方法はコチラのAPIドキュメントをご覧ください。

動作確認

kintoneアプリのレコード一覧画面に『Sign In Outlook』というボタンが表示されるので、ボタンをクリックします。

OAuth認証画面が表示されるので、 Microsoftアプリの設定で準備したMicrosoftアカウントでログインします。

メールアドレスを入力したあとにエラーが表示される場合、Microsoftアプリの設定が間違っている場合があります。もう一度設定内容をご確認ください。

ログインに成功した場合、先ほどまで『Sign In Outlook』だったボタンが『Receive Mail』『Sign out』に変わります。

『Receive Mail』ボタンをクリックすることで、Graph APIにリクエストを投げてレスポンス(メールデータ)をkintoneのレコードに登録します。

無事、Outlookのメールがkintoneに登録されました。 

※すでに取得済み（kintoneに登録済み）のメールは登録されません。

次に、送信の確認をします。

kintoneのレコード追加を選択し、必要な部分を記入します。

※本文はkintoneのリッチエディターフィールドを利用しているので、文字色や文字サイズの変更などもできます。 

レコードを保存すると、レコード詳細画面の上部に『Send Mail』というボタンが表示されるので、ボタンをクリックすればメールを送信することができます。

 きちんとメールが送信できたことが確認できます。

おわりに

いかがでしょうか。

Microsoftアプリの設定を事前にしておけば、kintone上だけでOutlookのメール確認ができてしまいます！

今回はOutlookメールのみのご紹介でしたが、Graph APIの項目によってスケジュールやその他の機能と連携することも可能です。

変更履歴

• 2019/11/18
  
  •  以下の変更に伴い、ソースコードを修正しました。
    
    • 利用ライブラリの変更
      kintone Utility Library for JavaScript ->  kintone JS SDK
      kintone UI Component を追加
    • jQuery v3.2.1 から v3.4.1 に変更
    • SweetAlert2 v6.10.1 から v8.17.6 に変更
    • Microsoft Graph v1 から v2 に変更

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