Google Calendar API や Google Drive API、Gmail API などの Google アカウントに紐づいたサービスを Bubbleで利用するには、OAuth 2.0 を使用した認証が必要です。本記事では、Bubble で Google OAuth 2.0 をセットアップする方法を詳しく解説します。
1. Google Cloud プロジェクトの作成
まず、Google Cloud Console でプロジェクトを作成し、利用したいAPIを有効化する必要があります。
Google Cloud Console にアクセスし、新しいプロジェクトを作成
Google Cloudへの登録が完了していない場合は、先に登録を行なってください。
新しいプロジェクトの作成は、ヘッダー左側のプロジェクト選択ボタンを押し、出てくるポップアップの右上のボタンより行うことができます。
1-1. 使用したいGoogle APIを検索し、有効化
サイドメニューの「APIとサービス」→「ライブラリ」から使用したいGoogle APIを検索し、APIの詳細画面でそのAPIを有効化します。
1-2. Google Auth Platformの構成
Google Cloud Console の左側メニューから「APIとサービス」→「OAuth同意画面」を開きます。
| アプリ情報 – アプリ名 | アプリ名を入力 |
| アプリ情報 – ユーザーサポートメール | 選択肢から選択 |
| 対象 | 「外部」にチェック |
| 連絡先情報 | Googleからのプロジェクト変更通知を受け取るメールアドレスを入力 |
1-3. 同意画面の設定
Google Cloud Console の左側メニューから「APIとサービス」→「OAuth同意画面」→「ブランディング」を開きます。
この画面で入力する情報は、ユーザのデータへアクセスするときに表示される画面で、データへのアクセス前に認証を行う画面のことです。
| アプリ名 | アプリ名を入力 |
| ユーザーサポートメール | 選択肢から選択 |
| 承認済みドメイン | bubbleapps.io |
| 連絡先情報 | Googleからのプロジェクト変更通知を受け取るメールアドレスを入力 |
1-4. OAuth 2.0 クライアントIDの作成
Google Cloud Console の左側メニューから「APIとサービス」→「認証情報」を開きます。
「認証情報を作成」→「OAuth 2.0 クライアント ID」を選択。
「アプリケーションの種類」で「ウェブアプリケーション」を選択。
次に、リダイレクトURIを設定します。
このURIは、ユーザーがGoogleログインを行い、同意後にリダイレクトされるページを指します。
例えば、testapp.bubbleapps.io/redirectというページにリダイレクトし、そこで処理を行う場合
- testapp.bubbleapps.io/redirect
- testapp.bubbleapps.io/version-test/redirect
の2つのURIを登録してください。
このURIは後から変更することも可能です。
「作成」ボタンをクリックすると、OAuth クライアント ID と クライアント シークレットが生成されます。
2. BubbleでのOAuth 2.0のセットアップ
2-1. 認可コードを取得する
何かしらのトリガーを用意して（Buttonクリックなど）、BubbleのAction「Open an external website」を配置し、Destinationに以下のリンクを入力する
https://accounts.google.com/o/oauth2/auth?client_id=[手順1-4で取得したクライアントID]&redirect_uri=[手順1-4で設定したリダイレクトURI]&scope=https://www.googleapis.com/auth/documents (使用したいサービスのスコープ)&response_type=code (認証をコードとして出力)&access_type=offline (オフラインでAPIを使用＝リフレッシュキーを発行)&include_granted_scopes=true&prompt=consent（リフレッシュトークンを発行）手順2-1で設定したActionを呼び出すと、Googleのログイン画面が表示されます。同意が完了し、アプリにリダイレクトされるとurlに認可コードが含まれて返ってきます。
https://testapp.bubbleapps.io/redirect?code=4/asugraaiwj-awrjiawurva&scope=https://www.googleapis.com/auth/documents上記リンクの場合、code=と&の間の4/asugraaiwj-awrjiawurvaが認可コードになります。
この認可コードは次のアクセストークン・リフレッシュトークンの取得で使用します。
【注意】
この際、公開ステータスが”テスト中”の場合、テストユーザーに追加されたユーザーのみがアクセス可能です。
テストユーザーに含まれていないユーザーのログインはエラーが発生しますのでお気をつけください。
テストユーザーの追加は、Google Cloud Console の左側メニューから「APIとサービス」→「OAuth同意画面」→「対象」から可能です。
2-2. トークンを取得するAPIを設定
次に、認可コードを使用してアクセストークンとリフレッシュトークンを取得します。
Pluginタブに移動し、「API Connector」を開きます。
以下の通りにAPIを設定します。
メソッドとエンドポイント
| メソッド | POST |
| エンドポイント | https://oauth2.googleapis.com/token |
Headers
| Key | Value | Private |
|---|---|---|
| Content-Type | application/x-www-form-urlencoded | yes |
Body type
| Body type | Raw |
| Body | client_id=_*_clientId_*_ &client_secret=_*_clientSecret_*_ &redirect_uri=_*_redirecturi_*_ &grant_type=authorization_code &code=_*_code_*_ |
Body parameters
この項目は、Bodyを入力すると自動的に表示されます。
| Key | Value |
|---|---|
| clientId | クライアントID [手順1-4] |
| clientSecret | クライアントシークレット [手順1-4] |
| redirecturi | リダイレクトURI [手順1-4] |
| code | 認可コード [手順2-1] |
入力が完了したら、左下のボタン”Initialize call”を実行します。
成功すると”access_token”,”expires_in”,”refresh_token”,”token_type”,”id_token”を取得することができます。
2-3. トークンを取得するAPIを実装
2-1の手順でGoogleログインを実施すると、リダイレクト後のurlに認可コードが含まれていました。
ここでは実際にそのコードを使用して自動的にトークンを取得できるように実装します。
まず、リダイレクトされるページ（今回はtestapp.bubbleapps.io/redirectとします）のeditor画面を開きます。
Workflowタブを開き、”Click here to add an event”をクリックして新たなイベント「Page is loaded(ページがロードされた時)」を選択します。
このイベントに、”Get code from page URL isn’t empty”という条件を設定します。これは、urlにcode=…というパラメータが含まれている場合に、何かしらのアクションを実行する（今回はトークンの取得）という意図です。
Get code from page URLの内容は以下の通りです。
| Type | Parameter |
| Parameter name | code |
| Type | text |
次にトークンを取得するためのアクションを配置します。
Action > Plugins > [2-2で作成したAPI]を追加し、各パラメータを入力します。
必要に応じてこのアクションで得られるアクセストークンやリフレッシュトークンなどを保存してください。
このアクセストークンを使用することで、様々なGoogle APIを利用することができます。
アクセストークンについて
アクセストークンの有効期限は1時間です。期限が切れたアクセストークンを使用してAPIにアクセスしようとすると“401 UNAUTHENTICATED”のようなエラーレスポンスが返されます。
この際、再度アクセストークンを取得するためには「リフレッシュトークン」を使用して、アクセストークンを取得し直す必要があります。
まとめ
Bubble.ioでGoogle APIを利用するためには、OAuth 2.0を設定する必要があります。本記事では、以下のステップについて詳しく説明しました。
- Google Cloud Consoleでプロジェクトを作成し、APIを有効化
- OAuth 2.0の認証情報（クライアントIDとシークレット）を作成
- Bubble.ioのAPI Connectorを使用してOAuth 2.0の認証をセットアップ
- 認可コードを取得し、アクセストークンを取得してAPIリクエストを送信
- アクセストークンを定期的に更新し、継続的なAPI利用を可能にする
これらの設定を正しく行うことで、Bubble上でGoogleの各種API（Calendar、Drive、Gmailなど）を活用することができます。
今後、より高度なAPI連携を行いたい場合は、Google APIの公式ドキュメントを参照しながら、必要なスコープやエンドポイントを追加設定するとよいでしょう。