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

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

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

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

目次

\ ホワイトペーパー /
ローコード・ノーコード開発が理解できる資料集

【下記の4点の資料が無料でダウンロードできます】

  • 基礎知識の解説
  • 開発事例集
  • おすすめノーコードツール13選
  • ローコード・ノーコード開発会社比較

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

\ ホワイトペーパー /
ローコード・ノーコード開発が理解できる資料集

【下記の4点の資料が無料でダウンロードできます】

  • 基礎知識の解説
  • 開発事例集
  • おすすめノーコードツール13選
  • ローコード・ノーコード開発会社比較
  • URLをコピーしました!

この記事を書いた人

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

株式会社ファンリピート

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


目次
閉じる