【Bubble】Twitterログイン機能の設定をしてみよう ３、Twitterログインを実装しよう
こんにちは。NoCodeNinjaです。
今回も前回に引き続き、「Twitterログイン機能の設定をしてみよう」です。
前回まではこちら
今回はいよいよ「３、Twitterログインを実装しよう」です。
ここまで来ていたら難関は突破出来ているので、自信を持って進めていきましょう！
設定面で少し細々としていますが、概念を確認しながらやってみれば大丈夫です。
それでは、いってみましょう。
APIを入力してログイン連携を完成させる
取得したAPIの確認
実は前回までの時点で、APIの取得は完了しています。
確認してみましょう。
まずはDeveloper登録完了後からのTopページです。
前回と同じく右上に登録した名前と、Menuボタンがありますのでhovor（ポインタを乗せる）すると項目が出てきます。
「Apps」をクリックしましょう。
前回と違って、登録したAppが表示されていることと思います。
その右側の「Details」をクリック。
すると、「App detaiils」が上部のタブと共に表示されるので、上部タブ「Key and tokens」をクリック。
以下の画面へと進みます。
API key：
API secret key：
それぞれ値が表示されていますでしょうか。
確認しましたら、こちらをBubbleと連携していきましょう。
Bubble側の設定
Pluginをダウンロード
BubbleのAppを開きましょう。
左側「Plugin」タブで進み、右上青色Button「＋ Add plugins」をクリック。
「Twitter」を検索すると出てきますので、Installしましょう。
下の青色Buttonを押し、「Done」を押します。
Installed Plugin（自分のインストールしたプラグイン一覧）に戻り、「Twitter」を見てみましょう。
こちらに先の
API key：＝Consumer key
API secret key：＝Consumer secret
を入力します。
「- dev」は開発段階でのバージョンを記入できる欄になっていますので、Consumer keyと- dev、Consumer secret keyと-devは同じものを記入します。
これで、連携が完了となりました。
実際に、ログイン機能を使ってみましょう。
実装する
それでは、実際にTwitterログインを使っていきましょう。
要件定義
最低限でいきます。
ただ、せっかくなんで
という仕様にしてみます。
各Elementを設置
設置するElementは２つ。「icon」と「text」です。
Twitterアイコンについては、今回はiconエレメントを使います。
左側の「Visual elements」から「icon」を選択し、右側の任意の位置に貼り付けます。
値は以下のように設定しましょう。
iconは「Choose an icon」をクリックすると検索できるので「twitter」と入力すると選べます。
二種類ありますので、お好みで。
続いてTextを設置。
値は以下のように設定します。
ポイントは「This element is visible on page load」のチェックを外すことです。
ログイン後に表示させたいので、最初からあっては困りますよね。
Elementはこれで完了です。
Workflowを設定
続いて、icon elementから「Start/Edit workflow」を選択します。
「Account」から「Signup/login with a social network」を選択。
「Oauth provider」で「Twitter」を選択。
これでicon完了です。
続いて、Step2は「Element Action」「Animate」
値は以下のように設定。
「Define a custom duration」にチェックを入れると表示までの時間を設定できるので
Duration（ms）「3000」に設定。
続いて、Step3は「Navigation」「Add a pause before next action」
こちらは次のFadeoutまでにしばらく表示させておくのに設定します。
値は以下のように設定。
Pause length(ms)（止める長さ）は「3000」くらいがちょうどいいのではと思います。
続いて、Step4は「Element Actions」「Animate」
値は以下のように設定します。
これで、「ログインしました」がフェードアウトします。
以上でWorkfllowも完成しました！
こうなっていればOKです。
それでは、確認してみましょう。
プレビュー
Previewを押すと画面が表示されるので、iconをクリック。
バッチリいってます！
これでTwitterログイン設置完了ですね♪
まとめ
長くにわたって紹介しましたTwitterログインでしたが、とうとう実装まで紹介出来ました。
一から何も見ずにやるのは結構大変なので、是非参考にしながらやってみてください。
それでは、また！
