【5分でわかる】BubbleアプリにおけるGoogleソーシャルログイン機能の実装方法

ソーシャルログインとは、ユーザーが使い慣れた既存のSNSアカウントを利用して、Webサイトやサービスにログインできる機能です。利用ユーザーの利便性を高めるためにも実装を検討されている方が多いかと思います。

本記事ではそんなWebサイトの利便性を高めてくれるソーシャルログイン機能の中でも特に人気の高いGoogleに絞ってBubbleアプリに機能を実装する方法について解説いたします。

今すぐノーコード案件を探す！

＼最短60秒で登録可能！／
無料会員登録
案件を探す

Google Cloud Platform（GCP）の利用登録

Google Cloud Platform（以下、GCP）の利用登録は非常に簡単です。

「@gmail.com」のGmailアカウントがあればすぐにGCPの利用を開始できます。※既にGCPに登録済みの方は本章をスキップしてください。

GCP（https://cloud.google.com/）にアクセスして「無料で使ってみる」をクリック。

利用するGoogleアカウントを選択しパスワードを入力。すると以下のような画面に遷移するかと思うので、利用規約にチェックを入れて「続行」をクリックしましょう。

次にSMSを利用した本人認証です。SMSを受信できる電話番号を入力して「コードを送信」をクリックしてください。

SMSメッセージが送られてくるはずなので、コードを入力し「確認」をクリックします。

次に、支払い情報としてクレジットカード情報を登録して「無料トライアルを開始」をクリックすれば利用登録は完了です。

登録作業お疲れ様です。今後は以下のGCPコンソール画面から作業を行なっていきます。

GCPの利用登録は非常に簡単。以降はコンソール画面から作業を行う。

BubbleアプリでGoogleログイン機能を実装するためにプラグインを導入する必要があるため、先にインストールしておきましょう。

Bubbleの「Plugins」→「＋Add plugins」をクリックして「Google」と検索してみてください。以下の画像の通り、Googleプラグインが表示されるはずなので「Install」ボタンを押下してインストールします。

プラグインのインストールが完了すると、以下の設定画面が表示されるので、「Use a generic redirect URL」にチェックを入れた上で、URLをコピーしておいてメモ帳か何かに貼り付けておいてください。後ほど利用します。

Googleと連携するためには「App Secret」と「App ID」が必要となるので、次章の手順で情報を取得していきます。

Googleプラグインをインストールして「Use a generic redirect URL」の値を予めコピーしておく。

さて、ここからが本題であるBubbleアプリでGoogleログイン機能を実装するために必要となってくる作業となります。

プロジェクトの作成が済んでいない方は、まずGCPプロジェクトを作成しましょう。

GCPにログインし、画面上部の「プロジェクト名」を選択。すると以下の画像のように、プロジェクトの選択ウィンドウが表示されるので「新しいプロジェクト」をクリックする。

プロジェクト名は任意の名前で構いません。

次に「ハンバーガーメニュー」→「APIとサービス」→「OAuth同意画面」を開きます。

すると、以下の画面に遷移するのでUser Type「外部」を選択して「作成」をクリック。

情報を入力していきましょう。以下は最低限入力が必要となる項目になります。

アプリ名	同意を求めるアプリの名前（任意の名前）
ユーザーサポートメール	ユーザーが同意に関して問い合わせるために使用（希望メアドを選択）
アプリケーションのホームページ	https://{your-bubble-app-name}.bubbleapps.io/
承認済みドメイン	bubbleapps.io
デベロッパーの連絡先情報	プロジェクトの変更についてGoogleからお知らせするために使用。

必要事項の入力が完了したら「保存して次へ」をクリックしましょう。

「スコープ」に関しては設定不要のため、画面下の「保存して次へ」をクリックします。

「テストユーザー」にはログイン検証で利用するGoogleアカウントのアドレスを入力。

最後に「概要」にて入力内容を確認し、画面下の「ダッシュボードに戻る」をクリックすればOAuth同意画面での作業は完了です。