Node.jsでSalesforceにOAuth接続する

はじめに

Webアプリケーション開発で使われるソフトウェアの構成として「MEANスタック」とよばれる構成が注目されています。
※ MEANスタックの詳細についてはこちらの記事を参照ください。

MEANスタックが注目される点の1つとしてフロントエンドからサーバサイドまですべてJavaScriptで開発できるということがあげられます。
柔軟で変化に強いシステムを素早く作成できかつJavaScriptという技術的な間口の広さが人気の要因なのかもしれません。

今回はMEANスタックの中の1つであるNode.jsを使ってSalesforceからデータを取得するシングルページアプリケーションの作成方法をご紹介します。

Salesforceはマーケティングや営業支援のためのCRMクラウドサービスです。開発者向け無料ライセンスを取得すればサービスをすぐに利用できます。

今回の記事の内容に従い手順をすすめていけばSalesforceと連携するNode.jsのシングルページアプリケーションを作成できます。ぜひ試してみてください。

必要なソフトウェア

Node.js

こちらを参考に環境にあわせた方法でインストールします。
※ そのほか必要なライブラリはNode.jsに付属のnpm(Node Package Manager)で取得します。

git

GitHubのリポジトリからコードを取得するために使います。こちらを参考にインストールします。
Herokuにアプリケーションを公開（後述）しない場合は必須ではありません。

Salesforceのアカウントの取得と認証設定

こちらから「サインアップ」を選んで開発用の無料アカウントを取得します。

SalesforceにはOAuth 2.0 Webサーバ認証フローという機能があります。
作成するアプリケーションはこの機能を使ってSalesforceに代理アクセスします。

次はこの機能を使うための事前の設定です。

取得したアカウントでSalesforceにログインして左側のメニューから［作成］［アプリケーション］を選びます。
「接続アプリケーション」のセクションの「新規」ボタンをクリックします。次の画面で以下の設定を入力します。
- 接続アプリケーション名: 　MyApplication ※ 自由につけてもOKです
- API参照名: 　MyApplication ※ 自由につけてもOKです
- 取引先責任者メール: 　メールアドレスを入力します
- OAuth設定の有効化: 　チェック
- コールバックURL: 　http://localhost:3000/oauthcallback.html
- 選択したOAuth範囲: 　フルアクセス（full）
「保存」をクリックします。

アプリケーションの作成

今回作成するアプリケーションはSalesforce開発者向けワークショップでのサンプルアプリケーションをもとにしています。

アプリケーションの仕様です。

はじめにSalesforceで標準で用意されたオブジェクト（RDBMSのテーブルに相当）である「キャンペーン」を取得し、一覧で表示します。
一覧から任意の「キャンペーン」をクリックするとその詳細情報を表示します。
さらに「キャンペーンメンバーをみる」タブをクリックするとそのキャンペーンに従属する「キャンペーンメンバー」を取得して内容を表示します。

アプリケーションのコードはGitHubのリポジトリに登録しています。また作成したアプケーションはこちらで公開しています。

まずは、アプリケーションのコード一式をリポジトリからcloneするかまたはzipファイルをダウンロードしてローカルに展開します。

リポジトリから取得またはダウンロードしたファイルについて説明します。

client/index.html
シングルページアプリケーションが展開されるHTMLです。bodyタグの内容は空白の状態です。（内容はJavaScriptにより描画されます）
CSSファイルとJavaScriptファイルの読み込みを行った後にSalesforceへの接続するための初期設定をしています。
client/js/app.js
クライアント側のJavaScriptです。シングルページアプリケーションを実現するためのコードが集約されています。
この中の「router」オブジェクトはハッシュからはじまるURL（#…）を検知して対応するfunctionを呼び出しています。
server.js
サーバ側の処理を記述しています。サンプルの説明にもあるとおりHTTP Serverを実装しています。
salesforce.comに接続するためのプロキシサーバ的な役割も行っています。

次の図は今回作成するNode.jsアプリケーションとSalesforceの代理アクセスの処理をまとめたものです。

