Twitter アプリ
ここでは、Twitter 上でのOAuthを利用したシングルサインオン ( Single Sign-On/SSO ) の方法を解説します。 シングルサインオンには、InAppBrowser プラグインと、サードパーティ製 advanced-http プラグイン を使用し、また、OAuthに必要なシグネチャは oauth-signature ライブラリ を利用します。
認証成功後、ユーザーの基本情報をアプリ上に表示したり、ツイートを投稿することが出来ます。
デモ
テスト環境
Android 11.0
iOS 14.3
事前準備
Twitter の Consumer Key と Consumer Secret の確認方法
TwitterAPIを利用するためには、デベロッパーアカウントの登録が必要となります。 Twitter Developer Account よりデベロッパーアカウントを登録します。
次に、『 Twitter Developer Portal 』ページ上で、アプリを登録し、Consumer Key
(API key
) と Consumer Secret
(API secret key
) 、Bearer token
を発行します。
Twitter Developer Portal の概要ページ へ移動します。
Standalone Apps
を、画面下部のCreate App
ボタンより作成します。 (Standalone Apps
を作成する代わりに、Projects配下にAppsを作成でも構いません)Name ( アプリ名 )、Description ( アプリの説明 )、Website ( アプリのダウンロード元となる URL )を入力します。(※ アプリ名には、すでに利用されている名前は利用できません。また、1日あたりに作成出来るアプリ数には、上限があります。)
「Callback URL」(任意:認証成功後に表示されるページ。)を入力します。 今回のサンプルアプリでは、
mymonacaapp://
と設定します。適時、自分のアプリ用のものに変更してください。 なお、このCallback URLはアプリの実装時にも必要になります。Settings
タブを選択して、App permissions
から、Read and Write
権限を許可します。アプリからツイートを行わない場合は、Read
権限のみ許可します。Settings
タブを選択して、Authentication
から、3-legged OAuth
を有効にします。
プラグインのインポート
シングルサインオンを実現させるため、InAppBrowser プラグインと サードパーティ製 advanced-http プラグイン を使用します。 また、OAuthに必要なシグネチャを作成するために oauth-signatureライブラリを使用します。
Monaca クラウド IDE から
設定 → Cordova プラグインの管理
を選択します。InAppBrowser
プラグインを有効
にします。
3. ボタン「Cordovaプラグインのインポート」をクリックして、「URLもしくはパッケージ名を指定します」にチェックをし、パッケージ名に cordova-plugin-advanced-http
を入力し、OKボタンをクリックします。
JSコンポーネントのインポート
Monaca クラウド IDE から
設定 → JS/CSSコンポーネントの追加と削除
を選択します。コンポーネントの検索フォームに
oauth-signature-js
と入力して検索。検索結果からoauth-signature-js
をインストールします。その後、読み込み対象の選択にて、components/oauth-signature-js/dist/oauth-signature.js
を選択し、保存します。 なお、oauth-signature.js
ライブラリは、 BSD-3-Clause であるので、アプリのソースコード、バイナリコードの配布を行う場合はご注意下さい。
アプリの解説
ファイル構成
ファイル | 説明 |
| アプリ画面のページ |
| アプリのスタイルシート |
| アプリの実行時にさまざまな処理を行う JavaScript ファイル |
HTML の解説
index.html
アプリ画面となるページです。
このページは、大きく3つのブロックに分かれています。それぞれのブロックは、 <hr>
タグにより区切られています
ログイン ブロック:
Twitterログイン画面に移行するボタンと、ログイン後にユーザーID、ユーザー名(スクリーン名)を表示するコンポーネントがあります。
プロフィール ブロック:
ログインユーザーのプロフィールを取得するボタンと、取得成功後にそれを表示するコンポーネントがあります。
ツイート ブロック:
テキストエリアと、ツイートするボタンがあります。
JavaScript の解説
app.js
ファイルの最初3行で、事前準備で取得した APIキー(コンシューマキー)、APIキーシークレット(コンシューマシクレット)、コールバックURLを設定します。
Connectボタンをタップすると認証画面が表示されます。
ログイン成功後、アクセストークンとユーザーIDを変数 model
に保持します。 今回のサンプルアプリでは、ログアウト機能はないため、ログイン状態を解除するには、アプリをタスクからkillすることが必要です。
次に Show Me
ボタンをタップすると、ログインしたユーザー情報と、アイコンが表示されます。 さらに、Send Tweet
ボタンをタップすると、テキストフォームに入力したメッセージが、Twitterへ投稿されます。
Twitterのログイン画面にて、パスワードを「保持します(Remember me)」にチェックした場合、次回からアカウントとパスワードは、入力せずにログイン済みの状態で認可画面になります。Twitterからログアウトしたい場合は、認可画面で右上のアイコンから、サインアウトして下さい。
このアプリでは、ログイン情報(アクセストークン)を 変数modelに一時的に保持しているため、アプリを再起動するとログイン情報は失われてしまいます。ログインしている状態を維持したい場合は、アクセストークンとユーザーIDをlocalstorage等の永続化可能な場所に保存します。
最終更新