【中級者向け】BubbleにGoogleカレンダーの認証を実装する

本記事では、Google Calendar APIにアクセスするためのOAuth2.0認証を実装する方法を解説します。

Google Calendar APIの認証をBubbleアプリに実装することで、アプリユーザーはBubbleアプリと特定のデータを共有することができます。

例えば、Bubbleで開発されたスケジュールアプリに認証機能を追加することで、Bubbleアプリで作成されたスケジュールとGoogleカレンダーのスケジュールを同期することが可能になります。

そもそもBubbleの使い方がわからないという方は、以下の記事を先にご覧になることをおすすめします。

Bubbleの登録から簡単な使い方について解説しています。

Google Cloud Platformの設定

OAuth2.0サーバーへのリダイレクト

アプリケーションがGoogleのOAuth 2.0サーバーと対話し、ユーザーに代わってAPIリクエストを実行することで、ユーザーの同意を取得する方法を示します。

アプリケーションは、ユーザー認証を必要とするGoogle APIリクエストを実行する前に、その同意を得る必要があります。

大まかなステップは以下の通りです。

1. アプリケーションは、必要な権限のリストとともにユーザーをGoogleにリダイレクト
2. ユーザーは、アプリケーションに権限を許可
3. アプリケーションはユーザーに代わってAPIリクエストを実行

STEP.1

Google OAuth 2.0エンドポイントを直接呼び出す場合は、リダイレクトURLにパラメータを設定します

各パラメータの詳細を知りたい方は、以下のリンクをご覧ください

▶ウェブサーバー アプリケーションに OAuth 2.0 を使用する

リダイレクトURLの構成

STEP.2

Bubbleエディタを開き、"Open an external website"アクションにリダイレクトURLを設定します

STEP.3

ユーザーをGoogle OAuth2.0サーバーにリダイレクトするための設定はこれだけです。

注意

上の画面はテスト環境では常に表示されます

STEP.4

「続行」をクリックすると、Bubbleアプリにリダイレクトされます。このときURLの"code="に続く文字列をコピーしておいてください。

アクセストークンとリフレッシュトークンの取得

ユーザーがアクセス要求を認証すると、応答には認証コード(“code”)が含まれます。ユーザーがリクエストを承認しない場合、レスポンスにはエラーメッセージが含まれます。

エラー応答

https://testapp.bubbleapps.io/page?error=access_denied

認証応答

https://testapp.bubbleapps.io/page?code=4/P7q7W91a-oMsCeLvIaQm6bTrgtp7

認証コードと引き換えにトークンを取得することで、エンドユーザーのデータにアクセスすることが可能となります。

トークンには「アクセストークン」と「リフレッシュトークン」の2種類があり、APIリクエストに使用するアクセストークンは期限が短く、期限が切れたときはリフレッシュトークンで更新します。

これらトークンの引き換えにはAPIを使用します。

STEP.1

HTTPリクエストの詳細は以下の画像を参考にしてください。

コードとトークンを交換するリクエスト

STEP.2

Bubbleエディタを開き、API Connectorプラグインをインストールしてください。

STEP.3

アクセストークンおよびリフレッシュトークンを取得するAPIは以下の通りです。

STEP.4

"Initialize call"をクリックしてAPIを初期化します。

「SAVE」をクリックします

トークンを取得するワークフローの設定

認証コードのリクエストは外部ページを開くため、アクションを続けて設定することはできません（Bubbleのワークフローでは、”Open an external website”は最後のアクションでなければならない）。

そのためトークン取得のAPIは、認証リクエストから戻ってきたとき、かつ”code”パラメータが存在するときに発火させます。

認証→トークン取得の結果

これでBubbleアプリからGoogleカレンダーの権限をリクエストするフローが実装できました。