【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の理解を深めていきましょう！