「社内ポータル」や「Questetra 以外の Web サービス」の画面に、「マイタスク等を表示させたい」という要求があります。「業務中、主に見ているのは Questetra ではない別サイトの画面であるが、その画面上で Questetra の状況も確認できたらマイタスクを処理するのも忘れにくいね。」というような話です。

これを実現するひとつの方法は、次の通りです。
(他の実現方法は、この方法よりも面倒な方法となります。)

  • クロスサイト AJAX リクエストを使って、Questetra の情報を取得し、ページに埋め込む
  • Questetra 側は CORS 設定で、クロスサイト AJAX リクエストを許可する

この記事は、Questetra での CORS(Cross-Origin Resource Sharing: クロスオリジンリソース共有)の利用例になります。
(CORS の詳細については、MDN のページ 等で学習してください。)

認証方法

AJAX リクエストで Questetra にアクセスする際、どのような認証方法を利用するのかがポイントになります。Questetra API へのアクセスは、

  • Basic 認証
  • OAuth2

が基本となります(M317: 外部からの OAuth2 認可アクセスや Basic 認証アクセスを制御する)。ただ、CORS においては「別タブで Questetra へログインさせて、その Cookie 認証を利用する」という方法が簡単な認証方法となります。

  • メリット
    • 実装がシンプル
    • ブラウザで Questetra にログインしているという前提に立つので、Questetra のページへの遷移がシームレスにできる
  • デメリット
    • POST リクエストが使えない
      • Cookie 認証とクロスサイト POST リクエストの組み合わせは、Questetra に CSRF 攻撃とみなされ、拒否されてしまう

サンプルコードと CORS 設定

Questetra 外部のサイトに配置するページサンプル(HTML)は次の通りです。(コードは、GitHub でも公開されています。)

<html>
  <body>
    <div id="authorized">
      <h3>マイタスク</h3>
      <ul id="allocated">
      </ul>

      <h3>引き受け待ち</h3>
      <ul id="offered">
      </ul>
    </div>
    
    <div id="unauthorized" style="display: none;">
      <div>以下よりログインした後、ページを再更新してください。</div>
      <a target="_blank" href="https://online-demo-ja.questetra.net/Login_show">ログインページ</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      jQuery(document).ready(() => {
        const loadTasks = (selector, reportId) => {
          const tasks = jQuery(selector).empty();
          fetch(`https://online-demo-ja.questetra.net/API/OR/Workitem/list?reportId=${reportId}&limit=20`, {
            credentials: 'include'
          })
            .then(response => {
              if(!response.ok) {
                jQuery('#unauthorized').show();
                jQuery('#authorized').hide();
                return Promise.reject('error');
              }
              return response.json();
            })
            .then(({count, workitems}) => {
              workitems.forEach(workitem => {
                const link = jQuery('<a>');
                link.append(`${workitem.processModelInfoName} : ${workitem.processInstanceTitle}`);
                link.attr('href', `https://online-demo-ja.questetra.net/OR/ProcessInstance/view?processInstanceId=${workitem.processInstanceId}&workitemId=${workitem.id}`);
                jQuery('<li>').append(link).appendTo(tasks);
              });
            });
        };

        loadTasks('#allocated', 'ALLOCATED');
        loadTasks('#offered', 'OFFERED');
      });
    </script>
  </body>
</html>

クイックデモ基盤( https://online-demo-ja.questetra.net/ )の[マイタスク]と[引き受け待ち]のうち、それぞれ先頭 20 件を表示します。

https://questetra.github.io/cors/index-ja.html にアクセスいただくと、実際の動作を確認できます。
(SouthPole@questetra.com / ssssssss でログイン後、上記URLに再アクセス)
(もしくは、https://questetra.com/ja/features/demo/ より、日本語@JAPAN の基盤にログイン後、上記 URL にアクセス)

ワークフロー基盤側( https://online-demo-ja.questetra.net/ )では、次の CORS 設定を行っています。
[システム設定]>[CORS]にて、

  • CORS を有効
  • クロスオリジン通信許可するオリジン: https://questetra.github.io を追加
  • GET メソッドを許可
  • 認証情報の送信を許可(Cookie の送信を許可)
CORS 設定画面

コードのポイント

ページサンプルの HTML コードについて説明します。HTML / Script 合わせて、50 行程度のシンプルなコードです。

スクリプトのポイントは次の通りです。

          fetch(`https://online-demo-ja.questetra.net/API/OR/Workitem/list?reportId=${reportId}&limit=20`, {
            credentials: 'include'
          })

credentials: ‘include’ で、クロスサイトリクエストで Cookie 送信を許可しています。 これがないと、AJAX では Cookie を送信しません。

            .then(response => {
              if(!response.ok) {
                jQuery('#unauthorized').show();
                jQuery('#authorized').hide();
                return Promise.reject('error');
              }
              return response.json();
            })

response.ok でない場合、「ログインを促す表示(ログインページへのリンクを表示しているだけ)」に変えています。
認証エラー以外の場合も考えられますが、その辺りの処理は今回は無視しています。


実際にお試しいただく場合は、ご利用のワークフロー基盤に合わせて、コードを改変いただく必要がございます。
また、取得するデータ件数や画面デザイン、案件クリック時に別タブで開くようにする、といった点については、お好みに合わせてアレンジしていただければと思います。

本記事では、ワークフロー基盤で CORS 設定を行い、Questetra 以外のサイトに[マイタスク]等を表示させる方法について記載しました。
参考になれば、幸いです。

%d人のブロガーが「いいね」をつけました。