mBaaSでは各種ソーシャルサービスを使った認証機能を提供しています。今回はその一つ、Twitter認証を使う方法を紹介します。TwitterではJavaScriptだけで認証を終えることができず、外部にサーバが必要になります。今回はOAuth.ioを使ってサーバレスのまま、Twitter認証を実装してみたいと思います。
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="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); })
Twitterを使った認証機能はこのように実装します。各種キーも会員情報として保存されていますので、外部のTwitterライブラリを使って写真を共有したり、ステータスをアップロードするといったこともできるでしょう。