《Bubble》Googleログインの実装方法（プラグイン）

　Googleログインの実装前の準備

1. Googleプラグインのインストール

①「Plugins」からGoogleプラグインをインストール。

②Googleプラグインの設定画面で「Use a generic redirect URL」にチェックを入れてURLを控えておく。

　　※後ほど認証情報の設定で使用します。

2. Google Cloud Platform (GCP) で利用登録

① GCPにアクセスして「無料で使ってみる」をクリック。

② 使用するGoogleアカウントを選択してパスワードを入力する。既にログインしている場合は次の画面にスキップされる。

③ 必要な情報を入力して「無料で利用開始」をクリックすると利用登録完了。

3. GCPで新しいプロジェクトを作成

　GCPにログインしたあと、画面左上「プロジェクト名」から「プロジェクトの選択」ウィンドウを開き「新しいプロジェクト」をクリック。　

4. OAuth同意画面の設定

①左上ハンバーガーメニューの「APIとサービス」から「OAuth同意画面」を開く。

②User Typeで「外部」を選択し「作成」をクリックする。

必要事項を入力する🖊️

　アプリ名：任意で決めたアプリ名

　ユーザーサポートメール：使用するメールアドレスを選択

　アプリケーションのホームページ：https://{your-bubble-app-name}.bubbleapps.io/

　承認済みのドメイン：bubbleapps.io

　デベロッパーの連絡先情報：Googleからの通知を受け取るためのメールアドレスを指定

　　※スコープ：設定不要

　　　テストユーザー：ログインのテストをする場合は使用するアドレスを指定する。

必要事項の入力が完了したら「保存して次へ」、最後に「概要」で入力内容を確認し「ダッシュボードへ戻る」をクリックして完了。

5. 認証情報の設定

①左側のメニューから「認証情報」を選択し、「＋認証情報を作成」をクリックして「OAuthクライアントID」を選択。

②アプリケーションの種類を「ウェブアプリケーション」として、名前は任意でつけたものを入力。

　　「承認済みのリダイレクトURI」の「＋URIを追加」からGoogleプラグインの設定時に控えたredirect URLを入力し、

　　「作成」をクリック。

③「クライアント ID」と「クライアントシークレット」を取得できるので値をコピーして、GCPでの作業は完了。

６ Googleプラグインの設定

　Googleプラグインの設定画面で、先ほど取得した値を入力する。

　　App ID/API Key : クライアントID

　　App Secret : クライアントシークレット

　Googleログインの実装

①Googleアカウントでログインするためのボタンを配置。

　　※公式がデザインしたログインボタンは「Google でログイン」のブランドの取り扱いガイドラインからダウンロードできます。

②ログインボタンをクリックしたときのワークフローで「Account」の「Signup/login with a social network」を選択。

③「OAuth provider」を「Google」に設定。

以上でGoogleログインの実装完了です。