JavaScript SDKを使ってTwitter認証機能を使ってみる - ニフクラ mobile backend（mBaaS）お役立ちブログ

mBaaSでは各種ソーシャルサービスを使った認証機能を提供しています。今回はその一つ、Twitter認証を使う方法を紹介します。TwitterではJavaScriptだけで認証を終えることができず、外部にサーバが必要になります。今回はOAuth.ioを使ってサーバレスのまま、Twitter認証を実装してみたいと思います。

Twitterでアプリを作る
OAuth.ioでAPIの設定を行う
mBaaSの管理画面で設定を行う
使ってみる

Twitterでアプリを作る

まず最初にTwitter Developersへ行き、Twitterアプリを作成します。ここでコンシューマキーとコンシューマシークレットの2つのキーを取得します。

Callback URLは https://oauth.io/auth としておきます。

OAuth.ioでAPIの設定を行う

OAuth.ioのサイトでIntegrated APIsを設定します。Twitterを選択し、先ほど取得したコンシューマキーとシークレットキーを設定します。

mBaaSの管理画面で設定を行う

次にmBaaSの管理画面に入り、Twitter連携の許可と、コンシューマキーの設定をします。

使ってみる

では実際にコードを書いてみます。まずOAuth.ioのライブラリを読み込みます。今回はBowerを使ってインストールします。

bower install oauth-js

そしてHTML側で読み込みます。

<script src=&quot;bower_components/oauth-js/dist/oauth.min.js></script>

使い方ですが、ポップアップウィンドウを出して認証を行います。OAUTH-IO-KEYはOAuth.ioにて指定されるキーになります。

OAuth.initialize('OAUTH-IO-KEY');
OAuth.popup('twitter')
  .done(function(res) {
    // 認証完了
  });

この認証完了時点ではユーザの情報は殆どありません。そこでTwitterにユーザ情報APIをコールします。

OAuth.initialize('OAUTH-IO-KEY');
OAuth.popup('twitter')
  .done(function(res) {
    res.get('/1.1/account/verify_credentials.json').done(function(data) {
    });
  });

このようにすることで data の中にユーザ情報が入ってきます。

mBaaS側で必要な認証の情報ですが、次のようになります。

Twitter ID
Twitterアカウントの名前
コンシューマーキー
コンシューマーシークレット
トークン
トークンシークレット

これらのデータを取得するコードは次のようになります。OAUTH_CONSUMER_KEY、OAUTH_CONSUMER_SECRETはTwitterにて取得したコンシューマキーとコンシューマシークレットを当てはめてください。

var user_info = {
  oauth_consumer_key: 'OAUTH_CONSUMER_KEY',
  consumer_secret: 'OAUTH_CONSUMER_SECRET'
}
OAuth.initialize('OAUTH-IO-KEY');
OAuth.popup('twitter')
  .done(function(res) {
    user_info.oauth_token        = res.oauth_token;
    user_info.oauth_token_secret = res.oauth_token_secret;
    res.get('/1.1/account/verify_credentials.json').done(function(data) {
      user_info.id = String(data.id);
      user_info.screen_name = data.screen_name;
    });
  });

注意点としてはdata.id（TwitterのユーザID）は数値であり、文字列としておく必要があるということです。

後はこのuser_infoを使って認証を行います。返ってくるのはユーザオブジェクトになります。

user.loginWith('twitter', user_info, function(err, user) {
  ncmb.user = user;
})

後はこのユーザオブジェクトを使って権限管理に利用ができます。

var Item = ncmb.DataStore("Item");
var item = new Item;
item.set("text", "Hello");
var acl = new ncmb.Acl();
acl.setUserReadAccess(user, true);
item.set('acl', acl);
item.save()
  .then(function(d) {
    console.log(d);
  })