こんにちは、ファンリピートの徳丸です。
今回は、Bubbleでアクセストークンを取得する方法を紹介していきます。
＼ 年末までに限った無料特典 ／
貴社のシステム開発・アプリ開発を爆速で進めるための
【毎月先着２社限定】デモアプリ構築・無料依頼フォーム
【当社では、こんなデモアプリがすぐに作れます】
- 貴社で「まずつくってみたい」試作品アプリの構築を毎月先着２社限定で無料で承っております
- 社内の管理システムからtoB, toCのWebサービスまで幅広くご支援可能です
- ご興味のある方は下記のフォームよりお申し込みください
bubbleとは？
URL:https://bubble.io/blog/content/images/2020/09/Logo-with-clearspace.png
・コードを書かずにアプリを作ることができる
一般的なWebサービスやWebアプリの開発では、プログラミングコードを書くといったイメージがありますが、ノーコードツールBubbleでは名前の通り、ノーコードで開発できるサービスとなっています。また、クラウドプラットフォームというサイト上でアプリケーションを構築することができるので、インターネットがあればいつでもどこでもアクセスすることができるため、チームで連携してアプリを作ることができます。
OAuth認証とは？
詳しい説明は割愛しますが、OAuth認証とはゲスト用の入門許可証のようなものです。
この認証手順を用いることで、自分の情報を直接共有することなく、第三者サービスに限定的にアクセスすることが可能になります。
今回は、その中でも特にバックエンド同士で通信する際に行う「Client Credentials Grant」という認証フローに焦点を当て、これを実現するための方法について紹介していきます。
Auth0の設定
今回は認可サーバーとして、アクセストークンの管理等が容易なAuth0を使用していきます。
Auth0の左サイドバーのApplicationsから、Create Applicationで認可サーバー用のアプリケーションを作成していきます。
application typeは「Machine to Machine Applications」を選択します。
これで、ひとまず認可サーバーの設定は完了です。
bubbleの設定
プラグインのインストール
APIの呼び出しを行う為、「API Connector」プラグインをインストールします。
APIの設定
「Add another API」を押下し、作成されたAPI入力画面の「Import another call from cURL」を押下します。
ここで、一度先程作成したAuth0のアプリケーションへと戻ります。
アプリケーションのQuickstartにある「Getting an access token for your API」下部のコマンドを全てコピーし、bubbleの画面に表示されている「Import From cURL」にペーストして「Import」を押下します。
「Reinitialize call」を押下した際に下記のような表示が出たら、無事APIの設定は完了です。
textで下図のように設定すれば、アクセストークンを取得できている事が確認出来ます。
第三者サービスとAPI連携を行う際、アクセストークンを上記のように設定することで、より安全な通信が可能となります。
まとめ
今回は、Bubbleから第三者サービスにアクセスする際に認可サーバーからアクセストークンを取得する方法について、紹介していきいました。
これにより、より高い安全性を持ったAPI連携が実現します。
