TwitterアカウントでOAuth認証（ngCordovaOauth）

プラグイン「ng-cordova-oauth」を使って、TwitterアカウントでのOAuth認証の実装する方法です。

詳しくは以下のサイトを参照。

GitHub - nraboy/ng-cordova-oauth: AngularJS oauth library for use with Apache Cordova projects

TwitterアカウントでOAuth認証を行う場合、「jsSHA 1.6.0」が必要。バージョン1.6.0のみ対応で、最新のバージョンだとエラー（Error: Chosen SHA variant is not supported）が発生するので注意。

なお、このプラグインはあくまで認証までしか行えない。認証後にユーザー情報の取得を行う場合、HTTPリクエストのヘッダー情報を書き換えてやらないといけませんでした。

TwitterアカウントでOAuth認証を行う場合、Twitterのデベロッパーサイトでアプリケーションを登録して「Consumer Key (API Key)」と「Consumer Secret (API Secret)」が必要です。その辺りの詳しい方法は以下のサイトを参照してください。

Twitter APIの使い方まとめ

OAuth認証とユーザー情報の取得を行うコードは以下の通りです。

angular.module('myapp', ['ngCordovaOauth'])
.controller('MainCtrl', function ($scope, $http, $cordovaOauth, $cordovaOauthUtility) {
    // APIキー
    var CONSUMER_KEY = "Consumer Key (API Key)";
    var CONSUMER_SECRET_KEY = "Consumer Secret (API Secret)";

    // OAuth認証開始
    $scope.oauth = function () {
        var options = {redirect_uri: "https://localhost/callback"};
        $cordovaOauth.twitter(CONSUMER_KEY, CONSUMER_SECRET_KEY, options).then(function (result) {
            // result.oauth_token;
            // result.oauth_token_secret;
            // result.screen_name;
            // result.user_id;
            getUserInfo(result.oauth_token, result.oauth_token_secret);
        }, function (error) {
            console.log(error);
        });
    };

    // ユーザー情報の取得
    function getUserInfo(accessToken, accessTokenSecret) {
        var requestUrl = "https://api.twitter.com/1.1/account/verify_credentials.json";
        createTwitterSignature("GET", requestUrl, accessToken, accessTokenSecret);
        $http({
            method: 'GET',
            url: requestUrl,
            params: {},
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        }).success(function (result) {
            console.log(result);
        }).error(function (error) {
            console.log(error);
        });
    }

    // Twitter用のヘッダー情報作成
    function createTwitterSignature(method, url, accessToken, accessTokenSecret) {
        var oauthObject = {
            oauth_consumer_key: CONSUMER_KEY,
            oauth_nonce: $cordovaOauthUtility.createNonce(10),
            oauth_signature_method: "HMAC-SHA1",
            oauth_token: accessToken,
            oauth_timestamp: Math.round((new Date()).getTime() / 1000.0),
            oauth_version: "1.0"
        };
        var signatureObj = $cordovaOauthUtility.createSignature(method, url, oauthObject, {}, CONSUMER_SECRET_KEY, accessTokenSecret);
        $http.defaults.headers.common.Authorization = signatureObj.authorization_header;
    }
})

「account/verify_credentials.json」で取得できる情報は以下のサイトで確認。

GET account/verify_credentials | Twitter Developers

Twitterアカウントの場合、48行目のようにAPIキーや取得してきたアクセストークンなどの情報を署名に付加して、ヘッダー情報（$http.defaults.headers.common.Authorization）に設定します。AngularJSの$httpサービスのヘッダーはデフォルトで固定のヘッダー情報が書き出されるため、リクエスト送信前にこのデフォルトのヘッダー情報を書き換えます。

CordovaでTwitterアカウントを利用した認証には、他にtwitter-connect-pluginというプラグインがあり、こちらはTwitterでログイン済みのユーザーを一覧から選択できる機能があるようですが、このプラグインには「Fabric」というAPIが必要です。

試してみたかったのですが、このAPIはIDEに依存したインストールしかできないようで、Androidで対応しているのが「Android Studio」と「IntellJ」の２つ（2016年10月現在）。残念ながら、私が利用しているVisual Studio Tools for Apache Cordovaの環境ではインストールできないようだったので、今回は確認していません。（Xamarinではできるのかな...）