ionic(cordova)にてinstagram でのログインを実装

やりたいことは、instagramアカウントでのログインの実装。調べたところではSDKがなさそうで、webと同じような実装になりそう。また、投稿したりシェアしたり?のプラグインはあるみたいだけどログインはできなそうなので今回は自前で作る。

やることは以下。
・アプリケーション登録
・cordova-plugin-inappbrowserを導入
・プログラム実装

アプリケーション登録

https://www.instagram.com/developer
こちらのページから「Register Your Application」をクリックしてアプリを作成する。作成する際にサイトのURLとコールバックURLが必要になる。また、作成すると「Client ID」と「Client Secred」が発行されるのでこちらをメモしておく。

cordova-plugin-inappbrowserを導入

ブラウザで認証画面を表示したいのでInAppBrowserを使えるように。

$ ionic plugin add cordova-plugin-inappbrowser

プログラム実装

var auth_url = 'https://api.instagram.com/oauth/authorize/';
var user_url = 'https://api.instagram.com/v1/users/self/';
var redirect_uri = 'コールバックURLに指定したURL';
var client_id = 'クライアントID';

var url = auth_url + '?client_id=' + client_id + "&redirect_uri=" + redirect_uri + "&response_type=token";

this.iframe = window.open(url, 'iframeName');
var self = this;
self.iframe.addEventListener('loadstart', function(e) {
  if (e.url.indexOf(redirect_uri) == 0) {
    self.iframe.close();
    var token = e.url.replace(redirect_uri + "#access_token=", "");
    $http.get(user_url + '?access_token=' + token)
      .then(function(result) {
        // 成功
      })
      .catch(function(err) {
        // 失敗
      });
  }
});

こんなかんじで取れた。以上です。