JavaScriptカスタマイズでMicrosoft製品連携 - kintone編

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

（著者：サイボウズ 竹内 能彦）

Index

• 1. はじめに
• 2. 概要
• 3. 利用するライブラリ
• 4. 設定
• 5. 動作確認
• 6. 解説
• 7. 終わりに

1. はじめに

kintone と Microsoft 製品を連携する場合は認証が必要で、認証方式はそのプラットフォームによって変わります。
プラットフォームを大きく分けると以下の2種類が考えられます。

• Webブラウザ
• サーバーやアプリケーション

本記事では「a」（Webブラウザ）で、Microsoft 製品との連携に必要となる認証の方法を説明します。
認証方法はこちら（JavaScript Single Page Application (SPA) から Microsoft Graph API を呼び出す）で詳しく紹介されていますが、本記事は kintone のJavaScriptカスタマイズに特化した内容になります。

また、認証を通過して Microsoft 製品と連携できるようになったことを確認するために、例として Azure AD のログイン情報を取得します。
取得には Microsoft Graph API を利用します。
Microsoft Graph API を使えば Office 365 の Outlook や Azure AD、OneDrive などと連携できます。

「b」のサーバーやアプリケーション上での認証方法紹介も予定していますので今後の記事にご期待ください。

Microsoft 連携の実践編として Outlookメールを送受信するサンプルを公開しています。
こちらも合わせてご覧ください。

2. 概要

やることは2つです。

2.1 Azure AD 認証

kintone の一覧画面にログインボタンを表示します。

ログインボタンをクリックすると、Azure AD の認証画面を表示します。
初回はアクセス許可の確認画面が表示されます。

　

2.2 Microsoft Graph API の実行

認証に成功すると、「ユーザー情報取得」ボタンと「ログアウト」ボタンを表示します。
「ユーザー情報取得」ボタンをクリックすると、Microsoft Graph API のユーザー取得を実行し、ユーザープリンシパル名を表示します。
※ユーザープリンシパル名とはADのユーザーを一意に識別するもので、形式は「アカウント名@ドメイン名」になります。

　 

3. 利用するライブラリ

Microsoft Authentication Library

Microsoft 製品の認証には OAuth 2.0 が利用されており、JavaScript で OAuth 2.0 認証を実現するライブラリです。
参考）認証ライブラリはこちら（Azure Active Directory v2.0 認証ライブラリ）にまとめられています。

SweetAlert 2

スタイリッシュなポップアップを表示するライブラリです。
今回の認証には直接関係ありませんが、見た目をよくするために利用しています。

4. 設定

kintone のアプリIDが Microsoft の設定で必要になり、Microsoft のアプリケーションIDが kintone の設定で必要になります。
そのため、kintone -> Micorsoft -> kintone の順で設定します。

4.1 kintone の設定

まずは kintoneアプリを作成します。
フィールドは利用しないのでフィールドなしの kintoneアプリを作りましょう。

kintoneアプリIDが Microsoft の設定で必要になるのでメモします。
kintoneアプリIDはURLから確認できます。先ほど作成したアプリを開きます。
そのURLが「https://{subdomain}.cybozu.com/k/944/」の場合、「944」がkintoneアプリIDになります。

4.2 Microsoft の設定

こちら（アプリを Azure AD v2.0 エンドポイントに登録する）の手順に従い Microsoftアプリを登録します。

ポイントは以下になります。

• プラットフォームの追加ではWebを選択します。
• 「暗黙的フローを許可する」にチェックします。
• リダイレクトURLには「https://{subdomain}.cybozu.com/k/{kintoneアプリID}/」を入力します。
• Microsoft Graph のアクセス許可を設定する必要はありません。
  OAuth 2.0 ではログイン時にアクセス許可を要求できるからです。
  詳細はこちら（スコープと同意）をご確認ください。
  テナント全体の同意を設定し、同意ページを表示させない方法も記載されています。

下記アプリケーションIDは kintone のJS設定で利用します。メモしましょう。

4.3 kintone の設定

JavaScript / CSS を設定します。
「アプリの設定 > JavaScript / CSSでカスタマイズ」の「PC用のCSSファイル」に以下のURLを設定します。

1. https://js.cybozu.com/sweetalert2/v7.3.5/sweetalert2.min.css

「アプリの設定 > JavaScript / CSSでカスタマイズ」の「PC用のJavaScriptファイル」に以下のURL/ファイルを設定します。

1. https://js.cybozu.com/jquery/3.2.1/jquery.min.js
2. https://secure.aadcdn.microsoftonline-p.com/lib/0.1.5/js/msal.min.js
3. https://js.cybozu.com/sweetalert2/v7.3.5/sweetalert2.min.js
4. 以下のサンプルコードをエディタにコピーして、ファイル名を「sample.js」、文字コードを「UTF-8N」で保存します。
   12行目に「4.2 Microsoft の設定」でメモしたアプリケーションIDを設定し、アップロードします。
   ※ファイル名は任意ですが、ファイルの拡張子は「js」にしてください

5. 動作確認

設定出来たら、kintone の一覧画面に表示されるログインボタンをクリックして動作を確認してください。

6. 解説

トークン

サンプルコードではログイン時にid_token、リクエスト前にaccess_tokenを取得しています。
access_tokenは Microsoft Graph API を使ったリクエストの認証に必要です。

トークンの詳細についてはこちら（Azure AD のトークンリファレンス）を参考にしてください。
上記URL内に記載されている通りjwt.msにトークンを貼り付けると内容を確認できます。

7. 終わりに

Microsoft 製品との連携となると難しい印象を持つ方もいらっしゃいますが、今回の記事で「連携できそうだな」と思っていただける方がいらっしゃれば幸いです。

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