富士通のAIをThunkableから使ってみた（後編）

富士通のAIをThunkableから使ってみたの最終回です。

前回は、取得しておいた認証トークンを使って富士通のAIを Thunkable から呼び出すところまでを作りました。
今回は、後回しにした「認証」の部分を作りましょう。

富士通のAIとは（前回の再掲載）

今回、「Technovation Girls」の日本向け参加者に貸し出していただいている富士通のAIは、Takaneという日本語強化学習したLLMを実装している「富士通クラウドサービス Generative AI Platform」という PaaS になります。
Azure Active Directory にて認証系が実装されており、その他の特徴も含めて、企業ユースで安心安全につかえることが特徴です。

参考にするコード

認証トークンの取得は、公開されている PowerShell コードを使って取得しましたので、このコードを参考にしてThunkableに移植していきます。
github.com
上記を実行すると「$idToken」変数にトークンが格納されます。
この PowerShell コードを解読すると「認可リクエストを使って認可コード取得」「認可コードを使ってトークン取得」の 2Step に分かれていることが分かります。

画面作成

IDとパスワードの入力は認可リクエストで表示されるWeb画面で行うため、 Thunkable でログイン画面の作成は不要ですが、代わりに Web Viewer コンポーネントを張っておく必要があります。

あとは、[Get Token] ボタンとデバッグ表示も兼ねた Token_Label を張っておきましょう。

表示するトークンは長めの文字列なので、Token_Labelは、[Text Input] コンポーネントを使って、Editable と Multiline を次のように設定しておきます。

これで画面設定は終わりです。

認可リクエストを使って認可コード取得

「認可リクエストを使って認可コード取得」は、「Web Viewer」で認可リクエストURLを呼びだすことで次のように動作します。

自動的に EntraID のログイン画面にリダイレクトされる
ログインできるとリダイレクトされて、そこのURLに認可コードが入っている

ログイン画面の表示

「app variable $tenantName」「app variable $policy」「app variable $clientId」「app variable $redir」「app variable $scope」は接続情報として指定された値を予め設定しておく変数となります。

リダイレクト URL の工夫

PowerShell コードではリダイレクト URL として「localhost」を指定していますが、 Thunkable の「Web Viewer」コンポーネントで指定できないという制限があります。
そのため代わりなるリダイレクト URL を指定する必要があるのですが、好き勝手な URL を指定することはできません。
何かないかと探してみると、サンプルコードがのった GitHub で「Postman」を使ったサンプルがあり、その中で「コールバック URL: Postman が自動で設定する URL をそのまま使用します。」と記載を見つけました。
Postman のコールバック URL は「https://oauth.pstmn.io/v1/browser-callback/」になるので、これをリダイレクト URL として指定します（BASE64変換した結果を「app variable $redir」にいれておきます）。

URLが出来上がったら WebAPI コンポーネントの URL プロパティに設定すれば自動的にログイン画面が表示されます。

認可コードの取得

認可リクエストからログイン画面、認可コード付きURLと自動的に画面遷移していくので、「Web Viewer」コンポーネントの URL プロパティをチェックして、認可コードが指定された「https://oauth.pstmn.io/v1/browser-callback/?code=」を「app variable $redirectUri」に入れておいてチェックすることで移動することを待ちます。

その間も、随時「Token_Label」コンポーネントを書き換えて、どこにリダイレクトしたかが画面上で分かるようにします。時間がかかる処理なので処理が進んでいることもわかりやすくなりますし、デバッグにも利用できます。

認可コードを使ってトークン取得

「認可コードを使ってトークン取得」は、 POST リクエストで WebAPI を呼びだすので Thunkable でも作りやすい内容となります。
ここの部分は、「認可トークン」をパラメタに指定して呼びだすと「トークン」を返却してくれる関数として作ります。

呼び出すためのヘッダの設定

PowerShellコードの -H パラメタ部分の「"Content-Type: application/x-www-form-urlencoded" 」を Thunkable のブロックで表現すると次のようになります。

呼び出すためのボディの設定

PowerShellコードの -data パラメタ部分に設定している「$tokenForm」変数部分は「$tokenForm = "client_id=$clientId&grant_type=authorization_code&code=$code"」なので、この部分を Thunkable のブロックで表現すると次のようになります。

「$code」部分はパラメタとして渡された認可コードになりますので、「AuthCode」変数を指定しています。また、「app variable $clientId」は接続情報として指定された値を予め設定しておく変数となります。

呼び出すためのURLの設定

PowerShellコードのURL指定は「"https://$tenantName.b2clogin.com/$tenantName.onmicrosoft.com/$policy/oauth2/v2.0/token"」なので、 Thunkable のブロックで表現すると次のようになります。

「app variable $tenantName」「app variable $policy」は接続情報として指定された値を予め設定しておく変数となります。

呼び出しと返却値からのトークン取得

WebAPI コンポーネントはレスポンスコードを「Status」に格納してくれるので、「Status」が200であれば正常完了、それ以外はエラーとして返却値を作成します。

正常の場合は、JSONテキストとして「id_token」項目にトークンが取得されてくるので次のようにブロックを組み立てて取得します。