cybozu developer network

Enhanced by Google

カテゴリー内の他の記事

Ruby on Rails アプリケーションから、OAuth 2.0 を使って、kintone API を利用する

作成日
更新日

（Author : Fuji Business International Mamoru Fujinoki）

Index

はじめに

共通管理メニュー内の[外部連携]で、 OAuth クライアントの作成ができるようになりました。
今回は、Ruby on Rails（以下、Rails）で作成した顧客お問い合わせサイトから入力したデータを、 OAuth 2.0 の承認を経て、kintone API でデータを追加するサンプルを紹介します。

事前に必要なもの

開発手順

  1. kintone アプリの作成
  2. OAuth クライアントの設定
  3. Rails クライアントアプリケーションの開発
  4. Heroku へのデプロイ
  5. 動作確認

1. kintone アプリの作成

kintoneアプリストアより、「お客様の声管理」で検索し、表示されたアプリを追加します。

※ このとき作成した kintone アプリのアプリ ID をメモしてください。>Rails アプリケーションの作成時に利用します。
アプリ ID は、kintone アプリを開いたときの URL で確認できます。
https://{subdomain}.cybozu.com/k/{アプリID}

kintone アプリストアからアプリを追加

 

下記のテーブルを参考にフィールドコードを設定します。

フィールドコードの設定

フィールドの種類 フィールド名 フィールドコード
ドロップダウン 収集媒体 received_via
ドロップダウン カテゴリ category
ドロップダウン テナント名 tenant_name
文字列（複数行） ご意見内容 opinion

 

kintoneアプリの設定は以上です。

 

2. OAuth Clientの設定

kintone アプリ の cybozu.com 共通管理ページより、外部連携設定画面にて、OAuthクライアントの追加をクリックします。
操作方法の詳細は、OAuthクライアントをcybozu.comに登録する を参照してください。

OAuth クライアントの追加 

「クライアント名」と「リダイレクトエンドポイント」を入力します。

  • 「リダイレクトエンドポイント」は、サイトを Heroku にデプロイした際に決定します。
    今の段階では、次の値を仮設定しておき、後ほど変更します。
    仮のリダイレクトエンドポイント: https://localhost:3000/authorize (必ずhttpsを指定してください。)

OAuth クライアントの設定

 

「保存」すると、以下の情報が自動生成されます。
※ 「クライアントID」と「クライアントシークレット」をメモしてください。Rails アプリケーションの作成時に利用します。

  • クライアント ID
  • クライアントシークレット
  • 認可エンドポイント
  • トークンエンドポイント

 

連携利用ユーザーの設定をクリックします。

連携利用ユーザーの設定

 

 

API 利用を許可するユーザーを選択し、設定を保存します。

API利用を許可するユーザーを選択

以上で OAuth クライアントの設定は終了です。

 

3. Rails クライアントアプリケーションの開発

Ruby on Rails でクライアントアプリケーションを開発していきます。

ステップ１

ターミナルを開き、次のコマンドを実行して、Railsのアプリケーションを作成します。

これにより、customer-feedback というプロジェクト名で Rails のアプリケーションのひな形が生成されます。

Rails アプリの雛形を作成

 

以下のコマンドでローカルサーバーを起動し、動作するか確認します。
サーバーが起動したら、ブラウザにて「http://localhost:3000 」を開き、以下のように表示されたら成功です。



ローカルサーバで起動を確認

 

注意事項
(Windows環境)
SQLite3 で dlopen の関数が存在しないというエラーがでた場合、以下コマンドを実施してください。

 

ステップ２

今回は、OAuth2.0 を使うので、以下のように Gemfile に２つの gem を追加してください。

oauth2 は、OAuth リクエストを実行するために使用し、activerecord-session_store はセッションの情報をデータベースに記録するために使用します。

gem ファイルの編集

 

ファイルを保存後、以下のコマンドを実行します。

次に以下のコマンドを実行し、セッションの保存用のデータベースを作成します。

 

ステップ３

続いて、以下のコマンドで、「home」、「auth」と「feedbacks」というコントローラーを作成します。

 

ステップ4

次に「app」- 「helpers」フォルダー内の「auth_helper.rb」を開き、以下を参考にコーディングします。

次の値は、利用環境に合わせて修正してください。

  • 9行目　CLIENT_ID： 2. OAuth Clientの設定で作成した OAuth クライアントのクライアントID
  • 11行目　CLIENT_SECRET：2. OAuth Clientの設定で作成した OAuth クライアントのクライアントシークレット
  • 13行目　SITE：kintone 環境のドメイン

 

ステップ5

今度は、「app」> 「controllers」フォルダー内の「home_controller.rb」を以下のように編集します。

また、同フォルダー内の「auth_controller.rb」を以下を参考にコードを追加します。

最後に「feedbacks_controller.rb」を以下を参考に編集します。

次の値は、利用環境に合わせて修正してください。

  • 12行目　APP_ID： 1. kintone アプリの作成 で作成した kintone アプリのアプリID
  • 13行目　DOMAIN：kintone 環境のドメイン

 

ステップ6

「app」>「views」>「home」フォルダー内に「index.html.erb」ファイルを作成し、以下を参考にしてホームページを作成します。
「kinrtoneへ接続」するためのリンクを設置しています。

次のようなページが生成されます。

home ページのイメージ

 

次に、「app」> 「views」> 「feedbacks」フォルダー内に「new.html.erb」ファイルを作成し、以下を参考にして、お客様の声フォームを作成します。

次のようなページが生成されます。

feedbacks ページのイメージ

 

ステップ７

次に「config」フォルダー内の「routes.rb」ファイルを以下のように編集します。

