読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

Rails:Heroku & JSforceでSalesforceと連携してみる

Rails JSforce Heroku

Railsアプリの静的ページ作成方法まで確認できたので、JSforceをつかったSalesforceへの接続について試してみました。

f:id:tyoshikawa1106:20150806162119p:plain

JSforce

接続アプリケーションの作成

はじめにコンシューマキーやコールバックURLを取得するために、接続アプリケーションの作成を行います。
f:id:tyoshikawa1106:20150806162236p:plain


コールバックURLにはHerokuアプリのURLをセットしておきます。(今回はHomeページのURLを指定していますが、実際にはSalesforce接続後に表示したい画面のURLを指定します。)
f:id:tyoshikawa1106:20150806162606p:plain

Rails側の開発

検証用ページにはRailsチュートリアルで作成したHomeページを使用しました。Signupボタンを次のように『Connect Salesforce』ボタンに変更します。
f:id:tyoshikawa1106:20150806163113p:plain

<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>


f:id:tyoshikawa1106:20150806163221p:plain


共通のapplication.html.erbでJSforceの読み込みを行います。

app/view/layouts/application.html.erb

f:id:tyoshikawa1106:20150806163508p:plain

<!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に接続できます。
f:id:tyoshikawa1106:20150806164032p:plain


クリック時に表示される画面です。今回権限はフルアクセスを選択していますが、実際には用途に合わせて選択します。
f:id:tyoshikawa1106:20150806164307p:plain


認証画面の許可ボタンをクリックすると、コールバックURLで指定したページに移動します。
f:id:tyoshikawa1106:20150806164458p:plain


上記手順で進めていくと『XMLHttpRequest cannot load, No 'Access-Control-Allow-Origin' is present』というエラーが発生すると思います。
f:id:tyoshikawa1106:20150806165728p:plain


この問題はSalesforce側のクロスオリジンリソース共有 (CORS) 設定でHerokuアプリのURLをホワイトリストに登録することで解決します。
f:id:tyoshikawa1106:20150806170212p:plain


これでHerokuアプリからSalesforceに接続してクエリを実行するなどの処理を行うことが可能になります。
f:id:tyoshikawa1106:20150806170421p:plain