More than 5 years have passed since last update.

[PhoneGap/Cordova] InAppBrowserを用いてDatabase.comの認証をする方法

Last updated at 2015-04-06Posted at 2015-02-02

※本サンプルはiOSで実行していますが、Androidについても似たような方法で出来ると思います。

Database.comとは

Database.comはsalesforce社が提供している、クラウドのデータベースサービスです。基本有料のサービスですが、会員登録することで制限つきで利用することができます。
ここではPhoneGapからDatabase.comに接続し、利用する方法を紹介します。
InAppBrowserの使い方を知りたい、という方にも参考になるかもしれません。

サンプルアプリ

PhoneGapからDatabase.comへアクセスする方法は、Adobe Developer Connectionでも公開されています。
またここで紹介されているソースコードは、GitHub上でも公開されています。
ところがサンプルはInAppBrowserではなく、ChildBrowserと呼ばれるものを利用しています。

残念なことに、ChildBrowserはすでにObsolateとされていて、InAppBrowserを使うことが推奨されているようです。
しかもInAppBrowserを使ったサンプルはほとんどなく、困っている方も多いと思います。
そこで、Adobeが提供しているサンプルを改造して、ChildBrowserをInAppBrowserで置き換えて同様の動作を実現する方法を紹介したいと思います。

PhoneGapのプロジェクトを立ち上げる方法については、Qiitaによくまとまっている投稿があるので、参考にしてみてください。
またDatabase.comの登録方法や、作成するデータベースの設定などについてはAdobe Developer Connectionを参照してください。

InAppBrowserのインストール

InAppBrowserは初期状態ではインストールされていないので、以下のコマンドを用いてインストールします。

install_InAppBrowser.sh

$ cordova plugin add org.apache.cordova.inappbrowser

インストールした後にビルドを行った場合、エラーで異常終了してしまうことがあります。
その時は一度、以下のコマンドを用いてプロジェクトをクリーンアップしてから再度ビルドを行いましょう。

cleanup_env.sh

$ cordova platform rm ios

config.xmlの書き換え

InAppBrowserを有効化するために、wwwディレクトリの1つ上のディレクトリにあるconfig.xmlを開き、**<widget></widget>**の間に以下を追加します。

config.xml

<feature name="InAppBrowser">
  <param name="ios-package" value="CDVInAppBrowser" />
</feature>

InAppBrowserを用いてDatabase.comにアクセスするソースコード

InAppBrowserを用いてDatabase.comにアクセスするJavascriptのコードを以下に示します。
簡単なソースの説明はコメントとして書いています。
Adobeのサンプルをそのまま使う場合は、salesforceWrapper.jsをこのコードで置き換えれば良いです。

salesforceWrapper.js

function SalesforceWrapper()
{
    // 認証パラメータ
    this.loginUrl = 'https://login.salesforce.com/';
    this.clientId = 'YOUR_KEY_HERE';    // Database.comで取得したAPI key
    this.redirectUri = 'https://login.salesforce.com/services/oauth2/success';

    // クラス変数
    this.cb = undefined;      // InAppBrowser
    this.client = undefined;  // forceTk

    this.init();
}

SalesforceWrapper.prototype.init = function() {
    this.client = new forcetk.Client(this.clientId, this.loginUrl);
};

SalesforceWrapper.prototype.login = function (successCallback) {
    // 認証画面の表示
    var url = this.getAuthorizeURL(this.loginUrl, this.clientId, this.redirectUri);
    this.cb = window.open(url, "_blank", 'location=no,toolbar=no,clearsessioncache=yes');

    this.loginSuccess = successCallback;

    // 画面遷移した場合に呼び出される関数の登録
    var self = this;
    self.cb.addEventListener('loadstop', function(e) {
            var loc = e.url;
            // 認証が通った場合の処理
            if (loc.indexOf(self.redirectUri) != -1){
                self.cb.close();    // 認証画面を閉じる
                self.sessionCallback(unescape(loc));
            }
        });
};

// 認証用のURLを取得
SalesforceWrapper.prototype.getAuthorizeURL = function (loginUrl, clientId, redirectUri) {
       return loginUrl + 'services/oauth2/authorize?' + '&response_type=token&client_id=' + encodeURIComponent(clientId) + '&redirect_uri=' + encodeURIComponent(redirectUri);
};

// 認証が通り認証画面が閉じた後に実行される関数
SalesforceWrapper.prototype.sessionCallback = function (loc) {
    var oauthResponse = {};
    var fragment = loc.split("#")[1];

    if (fragment) {
        var nvps = fragment.split('&');
        for (var nvp in nvps) {
            var parts = nvps[nvp].split('=');
            oauthResponse[parts[0]] = unescape(parts[1]);
        }
    }

    if (typeof oauthResponse === 'undefined' || typeof oauthResponse['access_token'] === 'undefined') {
        console.log("error");
    }
    else {
        this.client.setSessionToken(oauthResponse.access_token, null, oauthResponse.instance_url);
        if (this.loginSuccess){
            this.loginSuccess();
        }
    }
    this.loginSuccess = undefined;
};

使い方

上であげたソースコードの使い方を示します。

HTML側には以下を追加します。

salesforce_sample.html

<script type="text/javascript" src="js/salesforceWrapper.js"></script>

Javascriptからは以下のように呼び出します。

salesforce_sample.js

var sfw;

sfw = new SalesforceWrapper(); // SalesforceWrapperの初期化
sfw.login( successCallback );  // Salesforceへログイン

// ログインが成功したときに呼び出される関数
function successCallback()
{
   // ログインが成功したときの処理など
}