HTTP動詞 パス フィールドコード 目的
GET /authorize auth#gettoken OAuthでkintoneからのコールバック先
GET /feedbacks feedbacks#new お客様の声を1つ作成するためのHTMLフォームを返す
POST /feedbacks feedbacks#create お客様の声を1つ作成する

 

ステップ８

次に先程指定したresource名のモデルを生成します。

下記のコマンドを実行し、「feedback」モデルを生成します。ここでは「feedbacks」ではなく、単数形の「feedback」を指定します。

これにより以下のモデルが生成されます。

フィールド名 フィールドタイプ
received_via string
category string
tenant_name string
opinion text

 

以下のコマンドでマイグレーションを実行して、データベースにテーブルを作成します。

これで feedbacks テーブルがデータベース上に作成されます。

 

テスト環境での動作確認

以下のコマンドでローカルの Rails サーバーを起動し、エラーがないか確認します。

以下の画像のようにホームページが表示されれば、成功です。
ただし、「kintone に接続」リンクをクリックしても kintone 側の OAuth クライアントのコールバック URL の設定が異なるためエラーになります。
これは、Heroku へのデプロイが終了後、修正します。）

ローカルでアプリの確認

 

以上で、Railsクライアントの開発は完了です。

4. Herokuへのデプロイ

今回は、テスト用のサーバーに Heroku を使用します。

Heroku では、データベースとして利用している SQLite3 はサポートされていません。
そのため、開発環境（ローカル）では SQLite3 を利用し、本番環境（Heroku）では PostgreSQL を利用するようにします。
Gemfile の SQLite3 に関する記述部分を以下のように書き換えます。

以下のコマンドで、変更をローカルの開発環境に一度反映させます。

以下のコマンドで、今までのプロジェクトファイルの変更を Git レポジトリに反映させます。

以下のコマンドで、Heroku アカウントにログインして、SSH キーを追加します。

以下のコマンドで Heroku のアプリケーションを作成します。

Heroku 内に空のアプリケーションが作成されるので、次のコマンドで、作成した OAuth クライアントのアプリケーションを Heroku にデプロイします。

次のコマンドで Heroku 上にデータベースを作成します。

以上で Heroku のデプロイは完了です。

5. 動作確認

デプロイが完了したら、以下のコマンドで、アプリケーションを開きます。

以下の画像のように表示されれば成功です。
※ 表示された Heroku のアプリケーションの URL をメモしてください。後述の OAuth クライアントの設定で利用します。

Heroku アプリケーションのURLをメモ

 

次に、kintone の OAuth クライアントの設定画面を開き、リダイレクトポイントの URL を Heroku のアプリケーションの URL に変更し、保存します。

リダイレクトポイントの URL を修正

 

「kintone OAuth 2.0 クライアントサンプル」フォームに戻り、「kintoneに接続」リンクをクリックします。

「kintoneに接続」をクリック

kintone にログインしていない場合は、ログイン画面が表示されます。

 

「Ruby OAuth クライアントから次の操作が実行されます」というメッセージが表示されるので、「許可」します。

「許可」をクリック

 

「お客様の声」フォームが表示されるので、各項目を任意に入力し「送信」ボタンをクリックします。

「送信」をクリック

エラー画面が表示されず、フォームの各項目が未入力の状態にリセットされれば、成功です。

 

kintone アプリにレコードが追加されているか確認します。

kintone アプリにレコードが追加されていることを確認

 

OAuth2.0 を使って、Ruby on Railsの外部アプリから kintone API を使ってレコードの追加に成功したことを確認できました。

コードの解説

auth_helper.rb

auth_helper.rb は、認証に関する処理をまとめた helper ファイルです。

2. OAuth Clientの設定で作成した OAuth クライアントアプリの値を元に各変数を設定します。
なお、設定したスコープの詳細は、OAuthクライアントの使用を参考にしてください。今回は、「read」、「write」権限を設定しています。

この関数では、ホームページの「承認」リンクに設定する URL を生成しています。
なお、authorize_url は、routes.rb で設定する authorize ページへのルートパスです。このリンクをクリックすると、kintone側から、認可コードが送信されます。

oauth2 のプラグインのコマンドの詳細は、A Ruby wrapper for the OAuth 2.0 protocol を参照してください。

こちらの関数では、上記で取得した認可コードからアクセストークンを取得しています。

この関数では、セッションに保存してあるアクセストークンのハッシュから、アクセストークンを取得します。
すでにアクセストークンが期限切れの場合にリフレッシュトークンより、新アクセストークンを取得します。

home_controller.rb

承認リンクへの URL を取得して、ホームページにリンクを表示します。

auth_controller.rb

kintone 側からコールバックされた後、返された認可コードから、アクセストークンを取得します。

feedback_controller.rb

一旦、お客様フォームのデータをサイト内のデータベースに保存し、アクセストークンが既に存在するかチェックします。

kintoneに送信するデータをハッシュ形式で設定します。

取得したアクセストークンで、kintoneへデータをポストします。

アクセストークンが存在しない場合、ホームページの承認リンクへリダイレクトします。

お客様の声フォームより、各データを取得します。

routes.rb

routes.rb は、Rails アプリケーションのルーティング設定を行うファイルです。

リソース名に「feedbacks」を指定します。

また、ホームページには、承認リンクを表示するページを設定します。

おわりに

今回は Ruby on Rails によって、OAuth2.0 を使った外部連携を行いました。
これを応用すれば、他の言語で開発したウェブアプリケーションから OAuth2.0 を使った kintone API の利用も可能です。
OAuth2.0 による外部連携をすることで、ユーザ毎に kintone API へのアクセス権限をコントロールすることが可能になります。

参照サイト

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

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

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

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