kintoneとMonacaアプリを連携させる（認証編）

kintone(キントーン)は、業務用途でよく利用されているWebデータベースサービスになります。タスク管理や日報管理など、様々なアプリケーションがあらかじめ用意されています。

kintoneではAPIを提供しており、Monacaアプリとの連携が可能です。
今回は、Monacaアプリからkintone認証をする方法について解説します。

記事で紹介するプロジェクトは、下のプロジェクトインポートリンクから
ご利用のMonacaアカウントへインポートできます。

※ 本記事の中では、Monaca有料プランでのみ利用できる機能を利用しています。

kintone認証はパスワード認証

kintoneでは次のように、いくつかの認証を提供しています。
APIトークン認証は、操作がすべて管理者権限になるため利用できるケースは限られます。
そのため、パスワード認証を利用します。

パスワード認証
APIトークン認証
セッション認証

kintoneのユーザー認証の詳細はこちらを確認ください。

CORSへの対応

また、kintoneが提供しているAPIには、CORS制限があります。

そこで利用するのが、cordova-plugin-advanced-httpになります。

これはサーバへのリクエストを行う処理 (HTTPリクエスト) を、ネイティブコードで実行してくれるものです。

このCordovaプラグインを使うことで、kintoneの提供するAPIをCORS制限の対象となることなく、利用できるようになります。

今回の記事で利用するプラグイン「cordova-plugin-advanced-http」の詳細については、
次の記事を確認してください。

https://press.monaca.io/atsushi/5046

kintoneでユーザを作成する

続いて、ログイン認証を実装するため、kintoneサービスにてあらかじめkintoneでログインユーザを作成しておいてください。

ユーザーの作成は、「cybozu.com 共通管理」画面より実施します。
共通管理画面は、 "https://www.cybozu.com/jp/login/" からアクセスできます。

kintoneの設定情報の定義

Monacaでは、ます初めに必要なkintoneの設定情報を変数に定義します。

これは www/js/app.js に記載します。

変数名	内容
KINTONE_DOMAIN	割り当てられたcybozu.comドメイン
KINTONE_APP_ID	作成したアプリのID。(ログインのテストであれば1で問題ありません)

// ファイル 「www/js/app.js」
const KINTONE_DOMAIN = "xxxxx.cybozu.com";
const KINTONE_APP_ID = "1";

kintoneAPI用の認証情報を作る

アプリでは、パスワード認証を行うために、「ユーザー名」と「パスワード」の入力フォームを用意します。

ユーザー名/パスワードを入力画面から受け取ります。
今回はFramework7を利用して、入力データを操作しています。

// ファイル 「www/pages/main.html」
const username = $f7.$el.find("#username").val();
const password = $f7.$el.find("#password").val();

取得したユーザー名とパスワードを使って、APIを呼び出すための認証ヘッダーを作成します。

作成後は、kintoneのアプリIDを引数に指定して、メソッド「getApp()」を呼び出します。

// ファイル 「www/pages/main.html」

// APIリクエスト用のヘッダー文字列作成
window.AUTH = ${username}:${password};

try {
  // APIリクエスト
  const res = await getApp({ id: KINTONE_APP_ID });

kintoneアプリデータの取得

kintone APIには認証を行うだけのものはありません。

そのため、実際にAPIアクセスしてみて、データが取得できれば適切な認証データとして扱います。

そこでアプリ情報を取得するAPIを実行します。

今回のサンプルでは、アプリ情報を取得するAPI「/app.json」を呼び出すため、 getAppメソッド内のsendRequestにて、(1) パス情報として「/app.json」を設定しています。

また、(2) オプション情報としては、HTTP メソッドの「get」と

アプリの情報を取得するために必須となる「アプリID」を指定しています。

// ファイル 「www/js/app.js」

// アプリ情報取得関数
const getApp = ({ id }) => {
  const options = {
    method: 'get',
    params: { id },
  };
  return sendRequest('/app.json', options);
}

kintone API を呼び出す共通メソッド

メソッド「getApp()」内で利用している「sendRequest()」は、
少し長いコードになりますが、kintone APIへHTTPリクエストを送るための共通メソッドです。

「sendRequest()」に、引数として (1) kintoneのパス情報と、 (2) オプション情報を渡すことで、基本的なkintoneAPIを呼び出すことができます。

// ファイル 「www/js/app.js」

// リクエスト送信用共通関数
const sendRequest = (path, options, type = 'json', responseType = 'json') => {
  cordova.plugin.http.setDataSerializer(type);
  options.headers = getHeaders();
  options.responseType = responseType;
  return promisify(cordova.plugin.http.sendRequest)(
    https://${KINTONE_DOMAIN}/k/v1/${path}, options
  );
}

// kintoneリクエスト用の共通ヘッダー作成関数
const getHeaders = () => {
  return {
    'X-Cybozu-Authorization': btoa(unescape(encodeURIComponent(AUTH)))
  }
}

// コールバック方式をPromise形式に変換する関数
function promisify(cdvFunc) {
  return function () {
    return new Promise((res, rej) => {
      cdvFunc(...arguments, res, rej);
    });
  }
}

API呼出し結果を判定する

アプリ情報を取得する「getApp()」のレスポンスについて、「appId」を確認して、ログインできたかの判定をします。

エラーの場合は、エラーコードが返ってきます。

正常に処理ができた場合は、メッセージ「ログインしました」をトーストで表示しています。

// ファイル 「www/pages/main.html」

// APIリクエスト
const res = await getApp({ id: KINTONE_APP_ID });

// レスポンスで認証情報の正しさを判定
const text = res.data.appId === KINTONE_APP_ID ? 'ログインしました' : res.message;

// ボタン上に表示されるローディングを非表示
unload()

// トースト表示
$f7.toast.create({
  text,
  position: 'top',
  closeTimeout: 500,
}).open();

まとめ

kintone APIをMonacaアプリから利用する際には、
下記のポイントを意識すればスムーズに開発ができます。

CORS制限を対応するため、Cordovaプラグインを利用する必要があります
認証APIはないため、実際にデータアクセスして結果を確認する必要があります