【Bubble】API Connectorの使い方

APIとは

API(Application Programming Interface)とは、あるコンピュータシステムやWebサイトが、外部のプログラムからアクセスできるようにするためのインターフェースです。

通常は、プログラマがAPIを使用することで、あるコンピュータシステムやWebサイトが提供するデータや機能を利用できます。

具体的なユースケース

• 住所から郵便番号をAPI経由で取得する

「神戸市灘区」- > 657000

API connectorの各コンポーネントの解説

まず初めにBubbleでAPI Connectorを使うために、API Connectorプラグインをインストールします。

続いてAPI connectorのコンポーネントについて解説します。

番号	名前	説明
1	API Name	接続するAPIサービスのカスタム名を指定します。 この名前は、アプリケーション内部でサービスに接続するために使用されます。
2	Authentication	一部のAPIコールでは、認証が必要です。 API内で定義するすべての呼び出しに適用する認証方法を選択します。
3	Shared headers for all calls	ヘッダーは、サーバーが使用するために送られる追加情報です。 ヘッダーの例としては、送信されるコンテンツの形式（JSONなど）を指定します。 この情報は暗号化されて送信され、APIキーなどの機密情報はここに記載する必要があります。
4	Shared parameters for all calls	パラメータは、APIコールでURLの末尾に追加されるクエリストリングパラメータです。 これらの値は可変であり、要求された特定のデータやアクションを判断するためのさらなる情報をサーバーに提供します。

番号	名前	説明
1	Name	APIコールの名前を指定します。
2	Use as	Data：Designタブで、外部APIからデータを取得して、APIコールを使用できます。 Action：Workflowタブの「Actions」ドロップダウンメニューの「Plugin」セクションでAPIコールを使用できます。
3	Data type	APIレスポンスのデータ形式を定義します。
4	Method	外部サーバーとの対話方法を指定します。 サポートされているメソッドは以下の5つです。 Get:リソースを取得する。 Post: 新しいリソースを作成する。Put: 既存のリソースの編集や更新をする。 Delete: リソースを削除する。 Patch: 既存のリソースを更新する。
5	URL	サーバーのURLを指定します。
6	Headers	特定のコールのヘッダーをここに追加できます。
7	Body type	APIコールのボディのデータ形式を定義します。
8	Querystring Parameter	呼び出しに対するパラメータを追加します。パラメータが必要でない場合は、Optionalをチェックします。
9	Body	APIに送信するデータです。
10	Attempt to make the call from the browser	APIコールをBubbleサーバー上ではなく、ブラウザから直接実行したい場合にチェックします。
11	Include errors in response and allow workflow actions to continue	レスポンスエラーをエディターで処理する場合にチェックします。
12	Capture response headers	検出されたデータ中のリクエストヘッダに、利用する重要なデータが格納されている場合、そのヘッダをキャプチャします。
13	Import call from cURL	チェックすると、クライアントのURLをインポートします。

APIを利用するための認証

認証は、API交換が行われる前に行われます。

一部の API サーバでは、クライアント (リクエストする当事者) の身元を検証し、そのリソースへのアクセスを確認するために必要とされます。

以下の認証方法は、Bubble の API Connector プラグインに組み込まれています。

秘密鍵を使った認証

秘密鍵認証の場合、APIをポーリングする際に秘密鍵を提供する必要があります。

APIサーバーに秘密鍵を提供する方法には、次の2つの方法があります。

• URL経由

秘密鍵は、APIコールのURLで提供できます。

Authenticationを「Private key in URL」にします。

番号	名前	説明
１	Key Name	キーパラメータのクエリ文字列を入力します。
2	Key Value	APIキーの値を指定します。

• ヘッダー経由

秘密鍵は、APIコールのヘッダーで提供できます。

この方法は、秘密鍵情報をより安全に送信することができるため、推奨されています。

Authenticationを「Private key in header」にします。

番号	名前	説明
1	Key Name	APIのヘッダーの名前を入力します。
2	Key Value	APIキーの値を指定します。
3	Development Key Value	開発版APIキーの値を指定します。このキーは、アプリケーションをDevelopmentモードで実行するときに使用されます。

基本認証

基本認証では、リクエストの際にAPIサーバーにユーザー名とパスワードを提供します。Authorization:Basic <credentials>の形式でヘッダーに認証情報を送信します。

認証情報は、コロンで区切られた文字列 ‘username:password’ を連結し、base64 形式でエンコードしたものです。

Authenticationを「HTTP Basic Auth」にします。

番号	名前	説明
1	Username	APIドキュメントに記載されているユーザーIDを入力します。
2	Password	APIドキュメントに記載されているPasswordを入力します。

オープン認証[OAuth]

OAuth は、認証のために標準的に使われています。

OAuthは、認証情報を使用する代わりにアクセストークンを提供することで、クライアントアプリケーションに安全な委任型アクセスを提供します。

Authenticationを「OAuth2 User-Agent Flow」にします。

番号	名前	説明
1	App ID	アプリケーションを識別するIDです。
2	App Secret	アプリケーションの認証トークンを入力します。
3	Scope	スコープは、アプリがユーザーのアカウント情報にアクセスする量を定義します。これらは、コールで提供する必要があります。
4	Authentication goes in the header	アクセストークンをヘッダで提供する場合は、チェックボックスにチェックします。
5	Header Key/Token name	キーを提供する必要がある場合はチェックボックスをオンにします。
6	Token is returned as a query string	トークンをクエリ文字列として返すかどうかをチェックします。
7	Requesting an access token uses Basic Auth	APIドキュメントで、Basic認証によるアクセストークンリクエストを要求する場合に、チェックボックスをオンにします。
8	Login dialog redirect	ログイン・同意画面へ誘導するURLを入力します。
9	Access token endpoint	コードをアクセストークンに交換するために使用するURLを入力します。
10	User profile endpoint	現在のユーザのプロファイル情報を取得するために使用されるURLを入力します。
11	User ID key path	ユーザのプロファイル情報から “ID “の値を取得するためのキーです。
12	User email key path	ユーザのプロファイル情報から “email” の値を取得するためのキーです。