ローコードアプリ開発プラットフォームRetool でPingOne 連携アプリを作成

CData Connect Server を使ってPingOne のデータの仮想OData API エンドポイントを作成して、Retool からPingOne のデータを使ったアプリを作成する方法。

杉本和也
リードエンジニア

最終更新日:2021-11-15

こんにちは!リードエンジニアの杉本です。

Retool はローコードでWebベースの業務アプリケーションを構築できるクラウドサービスです。この記事では、CData Connect Server を経由して Retool からPingOne に連携するアプリを作成する方法を説明します。

CData Connect Server は、PingOne のデータのクラウド to クラウドの仮想OData インターフェースを提供し、Retool からリアルタイムにPingOne のデータへ連携することができます。
Retool からPingOne にデータ連携。

PingOne の仮想OData API エンドポイントを作成

まずCData Connect Server でデータソースへの接続およびOData API エンドポイント作成を行います。

  1. CData Connect Server にログインして、Databases をクリックします。 データベースを追加
  2. 利用できるデータソースアイコンから"PingOne" を選択します。
  3. PingOne に接続するために必要なプロパティを入力します。

    PingOne に接続するには以下のプロパティを設定します。

    • Region:自身のPingOne 組織のデータがホスティングされている地域。
    • AuthScheme:PingOne に接続する際に使用する認証の種類。
    • WorkerAppEnvironmentId (デフォルトのPingOne ドメインを使用する場合に必要)、またはAuthorizationServerURL のいずれかで、下で説明するように設定します。

    WorkerAppEnvironmentId の設定

    WorkerAppEnvironmentId は、Worker アプリケーションが存在するPingOne 環境のID です。 このパラメータは、環境がデフォルトのPingOne ドメイン(auth.pingone)を利用している場合のみ使用されます。 これは、ヘルプドキュメントカスタムOAuth アプリケーションの作成で説明するように、PingOne への認証に使用するカスタムOAuth アプリケーションを作成した後に設定します。

    はじめに、このプロパティの値を見つけます。

    1. 自身のPingOne 組織のホームページからナビゲーションサイドバーに移動し、Environments をクリックします。
    2. OAuth / Worker のカスタムアプリケーションを作成した環境(通常はAdministrators)を見つけ、Manage Environment をクリックします。 環境のホームページが表示されます。
    3. 環境のホームページのナビゲーションサイドバーで、Applications をクリックします。
    4. リストから、OAuth またはWorker アプリケーションの詳細を見つけます。
    5. Environment ID フィールドの値をコピーします。 以下の例に似たものになるはずです:
      WorkerAppEnvironmentId='11e96fc7-aa4d-4a60-8196-9acf91424eca'

    次に、WorkerAppEnvironmentIdEnvironment ID フィールドの値に設定します。

    AuthorizationServerURL の設定

    AuthorizationServerURL は、お使いのアプリケーションが配置されている環境のPingOne 認可サーバーのベースURL です。 このプロパティは、PingOne プラットフォームAPI ドキュメントで説明されているように、環境にカスタムドメインを設定した場合にのみ使用されます。 Custom Domains を参照してください。

    OAuth でのPingOne への認証

    PingOne はOAuth とOAuthClient 認証の両方をサポートしています。 上述の設定手順に加え、OAuth またはOAuthCliet 認証をサポートするために、さらに2つの手順を完了する必要があります。

    • ヘルプドキュメントカスタムOAuth アプリケーションの作成で説明するように、カスタムOAuth アプリケーションを作成して設定します。
    • ドライバーがデータモデル内のエンティティにアクセスできるようにするには、ヘルプドキュメントのAdministrator Roles での説明のとおり、使用するアドミンユーザー / ワーカーアプリケーションに対して正しいロールを設定していることを確認してください。
    • 以下のサブセクションで説明されているように、選択した認証スキームと認証フローに適切なプロパティを設定します。

    OAuth(認可コードグラント)

    AuthSchemeOAuth に設定します。

    デスクトップアプリケーション

    OAuth アクセストークンの取得およびリフレッシュ

    以下を設定して、接続してください。

    • InitiateOAuthGETANDREFRESH。繰り返しOAuth の交換を行ったり、手動でOAuthAccessToken を設定する必要をなくすには、InitiateOAuth を使用します。
    • OAuthClientId:カスタムOAuth アプリケーションを作成した際に取得したClient ID。
    • OAuthClientSecret:カスタムOAuth アプリケーションを作成した際に取得したClient Secret。
    • CallbackURL:カスタムOAuth アプリケーションの登録時に定義したリダイレクトURI。例:https://localhost:3333

    接続すると、本製品 はデフォルトブラウザでPingOne のOAuth エンドポイントを開きます。ログインして、アプリケーションにアクセス許可を与えます。 ドライバーはこれでOAuth プロセスを完了します。

    1. ドライバーはPingOne からアクセストークンを取得し、それを使ってデータをリクエストします。
    2. OAuth 値はOAuthSettingsLocation で指定された場所に保存され、接続間で永続化されるようにします。

    ドライバーはアクセストークンの期限が切れると自動的にリフレッシュします。

    Web アプリケーションやヘッドレスマシン、クライアントクレデンシャルグラントを含むその他のOAuth メソッドについては、ヘルプドキュメントを参照してください。

    接続を設定
  4. Test Database をクリックします。
  5. Permission -> Add をクリックして、新しいユーザーを追加し、適切な権限を指定します。
  6. API タブをクリックして OData API エンドポイントが生成されていることを確認します。

Resource の登録

続いてRetool 側の手順を進めていきます。Retool ではまず、構成したAPI にアクセスするためのリソース情報を登録します。

  1. Retool にログインし、「Resouces」から「Create new」をクリックします。
  2. 接続できるサービスの一覧が表示されるので「REST API」を選択します。
  3. REST APIの設定画面では以下の通り必要な情報を入力します。Base URLには事前に作成したAPI のリソースエンドポイントを指定します。Headers には生成したユーザーの認証トークンを「x-cdata-authtoken」ヘッダーとして指定します。
  4. リソースを作成後、アプリの作成確認ダイアログが出てくるので、今回はこれで作成してしまいます。(もちろんテンプレートなどを使っても構いません。)
  5. 任意の名称を指定してください。

一覧画面の作成

リソースの登録が完了したら一覧画面を作成しましょう。

  1. まず、先程登録したAPIのコネクションを使って、データを取得するための「Query」を定義します。すでに登録されているQueryの名前を変更し内部のAPIを定義を調整します。
  2. デフォルトで Action Type、つまりAPIリクエストのメソッドが「GET」なので、このままでもデータは取得できます。ただ、初期状態ではすべての項目を取得してしまうので、API Serverがサポートするクエリパラメータを使って、取得項目やフィルター条件等を指定します。
  3. URL parmeters を記述したら、設定を保存して実行してみましょう。以下のようにデータが取得できればOKです。
  4. あとはこのデータを画面に表示するための「Table」UIコンポーネントを画面に配置します。
  5. デフォルトえはJSON形式のサンプルデータが表示されているので、これを変更します。
  6. 先程のクエリ名と対象のオブジェクト名を「{{QueryName.data.value}}」といった形で指定するだけでOKです。これだけで簡単に一覧画面が構成できました。
  7. 作成した画面はプレビューモードで動作確認できます。

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

トライアル・お問い合わせ

30日間無償トライアルで、CData のリアルタイムデータ連携をフルにお試しいただけます。記事や製品についてのご質問があればお気軽にお問い合わせください。