【NoCode】BubbleでGoogleログイン機能を実装してみよう！
皆様こんにちは、taku（@takuNoCode1）です！
平素より格別のご高配を賜り厚く御礼申し上げます。
今回は、NoCodeツールBubbleでGoogleログイン機能を実装していきます！
この記事で学ぶこと
・Google ログイン機能の実装方法
・Google Developer Console の設定方法
・Google アカウント情報の取得方法
NoCodeツールBubbleの概要につきましては、次の記事で解説しましたので、まずはこちらをご覧ください。
1. 実装するサンプル
今回は、ソーシャルログインについて学ぶために、Googleログイン機能を実装していきます。
ソーシャルログインとは、FacebookやTwitterなどのSNSのアカウント情報を利用して、Webサービスにログインする方法です。
ソーシャルログインを使用すると、簡単にログインすることができるため、ユーザーの負担を減らすことができ、Webアプリの集客を増やすことに繋がります。
コードを書く場合はかなり大変なのですが、Bubbleでは、プラグインを導入するだけで簡単に実装することができます。
Googleのアカウントをまだ持っていない方は作成しておいてください。
2. プラグイン（Google）の導入及び各種設定
2-1. プラグイン（Google）導入
左メニューの「Plugins」を選択し、「Add plugins」をクリックします。
検索フォームに「Google」と入力し、「Install」をクリックした後、「DONE」ボタンをクリックします。
プラグインを使用するためには、「API」について理解する必要があります。
「API」とは、「Application Programming Interface」の頭文字で、ざっくり説明すると、「外部アプリと連携ができるようにするための窓口」です。
この「API」を使用することで、「外部アプリ」のデータを「自分が作成したアプリ」の中で使用することが可能になります。
「Google」と連携するためには、「App Secret」と「App ID」が必要になるので、「Google Developer Console」 にて取得します。
「Use a generic redirect URL」のチェックボックスにチェックを入れます。次章でリダイレクト設定を行いますので、( )内のURLをメモっておいてください。
2-2. App Secret 及び App ID 取得
下記リンクから 「Google Developer Console」 にアクセスします。Googleアカウントが必要ですので、まだお持ちでない方は作成してください。
https://console.developers.google.com/
左上の「プロジェクトの選択」から、「新しいプロジェクト」ボタンをクリックします。
「プロジェクト名」にBubbleで作成したアプリ名を入力し、「作成」ボタンをクリックします。
プロジェクトが作成されたら、左メニューの「OAuth 同意画面」を選択し、「User Type」の「外部」にチェックを入れ、「作成」ボタンをクリックします。
「アプリケーション名（Bubbleで作成したアプリ名）」を入力します。
「承認済みドメイン」に「bubbleapps.io」を入力した後、エンターキーを押して追加し、「保存」ボタンをクリックします。
左メニューの「認証情報」から、「認証情報を作成」ボタンをクリックし、「OAuthクライアント ID」を選択します。
「アプリケーションの種類」に「ウェブアプリケーション」を選択します。
「承認済みのリダイレクトURI」の「URIを追加」ボタンをクリックし、BubbleのプラグインでメモしたURLを入力した後、「作成」ボタンをクリックします。
「クライアント ID」と「クライアント シークレット」を取得できました。
2-3. プラグイン（Google）設定
Bubbleのプラグインに戻り、「Google Developer Console 」で取得した、「クライアント シークレット」を「App Secret」に、「クライアント ID」を「App ID/API Key」 にそれぞれコピペします。
以上で、「プラグイン（Google）」 及び 「Google Developer Console」 の設定が完了しました。
3. Googleログイン機能実装
3-1. ログインボタン作成
「Button」を配置し、「Login with Google」に変更します。
「Start/Edit workflow」をクリックし、「Workflow」を作成していきます。
「Click here to add an action」をクリックし、「Account」から「Signup/login with a social network」を選択します。
「OAuth provider」から「Google」を選択します。
これにより、Googleアカウントによる認証が可能になりました。
3-2. ログイン後のページ作成
左上の「Page:index」をクリックし、「Add a new page」を選択します。
「Page name」を入力します。「Clone from」は空欄のままで、「CREATE」ボタンをクリックします。
ログイン後のページでは、「プロフィール画像」及び「ラストネーム」をGoogleアカウントから取得し、表示します。
ページ中央に「Group」を配置し、その中に「Image」を配置します。
プロパティの「Dynamic image」をクリックし、「Insert dynamic data」をクリックした後、「Current User's Google's Profile picture」となるように、順に選択していきます。
これにより、Googleアカウントの「プロフィール画像」を表示することが可能になりました。
「Image」の下に「Text」を配置します。「Insert dynamic data」をクリックし、「Current User's Google's Last name」となるように、順に選択していきます。
これにより、Googleアカウントの「ラストネーム」を表示することが可能になりました。
今回は、「Last name」を選択しましたが、「First name」や「Emailアドレス」も同じ手順で取得することができます。
「Text」の下に「Button」を配置し、「Logout」に変更します。
「Start/Edit workflow」をクリックし、「Workflow」を作成していきます。
「Click here to add an action」をクリックし、「Account」から「Log the user out」を選択します。
これにより、ログアウト機能を実装することができました。
3-3. ページ遷移設定
ログインボタンにさらに「Workflow」を追加します。
「Click here to add an action」をクリックし、「Navigation」から「Go to page」を選択します。
「Destination」に先程作成したログイン後のページを選択します。
「Step1」で「Signup/login with Google」を実行し「Step2」で「home」ページ に遷移するといった流れです。
上記と同じ流れで、ログアウトボタンに「Workflow」を追加します。
「Step1」で「Log the user out」を実行し「Step2」で「index」ページ に遷移するといった流れです。
4. テスト及びデータベース確認
以上で、Googleログイン機能の実装が完了しました。「Preview」ボタンをクリックし、テストを行ってください。
左メニューの「Data」をクリックし、「App data」を選択します。「All Users」をクリックすると、データベースに登録されたユーザー情報を確認することができます。
「Email」に、自分のGoogleアカウントのメールアドレスが表示されていれば実装成功です。
5. まとめ
最後に、Googleログイン機能実装の流れをまとめます。
① プラグイン（Google）を導入する
②「App Secret 」及び「 App ID 」を取得する
③ リダイレクトURLを設定する
④ ログインボタンの「Workflow」を作成する
⑤ ログイン後のページを作成し、アカウント情報を表示する
⑥ ログアウトボタンの「Workflow」を作成する
⑦ ページ遷移設定を行う
今回は、Googleログイン機能を実装しましたが、ソーシャルログイン機能実装の基本的な流れは同じなので、他のSNSの場合も簡単に実装することができます。
引き続きBubbleの理解を深めていきましょう！