【Bubble】Twitterログイン機能の設定をしてみよう ４、コールバックURLについて
こんにちは。NoCode Ninjaです。
今回も前回に引き続き、「Twitterログイン機能の設定をしてみよう」です。
前回まではこちら
前回でTwitterログインに成功しましたので、最低限の機能面は前回まででOKだと思います。
ただ設置方法として、「ヘッダーにログイン機能を設ける」パターンは実際のところ多いので、こういう時どうすればいいのか・・で悩むと思います。
何故かというと前回の通り、「ログインする可能性のあるページ（コールバックURL）は全て申請せよ」というのがTwitterの方針です。
ほぼ全ページで表示されているであろうヘッダーにログイン機能を置くと、当然すべてのページに適用されてしまうのです。
ヘッダー単体そのものにURLが存在すれば一発解決なのですが、当然そんなはずもなく。。
そして、そのコールバックURLの設定数は１０個まで・・仮に１０個以上OKだったとしても、全て書くのは非効率ですし気の遠くなるような単純作業です。
じゃぁ、どうするか。今回はここに焦点を絞って紹介します。
なお、この記事はノーコードラボさんの記事を参考にしています。
（元々筆者がノーコードラボさんに相談を持ち掛けたところから話が始まりました。）
今回許可を得て掲載していますので、是非ノーコードラボさんの記事も読んだ上で当ブログも読むとより確実でお勧めです。
それでは、いってみましょう。
コールバックURLとは
ログインする可能性のあるページのこと
Twitterに対して情報を「コール（送る）」して「バック（返してもらう）」してログイン完了。という流れなので、コールバック。それを行うページ（URL）のことです。
そのURLをあらかじめ申請しないといけません。
では、ヘッダーなどの複数ページに適用される場合はどうするか。
Twitterログイン専用のページを１か所作ると、うまくいきます。
ログインする時は、全てそこのページに一度ジャンプする構造を作ればその専用ページが１つの受け皿となってログイン処理を実行するという仕組みです。
実装する
要件定義
ログインボタンを押す→ログイン専用のページにジャンプ→ページにアクセスするとすぐにTwitterログインを実行→ログインしたらText「ログインしました。しばらくするとトップへ自動的に戻ります。」という文言を表示させる→しばらくするとトップページに戻る
このように定義するとうまくいきそうです。
では、進めてみましょう。
ログイン専用ページを作る
それでは、ページを作ります。
まずは前回試したこのページがあります。
こちらのページをそのままコピーしちゃいましょう。
ページの何もないところを右クリック。「Clone this page」をクリックして、ページをコピーします。
Page nameは何でもOKなのですが、「Twitterlogin」とでもしておきます。
そのままCREATEを押しましょう。
するとコピー後のページが表示されます。
Element
Twitterアイコンを選択しDeleteで消します。
完全な空白ページになりましたね。
そして、元々のページのコピーなのでこのTextがありました。
「あれ？ない！？」と思ったそこのアナタ。左上の「Elements tree」にちゃんと隠れていますよ♪
この「Text ログインしました。し...」をクリックするとちゃんと出てきます。
無くてビックリしましたよね（笑）
この文言を書き換えましょう。
「ログインしました。しばらくするとトップへ自動的に戻ります。」
とします。
ドラッグして、サイズも広げます。
良い感じですね。
それでは、もう一度コピー前のページ（index）に戻ります。
Workflowの変更をしましょう。
Workflow（index）
indexのWorkflowから・・
黒の「When～」の右下のごみ箱ボタンをクリックし、思い切って全削除です。
進化の為には、気持ちよく消してゆきましょう。
さあそのまま、「Click here to add an event...」をクリック。
「Elements」「An element is clicked」で進みます。
このパターンは初めてかもしれませんが、各ElementのEdit欄から「Start/Edit Workflow」で進むのと同じ意味になります。
Workflow画面から設定するのか、ElementのEdit欄から設定するのかの違いだけになります。どちらも良く使うので覚えておくと便利です。
そして、以下の画面のように設定します。
これで「When～」は設定完了です。iconをクリックすると～ということです。
そして、「Click here～」をクリックし、「Navigation」「Go to page...」をクリックします。
設定を以下の画面のようにしましょう。
iconをクリックすると、twitterloginに行くというWorkflowでひとまず完成です。
Workflow（twitterlogin）
それでは続いて、左上の「page」で「twitterlogin」へ移動します。
Workflowを開き、「Click here～」から
「General」「Page is loaded」をクリック。
そして下の「Click here to add an action」をクリックし、「Signup/login with a social network」をクリック。
「Twitter」を選択しましょう。
そして、Step2を設定します。
すぐ右の「Click here to add an action」で、「Element Actions」「Animate」を選択しましょう。
設定は以下の画面の通りです。
前回とほぼ一緒です。
そして、Step3。
最後に、Step4。indexへ戻る動作です。
前回の内容とほとんど同じですね。
さあ、これで完了しました。
あと忘れてはいけないのが一点、今回の目玉です。
Twitter側でコールバックURLを指定しましょう。
コールバックURLを指定する
Twitter Developer
コールバックURL設定ページへジャンプします。
DeveloperトップからAppを開き、Detailまで進みます。
右側青色Button「Edit」を押し、下に進むとCallback URLsがあります。
「＋add another」をクリック。
一つURLを入れられるinputが出てきますので、先ほどの「twitterlogin」と名付けたページのURLをそのままコピペします。
ただし、ここで重要な注意点。
クエリ文字列「?debug_mode=true」は抜いてください。
クエリ文字列は読み取ってくれません。
これで下の青色Button「Save」を押し、完了です！
プレビュー
確認してみましょう。
うまくいっています！
ページを一つ経由するので重い時があるかもしれませんが、今のところ軽快です♪
まとめ
以上、コールバックURLについて紹介しました。
Twitterログインシリーズはこれにて最終回となりますが、全体を通して結構複雑に感じられたのではないでしょうか。
それだけセキュリティを強化しているTwitterの姿勢の現れとも言えるかもしれません。
またコールバックURLは2018年6月以前は汎用１つで大丈夫だったようで、それ以降はこのように厳密に設定が必要になったとのこと。
この時期に突如色んなサイトでTwitterログインのエラーが頻発していたことを覚えている方がいらっしゃるかもしれませんが、どうやらこちらが原因だったようです。
当時混乱したでしょうね・・。
ただ、しっかり理解していれば怖くないのできっちり設定をしておきましょう。
それでは、また！
