ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明します。質問やご指摘大歓迎です。わからないことがあったら、コメントや Twitter などで聞いてください!

Bubbleでログイン処理をしてみよう!~第5回Twitterログインについて

f:id:korokoro-vc:20200225152445p:plain

第5回Twitterログインについて

以前、当ブログで「Bubbleでログイン処理をしてみよう!」と題して、前回最終回と銘打ちましたが、まだまだ続きます・・・!

今回はTwitterログインについて触れようと思います。

ログイン処理シリーズの第4回にて、ソーシャルログインについて触れました。
その時の記事はこちら↓

blog.nocodelab.jp

この中では具体的に、Googleのソーシャルログインについて説明しましたが、Twitterログインについても説明しようと思います。

Twitterログインの問題点

Googleログインでは問題はないのですが、Twitterではいくつか問題があります。
まずは簡単に違いを見てみましょう。
どちらもBubbleの無料プラグインを利用する前提です。
そもそも、認証方式は違うのですが、それは置いといてBubbleのプラグインでの違いを簡単にまとめると、大きくは以下の二つになります。

Twitter Google
汎用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

ログインしても個人データは何も登録されないので、ご安心ください。

サンプルを作ってみよう

サンプルを実際に作成してみましょう!
このサンプルは今回の解決策のためのものなので、非常に簡易なサンプルであることをご了承ください。

1.事前準備

準備として、以下を行います。

Twitter側:

 ※Developerアカウント作成をTwitterから認可されるのに少々時間がかかることがあります。

Bubble側:

  • Bubbleで新規アプリを作成
  • 作成したBubbleのアプリに「Twitter」プラグインをインストール
  • Data Typeに「TestData」を追加し、このフィールドに「Title(text)」、「Detail(text)」を追加

今回は、以下のような画面を用意しましょう。

  • index(この画面のみTwitterログインします)
    Twitterのサインイン・サインアップを行います。

f:id:korokoro-vc:20200209182210j:plain

  • mypage(ログイン後の画面)
    indexからログイン後に遷移する画面。
    事前準備した「TestData」の一覧を表示します。
    mypageの「TestData」の一覧を選択するとdetailに遷移します。

f:id:korokoro-vc:20200206200915j:plain

  • detail(ログイン後の画面で値の受け渡しをします)
    mypageから渡された「TestData」の詳細を表示します。

f:id:korokoro-vc:20200206201330j:plain

  • header (全画面共通) アプリのタイトルと、ログイン中に「ログアウト」ボタンを表示します。

さらに、mypage、detail両画面では、ログイン中ではない場合、ログインボタンを表示するようにします。

それでは詳しく見ていきましょう。

2.index画面~Twitterログインをしてみよう

まずは単純にindex画面から、Twitterログインができるようにしましょう。

事前準備で取得したTwitterのAPI Key、API secret keyをTwitterプラグインの画面にてそれぞれConsumer key、Consumer secretに設定します。

f:id:korokoro-vc:20200206203935j:plain

次にindex画面に「Twitterでログインする」ボタンを用意します。

そのボタンのクリック時のワークフローを設定しましょう。 「Account」から「Signup/Login Social with a social network」を選択します。 OAuth providerのプロパティからTwitterを選択します。

f:id:korokoro-vc:20200207125759j:plain

さらに、ログイン後はmypageに遷移するようにします。

f:id:korokoro-vc:20200207140625j:plain

条件にログインしているかを入れています。

前回のブログで、

Current UserにGoogleというプロパティが追加されていますので、そのIdがあるかどうか、を条件にしています。

と書きました。Twitterも同じようにCurrent UserにTwitterというプロパティが追加されているので、そのIdがあるかでも問題はありません。

ただ、GoogleでもTwitterでも「Current User is logged in」でログインを確認できるので、これでログインしているか確認する方が可読性が高いですね。

3.mypage画面~Twitterログインをindexで行おう

それでは、次にmypage画面を作成しましょう。

mypageでは、ログイン中の時に表示される領域(Group Loginとします)、ログインしていない時に表示される領域(Group NotLoginとします)を用意します。

f:id:korokoro-vc:20200209191730j:plain

各Groupのエレメントは以下のようになっています。

  • Group Login
     1.Text:「ログインされました!」
     2.Repeating Group:ここでは「TestData」を表示します
     3.Group:Repeationg Group内に「Group TestData」
     4.Text:「Group TestData」の中にTest Dataの内容を表示

  • Group NotLogin
     1.Text:「ログインしましょう!」
     2.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でログインする」のワークフローを設定しましょう。

f:id:korokoro-vc:20200207165551j:plain

当ブログでは、index画面を経由してログインするようにしたいので、 index画面に遷移するように設定します。

さらにどの画面から遷移してきたかをパラメータで渡します。
Key:PreviousPage、値:mypage
とします。

mypage画面ではここまでで終了です!

4.detail画面~Twitterログインをindexで行おう

次にdetail画面の作成をします。

※mypage画面にあるRepeating Groupのリストの一つをクリックすると、detail遷移するようにしてください。

f:id:korokoro-vc:20200207203019j:plain

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ログインを行うようにしましょう。

f:id:korokoro-vc:20200208191039j:plain

mypage画面と1点異なるところは、TestDataの表示が必要になることです。そのため、パラメータは以下の二つになります。
Key:PreviousPage、値:detail
Key:TestDataId、値:TestDataのunique id

これでdetail画面ができました。

5.index画面のページロードでTwitterログインできるようにしよう

このままでは、単純にmypageやdetail画面から「Twitterでログイン」ボタンをクリックしてもindex画面に遷移するだけ、になりますよね。

なので、index画面の方をさらに修正していきましょう。

index画面で経由してログインする、とは言っても、またユーザにボタンをクリックしてもらうのではありません。(それでも良いですが、ユーザとしては2度手間ですよね)

そこで、自動でログイン処理をするようにPage Load時にTwitterログインするようにワークフローを設定しましょう!

f:id:korokoro-vc:20200207200155j:plain

まずはmypage画面から遷移された場合、 Page Load時にmypageから遷移されているかどうかの条件を付けます。
「Current User isn't logged in」 かつ「GETパラメータ:PreviousPageの値がmypageであること」が条件です。
ここでmypageから渡したパラメータが生きてきますね。

アクションはindex画面の「Twitterでログインする」と同じになります。

これでmypageの「Twitterでログインする」ボタンをクリックすると、index画面でTwitterログインをし、mypageに遷移するようになりました。

同じように、detail画面から遷移された場合もページロード時のワークフローを設定します。

f:id:korokoro-vc:20200209193956j:plain

1点異なるのは、detail画面に遷移する時、「Data to send」を行う必要があることです。 パラメータで渡されたTestDataのunique idを元に検索して渡しましょう。

これで、全てできました!! 関係ないところの説明は割愛しましたが、プレビューで試してみましょう!

6.注意点

callbackURLは10個以内であればよいので、今回のサンプルの場合、mypageは普通にmypageのURLをcallbackURLに設定すれば何も問題ありません。方法の一つを示しただけですのでご注意ください。

また、index画面で普段表示している「Twitterでログインする」ボタンは、mypage、detail画面からTwitterログインを呼ぶ場合は表示しないようにすると良いでしょう。

最後に

Twitterでも汎用CallbackURLがもしかしたら今後対応されるかもしれませんが、それまではこの方法が最適かと思います。

ただ、Bubbleの画面遷移は若干動作が遅く感じるので、もう少しスムーズに表示されると良いですね。

ここまで読んでいただき、ありがとうございました!!

Bubble でログイン処理をしてみよう!コンテンツ一覧