Claris FileMaker Cloud 2.19 Data API に必要な Claris ID token を取得する

Claris FileMaker Cloud 2.19 とは

2020年5月より日本でも開始された、クラウドサービスです。
サービスとしては基本的に FileMaker ファイルをホスティングするものですが、
従来までの Claris FileMaker Cloud for AWS (通称 Cloud 1.x)と違い、
かなり高セキュアにユーザーアカウントやライセンスの管理が行えるようになっています。

この詳細はまた別途投稿したいと思います。

Claris FileMaker Data API とは

RESTful な Web API 経由で FileMaker のレコードの CRUD やスクリプト実行ができます。
利用する流れは一般的な Web APIのとかわりなくおおまかには次の通りです。

1. Claris FileMaker Data API へアカウントとパスワードを含めてリクエストし、access token を取得する
2. レコードのCRUDやスクリプト実行を access token とセットにしてリクエストする
3. access token をすぐ使わないなら削除する

ところが、Claris FileMaker Cloud 2.19 については、手順1.のaccess token を取得するには、
Claris ID を包括的に管理している Amazon Cognito から取得した ID token を使用しなければなりません。
つまり Claris FileMaker Cloud 2.19 における手順1. の流れは次のように変わります。

1. Amazon Cognito へアカウントとパスワードを含めてリクエストし、ID token を取得する
2. Claris FileMaker Data API へ ID token を Claris ID トークン として使いリクエストし、access token を取得する
3. （これ以降は同様）

Amazon Cognito とは

Amazon Web Service (AWS)の1つのサービスです。
ユーザーアカウント、パスワードを統括的に管理し、包括的な認証機能が提供されます。
AWSに限らずさまざまなアプリケーションで使うユーザー認証機能として Amazon Cognito を使用すれば、access tokenなどの管理やSAML連携などもアプリケーション側で作成する必要がなくなり、開発に集中できるといったものです。

Claris Connect や Claris FileMaker Cloud 2.19 で使用する Claris IDはこの Amazon Cognito で管理されているようです。

どこにこの情報は書いてあるのか

Claris FileMaker 19 Data API ガイド

まずはこのガイドが基本になると思います。
Data API のaccess tokenを取得するには
Claris ID アカウントを使用したデータベースセッションへのログイン
を参照してください。
ただし、

と書いてあるのでリンク先のClaris Customer Console ヘルプに進みます。

Claris Customer Console ヘルプ

Claris ID は Claris のサービス全般に共通したアカウントになります。
Claris ID トークン を取得するには、
外部認証での Claris ID の使用 に進みます。

Claris ID を使用して認証するには:

1. UserPoolId および ClientId のパラメータの値を取得します

これは記載してある URL を開けばすぐ取得できます。
この内容に記載してあるパラメータが Claris ID を管理している番地なんだと思いますので、
この結果はそう頻繁に変わるものではないと思います。

UserPoolId および ClientId のパラメータの値の取得のためにアクセスするアドレスについて、
インターネット上には古い情報が結構Google検索上位に残っていて、
2.2.0.my.claris.com.json ではなく、0.0.0 だったり、 my.filemaker.com.json だったりするので、
間違わないようにしてください。

そして次の 2. にコードの例: と書いてある25行のJavaScript にもうこの値を取得した結果が埋め込まれていますので、
この手順は今後エラーが発生したときに変更がないか確認する程度で良いのかもしれません。

2. Amazon Cognito でユーザを認証するにはAmazon Cognito Identity SDK for JavaScript を使用します

Amazon Cognito Identity SDK for JavaScript を参照してください。と、リンク付きで記載されています。

要は リンク先の Amazon Cognito Identity SDK for JavaScript を読み込ませたあとに、
コードの例: と書いてある25行のJavaScriptを実行するだけで取得できます。

とはいえ取得までにいくつかの落とし穴があるので本投稿がお役に立てるのではないかと。

Amazon Cognito Identity SDK for JavaScript

Amazon Cognito Identity SDK for JavaScript に書いてあるとおり進めればできるはずなんですが、
みなさん得意のw 英語のみです。

Setup を読み進めると、

npm使ってSDKを読み込ませろ、ということになります。
「いやいやそんな面倒なこと抜きにして、SDKファイルダウンロードさせてくれよ」と思うのは私だけではないと思います。
そして、次のように記載されていました。

githubからダウンロードできるファイルは削除した。npmでダウンロードしてその中のファイルを使え。とのこと。

Install using separate JavaScript file を読み進めると、

npmからamazon-cognito-identity-jsパッケージをダウンロードし、
distフォルダからamazon-cognito-identity.min.jsファイルを取り出してそれを使えということです。

