各製品の資料を入手。
詳細はこちら →製品をチェック
製品の詳細・30日間の無償トライアルはこちら
CData Connectのダウンロード
以下のダウンロードオプションからお選びください。
ノーコードアプリ開発プラットフォーム bubble でOkta にアクセス
CData Connect Server を使ってOkta のデータのOData API エンドポイントを作成して、bubble からOkta のデータを使ったアプリを作成する方法。
杉本和也リードエンジニア
最終更新日:2021-11-15
こんにちは!リードエンジニアの杉本です。
bubble はプログラミングを行わずにWebアプリケーションを開発できるクラウドサービスです。この記事では、CData Connect Server を経由して bubble からOkta に連携する方法を説明します。
CData Connect Server は、Okta のデータのクラウド to クラウドの仮想OData インターフェースを提供し、bubble からリアルタイムにOkta のデータへ連携することができます。
Okta の仮想OData API エンドポイントを作成
まずCData Connect Server でデータソースへの接続およびOData API エンドポイント作成を行います。
- CData Connect Server にログインして、Databases をクリックします。
- 利用できるデータソースアイコンから"Okta" を選択します。
-
Okta に接続するために必要なプロパティを入力します。
Okta に接続するには、Domain 接続文字列プロパティをお使いのOkta ドメインに設定します。
Okta への認証にはOAuth を使用するため、カスタムOAuth アプリケーションを作成する必要があります。
カスタムOAuth アプリケーションの作成
Okta アカウントから:
- 管理者アカウントでOkta のデベロッパーエディションにサインインします。
- Admin Consoleで、Applications > Applications に移動します。
- Create App Integration をクリックします。
- Sign-in method は、OIDC - OpenID Connect を選択します。
- Application type は、Web Application を選択します。
- カスタムアプリケーションの名前を入力します。
- Grant TypeをAuthorization Code に設定します。トークンを自動的に更新したい場合は、Refresh Token もチェックしてください。
- コールバックURL を設定します。
- デスクトップアプリケーションやヘッドレスマシンでは、http://localhost:33333 または任意の別のポート番号を使用します。ここで設定したURI が、CallbackURL プロパティになります。
- Web アプリケーションの場合、コールバックURL を信頼できるリダイレクトURL に設定します。このURL は、アプリケーションへのアクセスが許可されたことを示すトークンを伴ってユーザーが戻ってくるWeb 上の場所です。
- Assignments セクションで、Limit access to selected groups を選択してグループを追加するか、グループの割り当ては一旦スキップします。
- OAuth アプリケーションを保存します。
- アプリケーションのGeneral タブに、アプリケーションのClient Id とClient Secret が表示されます。後で使用できるように、これらを記録してください。Client Id はOAuthClientId の設定に使用し、Client Secret はOAuthClientSecret の設定に使用します。
- Assignments タブを確認し、アプリケーションにアクセスする必要のあるすべてのユーザーがアプリケーションに割り当てられていることを確かめます。
- Okta API Scopes タブで、OAuth アプリケーションに付与するスコープを選択します。これらのスコープは、アプリが読み取り可能なデータを決定します。そのため、特定のビューに対するスコープを付与しないと、そのビューに対するクエリを実行する権限がドライバーに付与されません。各ビューに必要なスコープを確認するには、ヘルプドキュメントのデータモデル > ビュー のビュー固有のページを参照してください。
- Test Database をクリックします。
- Permission -> Add をクリックして、新しいユーザーを追加し、適切な権限を指定します。
- API タブをクリックして OData API エンドポイントが生成されていることを確認します。
bubble API Connector の構成
それでは bubble側でCData Connect Server に連携するための API Connector を構成します。
- まず、bubble の Pluginsタブに移動して「Add Pluings」をクリックします。
- 一覧の中から「API Connector」を検索し、インストールしてください。
- インストール後、連携設定の画面が出てくるので、任意の名称を入力し、Header情報に「x-cdata-authtoken」と予め取得したCData Connect Server のTokenを設定します。
- 続いて、Oktaのエンドポイントを呼び出す定義を追加します。「GET」リクエストで、CData Connect Server で定義したAPIエンドポイントのURLを入力してください。
- 最後に「Initialize call」を行い、データ項目の型情報を調整します。
- 特に変更がなければデフォルトのままでOKです。以上で bubble から CData Connect Server への連携設定は完了です。






UIを構成する
それではbubble でOkta のデータを呼び出してみましょう。今回はExcel Likeなテーブルを表示できるUIコンポーネントでデータを呼び出してみます。
- Add Pluingsで「Excel-like HandsonTable」を追加します。
- あとは、このUIコンポーネントを配置して、CData Connect Server のPluginをバインドするだけでOKです。
- テーブルにバインドする配列要素はvalue 要素を指定してみてください。
- プレビュー画面に移動することで、Okta からデータを取得した一覧画面が確認できます。




このように、CData Connect Serverを経由することで、API 側の複雑な仕様を意識せずにAPI 連携をしたウェブアプリをbubble で開発できます。他にも多くのデータソースに対応するCData Connect Server の詳細をこちらからご覧ください。