はじめに

コラボフローの申請画面上で、コラボフローAPIを呼び出したい！ってことよくありますよね？
しかし、API呼び出し方法によってはセッションが切れてログイン画面に戻される問題が発生します。
本記事ではその原因と回避策を解説します。

現在の申請画面

JavaScriptで個別にボタンを配置しています。
クリックするとコラボフローAPI（添付ファイルのダウンロード）を呼び出す仕組みです。

原因

しかし、API呼び出し後に申請や保存をしようとすると ログイン画面に遷移してしまいました。
調査の結果、認証方式に原因があることがわかりました。

コラボフローのAPIには 2種類の認証方式があります。

セッション認証（画面操作と同じセッションを利用）
APIキー認証（Basic認証）

申請画面で Basic認証を使用すると、画面側のセッションが無効化される仕様になっていました。
そのため、APIキー認証でファイル取得や処理を行うと、画面操作ができなくなるようです。

回避策

セッション認証を使う

APIキー認証を使わない → セッション認証でAPIを呼び出す
fetch() のオプションに credentials: 'include' を指定し、Cookieを送信
認証ヘッダー（X-Collaboflow-Authorization）は不要

例：セッション認証でファイル取得

const fileUrl = `${collaboflow.page.api_endpoint}/v1/files/${file_id}/download`;

const fileResponse = await fetch(fileUrl, {
  method: 'GET',
  credentials: 'include' // セッションCookieを送信
});

const blob = await fileResponse.blob();

NG例：Basic認証でファイル取得

const fileUrl = `${collaboflow.page.api_endpoint}/v1/files/${file_id}/download`;

const fileResponse = await fetch(fileUrl, {
  headers: {
    'X-Collaboflow-Authorization': `Basic ${btoa(userId + '/apikey:' + collaboApiKey)}`
  }
});

const blob = await fileResponse.blob();

※NG例のソースコードを使用してもAPIの実行は成功しますが、セッションが切れてしまうため要注意です

【余談】添付ファイルのファイルIDを画面上から取得する方法

上記のサンプルコードでは、ファイルダウンロードAPIを実行していますので、参考までにご紹介します。
APIを実行する際に必要となるファイルIDの取得方法については、こちらの記事に記載していますので、ぜひご確認ください。

さいごに

普段バッチプログラムばかり作っていたので、セッション認証が必要なことを完全に忘れていました…
同じようなハマり方をする人、あと添付ファイルのIDどうやって取得するんだ？って人が減ることを願ってこの記事を書きました。
ご参考になれば幸いです。