Railsアプリの静的ページ作成方法まで確認できたので、JSforceをつかったSalesforceへの接続について試してみました。
接続アプリケーションの作成
はじめにコンシューマキーやコールバックURLを取得するために、接続アプリケーションの作成を行います。
コールバックURLにはHerokuアプリのURLをセットしておきます。(今回はHomeページのURLを指定していますが、実際にはSalesforce接続後に表示したい画面のURLを指定します。)
Rails側の開発
検証用ページにはRailsチュートリアルで作成したHomeページを使用しました。Signupボタンを次のように『Connect Salesforce』ボタンに変更します。
<div class="center hero-unit">
<h1>Welcome to the Sample App</h1>
<h2>
This is the home page for the
<a href="http://railstutorial.jp/">Ruby on Rails Tutorial</a>
sample application.
</h2>
<button onclick="javascript:jsforce.browser.login();" class="btn btn-large btn-primary">Connect Salesforce</button>
</div>
共通のapplication.html.erbでJSforceの読み込みを行います。
app/view/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= stylesheet_link_tag "application", media: "all",
"data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
<%= render 'layouts/shim' %>
<!-- JSforce -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jsforce/1.4.1/jsforce.min.js"></script>
<script>
jsforce.browser.init({
clientId: '[ your Salesforce OAuth2 ClientID is here ]',
redirectUri: '[ your Salesforce registered redirect URI is here ]'
});
jsforce.browser.on('connect', function(conn) {
conn.query('SELECT Id, Name FROM Account', function(err, res) {
if (err) { return console.error(err); }
console.log(res);
});
});
</script>
</head>
<body>
<%= render 'layouts/header' %>
<div class="container">
<%= yield %>
</div>
<%= render 'layouts/footer' %>
</body>
</html>
jsforce.browser.initのclientIdとredirectUriには接続アプリケーション設定で取得した値をセットします。
- clientId = コンシューマ鍵項目の値
- redirectUri = コールバック URL項目の値
これでボタンをクリックするとJSforceでSalesforceに接続できます。
クリック時に表示される画面です。今回権限はフルアクセスを選択していますが、実際には用途に合わせて選択します。
認証画面の許可ボタンをクリックすると、コールバックURLで指定したページに移動します。
上記手順で進めていくと『XMLHttpRequest cannot load, No 'Access-Control-Allow-Origin' is present』というエラーが発生すると思います。
この問題はSalesforce側のクロスオリジンリソース共有 (CORS) 設定でHerokuアプリのURLをホワイトリストに登録することで解決します。
これでHerokuアプリからSalesforceに接続してクエリを実行するなどの処理を行うことが可能になります。
