ソーシャルログインとは、GoogleやFacebook、Twitterなどのサービスの既存アカウントを利用して、サインアップ／ログインできる機能です。
本記事では、GoogleアカウントのソーシャルログインをBubbleに実装する方法を解説します。
そもそもBubbleの使い方がわからないという方は、以下の記事を先にご覧になることをおすすめします。
Bubbleの登録から簡単な使い方について解説しています。
合わせて読みたい
目次
Google Cloud Platform(GCP)の登録
STEP.1
まず、GCPに登録します。Googleアカウントを持っていればすぐに登録できます。
STEP.2
利用規約に「同意して続行」します
STEP.3
左サイドバーの APIとサービス > OAuth同意画面 をクリックします。
STEP.4
プロジェクトが無い場合、プロジェクトを作成します。
STEP.5
任意のプロジェクト名を設定して下さい。
STEP.6
プロジェクトが作成されると、同意画面の項目が表示されます。
STEP.7
外部を選択して「作成」
STEP.8
情報を入力し、「保存してクリック」。
STEP.9
ソーシャルログインではスコープを追加する必要はありません。
STEP.10
今回は「テストユーザー」を追加しなくて大丈夫です。
STEP.11
入力した情報を確認し、「ダッシュボードに戻る」をクリック
STEP.12
次に、左サイドバーから「認証情報」をクリックします。
STEP.13
画面上部の 認証情報を作成 ＞ OAuthクライアントID をクリックします。
STEP.14
「ウェブアプリケーション」を選択
STEP.15
任意の名前を入力し、その他はそのままで「作成」をクリックします。
STEP.16
「クライアントID」と「クライアントシークレット」をクリップボードにコピーします。
Googleプラグインのインストールと設定
STEP.1
Bubbleエディタを開きます。Settings > Add plugins をクリック。
STEP.2
検索窓に「google」と入力し、Googleプラグインをインストールします。
STEP.3
プラグインの設定画面で、先ほどコピーしたクライアントIDを"App ID/API Key"、クライアントシークレットを"App Secret"に貼り付けます。"Use a generic redirect URL"にチェックをつけます
STEP.4
ここで、"Use a generic redirect URL"に表示されているURLを、先ほど作成したOAuth2.0クライアントIDの「承認済みのリダイレクトURI」に追加します。「保存」をクリック。
これでプラグインの設定ができました。
エレメントの設置とワークフロー設定
STEP.1
Bubbleの任意のページに「Googleアカウントでログイン／新規登録」ボタンを設置します。Google公式デザインのボタンは以下のリンクからダウンロードできます。（参考：ログインにおけるブランドの取り扱いガイドライン）
STEP.2
"Start/Edit workflow"をクリックしてワークフローを設定します。Account > Signup/login with a social network からスタートします。
このアクションの実行によってBubbleの「User」データタイプにアカウントが登録されます。
確認してみる
STEP.1
STEP.2
ここまで手順通りに進めれば、以下のような動作になります
無事ログインできました！
BubbleにGoogleログインを実装する方法について解説しましたが、参考になったでしょうか？
ソーシャルログインは利便性を上げるだけなく、アプリを利用してもらうハードルをぐっと下げることのできる機能です。
ぜひ実際に使ってみてください。
最後まで読んで頂きありがとうございました。
