第５回Twitterログインについて
以前、当ブログで「Bubbleでログイン処理をしてみよう！」と題して、前回最終回と銘打ちましたが、まだまだ続きます・・・！
今回はTwitterログインについて触れようと思います。
ログイン処理シリーズの第４回にて、ソーシャルログインについて触れました。
その時の記事はこちら↓
この中では具体的に、Googleのソーシャルログインについて説明しましたが、Twitterログインについても説明しようと思います。
Twitterログインの問題点
Googleログインでは問題はないのですが、Twitterではいくつか問題があります。
まずは簡単に違いを見てみましょう。
どちらもBubbleの無料プラグインを利用する前提です。
そもそも、認証方式は違うのですが、それは置いといてBubbleのプラグインでの違いを簡単にまとめると、大きくは以下の二つになります。
| 汎用CallbackURL | なし | あり |
| メールアドレス | プラグインから取得不可 | サインアップ時に取得され、Userに自動に登録される |
ログイン処理シリーズの最終回では、GoogleのCallbackURLは汎用URLを利用するように書いています。 ※Googleでは「redirect URL」という名称です。
これはなぜかというと、一つのURLの設定だけで良いからです。
基本的にCallbackURLはログインアクションを呼ぶ画面のURLを指定しなければならないので、汎用URLを利用しない場合は、ログインアクションを呼ぶ画面全てのURLをCallbackURLに設定する必要があります。
ここで、気づきましたよね？Twitterログインの場合、汎用CallbackURLがないので、ログインアクションを使用するすべてのURLを登録しなければならないことを！！
うーん、面倒ですよね～
という問題ではなく・・・重要な問題が隠れていたのです！！
CallbackURLの設定は最大で10まで！（Twitterの仕様）
動的に変化するURLをCallbackURLに登録できない！
汎用CallbackURLを設定できれば全て解決するのですが。
しかしTwitterプラグインでは設定できません。どう解決すれば良いでしょうか？
それは、Twitterログインアクションを行う画面を一つに決め、そこを経由するです！
例えば、Twitterのログインを行える画面が、AとBとあります。
Aの方のみログインアクションすると決めたとすると、BからTwitterログインしたい場合、以下のような処理フローになります。
BからTwitterログインボタンをクリック
↓
Aに遷移
↓
Aのページロードで実際にTwitterログインをする
↓
Bに遷移
次からサンプルを利用して説明しますので、具体的なやり方を知りたい方は以下もお読みください。
サンプルはこちらです↓
https://nocodelab-twitterloginsample.bubbleapps.io
ログインしても個人データは何も登録されないので、ご安心ください。
サンプルを作ってみよう
サンプルを実際に作成してみましょう！
このサンプルは今回の解決策のためのものなので、非常に簡易なサンプルであることをご了承ください。
１．事前準備
準備として、以下を行います。
Twitter側：
- TwitterDeveloperサイト（https://developer.twitter.com/ja.html）のアカウントを作成およびTwitterアプリを作成し、API Key、API secret keyを取得
index画面のみTwitterに直接ログインするので、この画面のURLをcallbackURLに登録してください。
本サンプルの場合は「https://nocodelab-twitterloginsample.bubbleapps.io/」、「https://nocodelab-twitterloginsample.bubbleapps.io」を登録しています。
developモードの場合は「version-test」もお忘れなく。
※Developerアカウント作成をTwitterから認可されるのに少々時間がかかることがあります。
Bubble側：
- Bubbleで新規アプリを作成
- 作成したBubbleのアプリに「Twitter」プラグインをインストール
- Data Typeに「TestData」を追加し、このフィールドに「Title（text）」、「Detail（text）」を追加
今回は、以下のような画面を用意しましょう。
- index（この画面のみTwitterログインします）
Twitterのサインイン・サインアップを行います。
- mypage（ログイン後の画面）
indexからログイン後に遷移する画面。
事前準備した「TestData」の一覧を表示します。
mypageの「TestData」の一覧を選択するとdetailに遷移します。
- detail（ログイン後の画面で値の受け渡しをします）
mypageから渡された「TestData」の詳細を表示します。
- header （全画面共通） アプリのタイトルと、ログイン中に「ログアウト」ボタンを表示します。
さらに、mypage、detail両画面では、ログイン中ではない場合、ログインボタンを表示するようにします。
それでは詳しく見ていきましょう。
２．index画面～Twitterログインをしてみよう
まずは単純にindex画面から、Twitterログインができるようにしましょう。
事前準備で取得したTwitterのAPI Key、API secret keyをTwitterプラグインの画面にてそれぞれConsumer key、Consumer secretに設定します。
次にindex画面に「Twitterでログインする」ボタンを用意します。
そのボタンのクリック時のワークフローを設定しましょう。 「Account」から「Signup/Login Social with a social network」を選択します。 OAuth providerのプロパティからTwitterを選択します。
さらに、ログイン後はmypageに遷移するようにします。
条件にログインしているかを入れています。
前回のブログで、
Current UserにGoogleというプロパティが追加されていますので、そのIdがあるかどうか、を条件にしています。
と書きました。Twitterも同じようにCurrent UserにTwitterというプロパティが追加されているので、そのIdがあるかでも問題はありません。
ただ、GoogleでもTwitterでも「Current User is logged in」でログインを確認できるので、これでログインしているか確認する方が可読性が高いですね。
３．mypage画面～Twitterログインをindexで行おう
それでは、次にmypage画面を作成しましょう。
mypageでは、ログイン中の時に表示される領域（Group Loginとします）、ログインしていない時に表示される領域（Group NotLoginとします）を用意します。
各Groupのエレメントは以下のようになっています。
Group Login
１．Text：「ログインされました！」
２．Repeating Group：ここでは「TestData」を表示します
３．Group：Repeationg Group内に「Group TestData」
４．Text：「Group TestData」の中にTest Dataの内容を表示Group NotLogin
１．Text：「ログインしましょう！」
２．Button：「Twitterでログインする」
どちらのGroupも、「This element is visible on page load」のチェックを外し、「Collapse this element's height when hidden」にチェックをいれておきましょう。
表示するタイミングは、Page Loadや各GroupのConditionalを利用し、「Current User is logged in」、「Current User isn't logged in」を条件に表示しましょう。
次に、未ログインの時に表示する「Twitterでログインする」のワークフローを設定しましょう。
当ブログでは、index画面を経由してログインするようにしたいので、 index画面に遷移するように設定します。
さらにどの画面から遷移してきたかをパラメータで渡します。
Key：PreviousPage、値：mypage
とします。
mypage画面ではここまでで終了です！
４．detail画面～Twitterログインをindexで行おう
次にdetail画面の作成をします。
※mypage画面にあるRepeating Groupのリストの一つをクリックすると、detail遷移するようにしてください。
mypage画面と同様に、ログイン中の表示領域、未ログイン時の表示領域と用意しています。
一つ異なる点は、detail画面は「Type of content」を指定しています。なので、mypageに遷移するときに、「TestData」を渡すようになります。
こうすると、URLは https://【webAppName】.bubbleapps.io/detail/XXXXXXXXXXXXXXX となります。 このときXXXXXXXの部分はTestDataのunique idになり、URL自体が動的になります。
CallbackURLを設定する時、「https://【webAppName】.bubbleapps.io/detail/XXXXXXXXXXXXXXX」を設定しなければならず、CallbackURLとしては固定ではない限り設定できません。
なので、mypage画面で行ったように、index画面に遷移し、index画面のページロードでTwitterログインを行うようにしましょう。
mypage画面と１点異なるところは、TestDataの表示が必要になることです。そのため、パラメータは以下の二つになります。
Key：PreviousPage、値：detail
Key：TestDataId、値：TestDataのunique id
これでdetail画面ができました。
５．index画面のページロードでTwitterログインできるようにしよう
このままでは、単純にmypageやdetail画面から「Twitterでログイン」ボタンをクリックしてもindex画面に遷移するだけ、になりますよね。
なので、index画面の方をさらに修正していきましょう。
index画面で経由してログインする、とは言っても、またユーザにボタンをクリックしてもらうのではありません。（それでも良いですが、ユーザとしては2度手間ですよね）
そこで、自動でログイン処理をするようにPage Load時にTwitterログインするようにワークフローを設定しましょう！
まずはmypage画面から遷移された場合、
Page Load時にmypageから遷移されているかどうかの条件を付けます。
「Current User isn't logged in」 かつ「GETパラメータ：PreviousPageの値がmypageであること」が条件です。
ここでmypageから渡したパラメータが生きてきますね。
アクションはindex画面の「Twitterでログインする」と同じになります。
これでmypageの「Twitterでログインする」ボタンをクリックすると、index画面でTwitterログインをし、mypageに遷移するようになりました。
同じように、detail画面から遷移された場合もページロード時のワークフローを設定します。
１点異なるのは、detail画面に遷移する時、「Data to send」を行う必要があることです。 パラメータで渡されたTestDataのunique idを元に検索して渡しましょう。
これで、全てできました！！ 関係ないところの説明は割愛しましたが、プレビューで試してみましょう！
６．注意点
callbackURLは10個以内であればよいので、今回のサンプルの場合、mypageは普通にmypageのURLをcallbackURLに設定すれば何も問題ありません。方法の一つを示しただけですのでご注意ください。
また、index画面で普段表示している「Twitterでログインする」ボタンは、mypage、detail画面からTwitterログインを呼ぶ場合は表示しないようにすると良いでしょう。
最後に
Twitterでも汎用CallbackURLがもしかしたら今後対応されるかもしれませんが、それまではこの方法が最適かと思います。
ただ、Bubbleの画面遷移は若干動作が遅く感じるので、もう少しスムーズに表示されると良いですね。
ここまで読んでいただき、ありがとうございました！！
