【Bubble】Googleログインを実装する方法
概要
Googleログイン機能をBubbleで実装する方法について解説します。
BubbleでGoogleログインを実装する際の事前準備
1. Googleプラグインを追加
Bubbleエディタ「Plugins」メニューから「Google」プラグインをインストールします。
![](https://swooo.net/wp-content/uploads/2023/03/01スクリーンショット-2023-01-22-23.10.55.png)
Googleプラグインの設定画面から、「Use a generic redirect URL」にチェックを入れ、redirect URLを控えておきます。
![](https://swooo.net/wp-content/uploads/2023/03/02スクリーンショット-2023-01-24-23.04.30.png)
2. Google Cloud Platform(GCP)で利用登録する
まずGCPにアクセスし「無料で使ってみる」をクリックします。
![](https://swooo.net/wp-content/uploads/2023/03/03スクリーンショット-2023-01-22-23.00.53-1.png)
利用するGoogleアカウントを選択しログインすると、以下のような画面が表示されます。
利用規約にチェックを入れて「続行」をクリックしてください。
![](https://swooo.net/wp-content/uploads/2023/03/04スクリーンショット-2023-01-22-23.02.56-1.png)
お支払情報等を入力して、利用登録は完了です。
![](https://swooo.net/wp-content/uploads/2023/03/05スクリーンショット-2023-01-22-23.05.40-1.png)
3. GCPプロジェクトの作成
画面上部の「プロジェクト名」を選択すると、以下のような画像でプロジェクトの選択ウィンドウが表示されるので「新しいプロジェクト」をクリックします。
![](https://swooo.net/wp-content/uploads/2023/03/06スクリーンショット-2023-01-22-23.16.57-1.png)
ℹ️ プロジェクト名は任意の名前を入力してください。
4. OAuth同意画面の設定
左メニュから「APIとサービス」→「OAuth同意画面」を開きます。
![](https://swooo.net/wp-content/uploads/2023/03/07スクリーンショット-2023-01-22-23.21.37-1.png)
以下の画面からUser Type「外部」を選択して「作成」をクリックします。
![](https://swooo.net/wp-content/uploads/2023/03/08スクリーンショット-2023-01-22-23.24.31-1.png)
最低限必要な項目を入力します。
アプリ名 | 任意の名前 |
---|---|
ユーザーサポートメール | メールアドレスを選択 |
アプリケーションのホームページ | https://{自身のドメイン}.bubbleapps.io/ |
承認済みドメイン | http://bubbleapps.io/ |
デベロッパーの連絡先情報 | 指定メールアドレスを入力 |
「スコープ」は設定不要の為「保存して次へ」をクリックします。
「テストユーザー」には実装テストに利用するGoogleアカウントのアドレスを入力します。
「概要」にて入力内容を確認して、OAuth同意画面の設定は完了です。
![](https://swooo.net/wp-content/uploads/2023/03/09スクリーンショット-2023-01-22-23.39.02-1.png)
5. 認証情報の設定
左メニュから「認証情報」を開きます。「+認証情報を作成」をクリックし、
![](https://swooo.net/wp-content/uploads/2023/03/10スクリーンショット-2023-01-22-23.41.49-1.png)
「OAuthクライアントID」を選択します。
![](https://swooo.net/wp-content/uploads/2023/03/11スクリーンショット-2023-01-22-23.42.07-1.png)
「承認済みのリダイレクトURI」の「URIを追加」ボタンをクリックし、Bubbleのプラグインで控えておいたredirect URLを入力し「作成」ボタンをクリックします。
![](https://swooo.net/wp-content/uploads/2023/03/12スクリーンショット-2023-01-24-23.15.39-1.png)
「クライアント ID」と「クライアント シークレット」を取得します。
![](https://swooo.net/wp-content/uploads/2023/03/13スクリーンショット-2023-01-24-23.19.14-1.png)
6. Googleプラグインの設定
Bubbleエディタに戻り、取得した「クライアント シークレット」を「App Secret」に、「クライアント ID」を「App ID/API Key」に入力します。
![](https://swooo.net/wp-content/uploads/2023/03/14スクリーンショット-2023-01-24-23.21.55.png)
BubbleでGoogleログインを実装する
BubbleエディタにGoogleログインボタンを作成します。
![](https://swooo.net/wp-content/uploads/2023/03/15スクリーンショット-2023-01-24-23.26.09.png)
Googleログインボタンにワークフローを設定し、Account→Signup/login with a social networkを選択します。
![](https://swooo.net/wp-content/uploads/2023/03/16スクリーンショット-2023-01-22-22.47.46.png)
OAuth providerにGoogleを設定します。
![](https://swooo.net/wp-content/uploads/2023/03/17スクリーンショット-2023-01-24-23.28.06.png)
Previewでテストして無事にGoogleログインができれば実装は完了です。