「社内ポータル」や「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 攻撃とみなされ、拒否されてしまう
- POST リクエストが使えない
サンプルコードと 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 の送信を許可）
コードのポイント
ページサンプルの 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 以外のサイトに［マイタスク］等を表示させる方法について記載しました。
参考になれば、幸いです。