Node.jsアプリケーションとSalesforce代理アクセスの処理

さきほどSalesforceアカウントに設定した「接続アプリケーション」はデータ取得先（Salesforceアカウント2）に代理アクセスします。
ユーザはデータ取得先にログインするとともに接続アプリケーションが代理アクセスすることを許可します。

Node.jsアプリケーションは接続アプリケーションのコンシューマ鍵を設定しておきます。
これによりSalesforceへのアクセスが可能になります。

接続アプリケーションを設定するのは必要なアクセス権限さえあればSalesforceのどのアカウントでも構いません。
ただ今回は複数のSalesforceアカウントを用意する手間を省くためデータ取得先（Salesforceアカウント2）と同じアカウントに接続先アプリケーションを設定しています。

以上をふまえ、接続アプリケーションのコンシューマ鍵を設定するためにアプリケーションに修正をしていきます。

取得したSalesforceアカウントの設定メニューから［ビルド］［作成］［アプリケーション］を選びます。
作成済みの「接続アプリケーション名」をクリックして詳細画面をひらき、「コンシューマ鍵」をコピーします。

APIコンシューマ鍵をコピーします

アプリケーションのコードを修正します。

client/index.html

    force.init({
        appId:  'YOUR_CONSUMER_KEY',
        proxyURL: 'http://localhost:3000'
    });

force.init({

appId: 'YOUR_CONSUMER_KEY',

proxyURL: 'http://localhost:3000'

});

'YOUR_CONSUMER_KEY'の部分を「コンシューマ鍵」に書き換えます。

forceオブジェクトはheadタグ内で読み込んでいる「lib/force.js」内で生成されています。
force.jsはforcejs（SalesforceのREST APIを呼び出すためのライブラリ）のファイルです。

コードを取得したディレクトリ（以降アプリケーションのディレクトリ）「salesforce-node-app(または-master)」の直下に移動して以下のコマンドを実行します。

npm install

1	npm install

必要なライブラリが同じディレクトリ内のnode_modulesディレクトリにダウンロードされます。

サーバの実行

ここまででアプリケーションの作成が完了です。ローカルマシンの環境で動作確認をします。

まずはサーバの起動です。アプリケーションのディレクトリ直下で次のコマンドを実行します。

node server

1	node server

3000番ポートでサーバが起動します。

Proxy server listening on port 3000

ブラウザを開いて「http://localhost:3000」にアクセスします。
Salesforceにログインしていない場合はログイン画面が表示されます。
すでにログインしている場合も含め、以下の画面が表示されます。

これはOAuthの代理アクセス許可画面です。
Salesforceのアカウント名を確認して「許可」をクリックします。

アプリケーション画面（キャンペーンの一覧）

キャンペーンの一覧が表示されます。これがアプリケーションの最初の画面です。
そのうち任意のキャンペーン名をクリックします。

アプリケーションの画面（キャンペーンの詳細）

詳細が表示されます。現在このキャンペーンには、取引先の担当者がいないようです。

Salesforceに戻り、「取引先責任者」タブ（画面上部の横一列に並んでいるメニュー）を選びます。
標準でサンプルとして何件かの取引先責任者（取引先の担当者）データがあります。このうち任意のデータを選びます。

選択されたデータの詳細画面がでますので、「キャンペーン履歴」エリアから「キャンペーンに追加」ボタンをクリックします。

そこでポップアップするキャンペーン選択ダイアログで任意のキャンペーンを選び、「保存」します。

再びアプリケーションに戻って先ほど選んだキャンペーンを見ると「担当者数」が「1」に増えています。

アプリケーション画面（キャンペーンの詳細）

「ShowMember」リンクをクリックすると、先ほど追加した取引先の担当者のメールアドレスが表示されます。

アプリケーション画面（キャンペーンメンバーの詳細）

以上がアプリケーションの動作です。client/js/app.jsを変更することで処理を追加したり表示内容を増やしたりできます。
またはSalesforce側でカスタマイズされた独自オブジェクトを作成してアプリケーションでアクセスもできます。

