Cordova tips - Twitter SSO(Single Sign on) を実装する方法

8 years ago

『twitter-connect-plugin』を使えばカンタンにできます.

ただ, 導入するにあたり Fabric の api key が見つからなかったり, config.xml まわりの設定がいくつか必要だったりとちょっと手順が多かったので備忘録がてらまとめました.

よかったら参考にしてください.

Setup

1. Fabric api key を取得しよう

twitter-connect-plugin は内部で Fabric framework を使っているので Fabric の API Key が必要です.

Fabric のアカウントを作成しアプリをインストールしてください.
更に, 適当な xcode のプロジェクトと twitter 連携すると下記のような画面が表示されます.

Fabric

このモザイク部分の最初の文字列が API Key になります.

2. twitter-connect-plugin をインストール

下記のコマンドで twitter-connect-plugin インストールします. の部分は 1 で取得した値を設定してください.

$ cordova plugin add twitter-connect-plugin --variable FABRIC_KEY=<Fabric API Key>

3. Twitter App と連携

Twitter アプリを作って TwitterConsumerKey と TwitterConsumerSecret を取得してください.

やり方はこちらで詳しく解説しています.

『Twitter API Key を取得する方法 | phiary』

4. config.xml に Twitter App の情報を登録

<widget> ~ </widget> に 3 で取得した値を下記のように設定します.

<preference name="TwitterConsumerKey" value="<Twitter Consumer Key>" />  
<preference name="TwitterConsumerSecret" value="<Twitter Consumer Secret>" />

5. iOS の deployment-target を設定

内部で使っているフレームワークがいくつか iOS7 以上にしか対応していないので, config.xml に下記を追加して deployment-target を指定しましょう.

<preference name="deployment-target" value="7.0" />

6. 実行, 確認

$cordova run ios
or  
$cordova run android

Usage

下記のコードでログインできます.

TwitterConnect.login(  
  function(result) {
    console.log('Successful login!');
    console.log(result);
  }, function(error) {
    console.log('Error logging in');
    console.log(error);
  }
);

Twitter アプリで連携済みのアカウントの一覧が表示されるのでそこから
連携したアカウントを選びましょう.

twitter sso

連携に成功すると result に下記の内容が返ってきます.

{
  userName: '<Twitter User Name>',
  userId: '<Twitter User Id>',
  secret: '<Twitter Oauth Secret>',
  token: '<Twitter Oauth Token>'
}

Logout

ログアウト用のメソッドです.

TwitterConnect.logout(  
  function() {
    console.log('Successful logout!');
  },
  function() {
    console.log('Error logging out');
  }
);

phi