ファンリピート社のブログFR note

BubbleでOAuth2.0アクセストークンを取得する方法

こんにちは、ファンリピートの徳丸です。

今回は、Bubbleでアクセストークンを取得する方法を紹介していきます。

目次
「システムを短納期かつ低予算で作成したい」
ローコード開発に興味がある

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連携が実現します。

「システムを短納期かつ低予算で作成したい」
ローコード開発に興味がある
「煩雑なExcel管理から脱したい」
慣れ親しんだシステムを使って効率化したい
「大規模なシステム開発を行うためにPoCを行いたい」
「社内のDXを進めていきたい」
  • URLをコピーしました!

この記事を書いた人

株式会社ファンリピートのアバター

株式会社ファンリピート

FRnoteは株式会社ファンリピートのメンバーによって運営されている社内ブログです。ノーコード・ローコードの技術ブログを始めとして、最新のIT技術、業務で役立つノウハウなど様々なトピックをまとめています。


目次
閉じる