Salesforceからデータを取得し表示するJavaScriptのWebアプリケーションが完成しました。
その手軽さを少しでも実感していただけたでしょうか。

Herokuにアプリケーションを公開する

最後にHerokuにアプリケーションを公開します。

事前準備（必要な場合）

Herokuのサイトにアクセスしてアカウントを作成します。
heroku toolbeltをインストールします。

また、Herokuにアプリケーションを公開する前にいくつかやらなければいけないことがあります。

プロキシサーバの設定

Herokuはデプロイするごとにアプリケーションに動的にポート番号が割り当てられます。
そのため、アプリケーションのindex.htmlの下記の処理がうまく動作ません。（ポート番号をハードコーディングしているため）

forceオブジェクト（forcejs）用にポートを指定しないプロキシURLが必要になります。

force.init({
        …
    proxyURL: 'http://localhost:3000'
});

force.init({

…

proxyURL: 'http://localhost:3000'

});

そこで、forcejs用のプロキシサーバとして公開されている「force-server」をherokuにデプロイします。

任意のディレクトリで次のコマンドを実行します。

git clone https://github.com/ccoenraets/force-server.git
npm install

1 2	git clone https://github.com/ccoenraets/force-server.git npm install

動作を確認するため次のコマンドを実行します。

npm start

npm start

コマンドを実行するとブラウザが立ち上がり、アドレスバーに「http://localhost:8200」、画面に「Welcome to ForceServer!」と出力されれば問題なしです。

Herokuにアプリケーションを作成し、force-serverをデプロイします。

heroku create xxxmyproxy
git push heroku master

1 2	heroku create xxxmyproxy git push heroku master

※ 「xxxmyproxy」の部分はアプリケーション名です。全アカウント中で一意であれば自由につけることができます。

Herokuのログイン画面からアプリにアクセスまたは「http://hogeforceserver.heroku.comにアクセスして「Welcome to ForceServer!」と出力されるか確認します。

force.init({
        …
    proxyURL: 'https://xxxmyproxy.herokuapp.com'
});

force.init({

…

proxyURL: 'https://xxxmyproxy.herokuapp.com'

});

Herokuアプリケーションの作成

アプリケーションのディレクトリ直下に移動してheroku loginコマンドを実行します。
ユーザ名とパスワードの入力プロンプトが表示されるのでそれぞれ入力します。

heroku login

1	heroku login

Herokuアプリケーションを作成します。

heroku create xxxMyApplication

1	heroku create xxxMyApplication

※ 「xxxMyApplication」の部分はアプリケーション名です。全アカウント中で一意であれば自由につけることができます。

コールバックURLの追加

Salesforceにログインして設定メニューから［ビルド］［作成］［アプリケーション］を選びます。
作成済みの「接続アプリケーション名」の横の「編集」ボタンをクリックして編集画面をひらき、「コールバックURL」に「https://xxxMyApplication.herokuapp.com/oauthcallback.html」（"xxxMyApplication"はアプリケーション名）を追加します。

Procfileを作成します。

echo 'web: node server.js' > Procfile

1	echo 'web: node server.js' > Procfile

変更をコミットします。

git add .
git commit -m 'to deploy heroku.'

1 2	git add . git commit -m 'to deploy heroku.'

Herokuにデプロイする

Herokuのgitにpushします。同時にデプロイが行われます。

git push heroku master

1	git push heroku master

正常にデプロイが完了したら、「https://xxxMyApplication.herokuapp.com」にアクセスして今回作成したアプリケーションがHeroku上で正常に動いているか確認します。

いかがでしたでしょうか。思ったよりも少ないコード量でWebアプリケーションができたと感じている方もいらっしゃるかもしれません。

今回はデータ取得だけでしたがNode.js上からさらに他のサービスにデータ連携するなどの発展も考えられますね。

以上です。ここまで読んでいただきありがとうございました。