なんか面倒そうだからと、Amazon Cognito 開発者用リソース などに同じ名前のSDKがあるので、
それをブラウザからダウンロードして使おうと考えましたが、
動作させることはできませんでした。（私はこれで大ハマリ）
おとなしく npm でダウンロードしましょう。

Using NPM and Webpack を読み進めると、

npmの実行コマンドが書いてあります。
npm が実行できない場合は先に node.js のサイトからインストーラーをダウンロードしてからインストールしてください。

ターミナルやコマンドプロンプトから、
npm install --save-dev webpack-cli
を入力してEnterキーで実行、
npm install --save amazon-cognito-identity-js

を入力してEnterキーで実行します。
node_modulesフォルダーに「amazon-cognito-identity-js」 フォルダーができ、
amazon-cognito-identity-js/dist/ の中に amazon-cognito-identity.min.js ファイルが見つかると思います。
今回はこれを使用します。

コードの例:

<scrip>タグで amazon-cognito-identity.min.js を読み込ませます。
そこまで大きなサイズではないので、amazon-cognito-identity.min.js の中身を
<script> </script>の中にコピペして使用するとよいでしょう。

そして、外部認証での Claris ID の使用 にコードの例: と書いてある、
25行の JavaScript を実行することでID Token が取得できます。

‘&lt;ユーザ名&gt;’  は ‘******@kotovuki.co.jp’ のように、
Claris IDなので メールアドレスをシングルクォートまたはダブルクォートで指定します。

Password : ‘&lt;パスワード&gt;’,  は ‘Claris IDのパスワード’ のように、
Claris IDのパスワードをシングルクォートまたはダブルクォートで指定します。

例ではこの行の最後にカンマが入っています。
このままでも動作しますが、構文的には不要ですね。

HTMLサンプル

UserPoolId や ClientId は誰がやっても同じだと思うのでハードコードしたとして、
Claris ID の2箇所、Claris IDのパスワード の1箇所を変更すれば大丈夫です。
またClaris FileMaker 19 の Webビューアを使う場合用に FileMaker.PerformScript() を入れてます。
使用する場合は スクリプト名 を適宜変更して下さい。

HTMLサンプル  refreshToken から IdToken を取得する

IdToken は1時間で期限切れになります。
refreshToken は1年間の期限になります。
再度IdTokenを取得する場合に上記のHTMLで新規にIdTokenを取得しても可能ですが、
一般的には発行されたrefreshToken から IdToken を取得します。
Claris ID 、refreshToken文字列 、スクリプト名 を適宜変更してください。

Internet Explorer 11 および FileMaker Pro Windows版では polyfill が必要

amazon-cognito-identity.js の記述方法は Internet Explorer 11 では動作しない、最新の記述方法になっています。
そのままではInternet Explorer 11 および FileMaker Pro Windows版 では動作しないため、
次の読み込みを追加することで動作させています。( fetch と assign を変換できるようにpolyfillを読み込みます)

<script src=”https://polyfill.io/v3/polyfill.min.js?features=fetch%2CObject.assign”></script>

FileMaker Webビューアで amazon-cognito-identity.js を使うときの注意点

SDKでは取得したaccess token , ID token , refresh token などの秘匿情報をブラウザの localStorage に記録しています。本来はWebアプリというか、https://で接続するhtmlページで使用するものなので、localStorage に記録しておくのが安全で楽なので、SDKはそこまで自動的にやってくれているんだと思います。

Claris FileMaker Webビューアを使用する場合でも localStorage が使えますので記録されます。
Claris FileMaker Webビューアでは data:text/html を使うのがベストプラクティスとされており、新バージョン Claris FileMaker 19では CORS 制限を回避するようにdataスキームをBlobスキームに変換するなど上手にやってくれます。
ということで問題になるのは、Webビューアで data:text/html を使った場合、上記の仕組みによって CORS 制限がかからないために、同じマシンのClaris FileMaker Proクライアント や同じマシンの同じWebDirectクライアント が別のスクリプトや別のファイルからでも localStorage に記録した秘匿情報へアクセス可能になってしまいます。

おそらくFileMakerユーザーなら FileMaker.PerformScript()などを使うことにより、秘匿情報はFileMaker レコードへかんたんに記録できていると思われます。
ですので localStorage への記録は意味がないばかりか秘匿情報の漏洩の可能性を生んでしまうので、amazon-cognito-identity.js 内の localStorage へ書き込みしている箇所を throw させるか、処理後に localStorage.remove() で削除しておくと良いと思います。

【 開発者募集中 】
弊社では FileMaker を使った高度な技術力で、モバイルデバイスのビジネス利用を楽しく発展させていく仲間を随時募集しています。詳しくは採用ページをご覧ください。