3-Legged OAuth で A360 データを表示するサンプル

Forge を包括的に習得いただける Tutorial ページに、Learn Autodesk Forge があります。この中に、3-Legged OAuth を利用して A360 などのオートデスク ストレージにアクセスし、ストレージ内に保存されているデザイン データを表示する learn.forge.viewhubmodels サンプルがあります。ちょうど、Postman による Viewer 利用手順の理解 – 3 legged 認証 に相当する内容を Forge SDK を使ってトレースすることになります。ここでは、Windows で learn.forge.viewhubmodels サンプルをローカル Node.js 開発環境にクローンし、セットアップ、テストしていく手順をご案内します。

リポジトリの内容からローカルでテストするには、事前に Git for Windows や Node.js をセットアップしておく必要があります。また、実行時には Forge で利用する Client ID と Client Secret（Consumer Key と Consumer Secret）を事前に Forge ポータル から取得しておく必要があります。これらの手順は、それぞれ、次のブログ記事でご案内しています。

Forge の開発環境

Forge API を利用するアプリの登録とキーの取得

※ このサンプルをローカル環境で実行するには、Forge ポータルでのアプリ作成時に、あらかじめ  CallBack URL に http://localhost:3000/api/forge/callback/oauth を設定しておく必要があります。

1. Web ブラウザで GitHub 上の learn.forge.viewhubmodels リポジトリ ページを開きます。
2. 画面右側の [Clone or download] ボタンをクリックして、表示される URL https://github.com/Autodesk-Forge/learn.forge.viewhubmodels.git をクリップボードにコピーしておきます。
   
3. GitHub 上のプロジェクトを 、リポジトリから開発に使用するクライアント コンピュータにコピーします。コマンド プロンプトを起動して、リポジトリ内容をコピーしたいフォルダ（ディレクトリ）に CD コマンドで移動し、git clone -b nodejs https://github.com/Autodesk-Forge/learn.forge.viewhubmodels.git （クリップボード内の URL）と入力します。例えば、C:Users<Windows ログイン ユーザ名>DocumentsGitHub フォルダに移動して git clone -b nodejs https://github.com/Autodesk-Forge/learn.forge.viewhubmodels.git を実行すると、C:Users<Windows ログイン ユーザ名>DocumentsGitHub フォルダ下に  learn.forge.viewhubmodels フォルダが作成され、GitHub リポジトリからソースコードがコピーされます。
   
4. クローン（コピー）されたプロジェクトに Node.js の実行で必要となるパッケージ（ミドルウェア）をインストールします。CD コマンドで現在のフォルダを learn.forge.viewhubmodels フォルダへ移動してから、npm install と入力します。
   
5. このサンプルでは、実行時にシステム環境変数から Client ID と Client Secret、CallBack URL を取得します。コマンド プロンプト上で SET コマンドを使って、環境変数を指定します。上記、※ で作成したアプリから Client ID、Client Secret、CallBack URL を読み取り、それぞれ、システム環境変数、FORGE_CLIENT_ID、FORGE_CLIENT_SECRET、FORGE_CALLBACK_URL を設定します。クリップボードとメモ帳などを利用してコピー＆ペーストしながら SET コマンドを実行してみてください。
   

   set FORGE_CLIENT_ID=<<YOUR CLIENT ID FROM DEVELOPER PORTAL>>
   set FORGE_CLIENT_SECRET=<<YOUR CLIENT SECRET>>
   set FORGE_CALLBACK_URL=<<YOUR CALLBACK URL>>

   
6. ここまでの手順で実行の準備は完了です。カレント フォルダが learn.forge.viewhubmodels フォルダであることを確認したら、npm start と入力、リターンキーを押して Node.js サーバーを起動します。
   
7. Web ブラウザを起動して、URL の localhost:3000 と入力してリターンすると、ページ左側に [Autodesk Sign In] ボタンが表示されるはずです。
   
8. [Autodesk Sign In] ボタンをクリックして、アクセスしたい A360 ストレージのオーナーの Autodesk ID（ユーザ名とパスワード）でサインインを試みます。このページを表示している Forge アプリは、本来。当該オーナーの A360 ストレージにはアクセス出来ないことに注意してください。このため、ユーザ名、パスワードを入力してサインインが完了すると、Forge アプリのストレージ アクセスを許可（認可）するか、サインインしたオーナーに確認するための画面を表示します。
   
   ここで表示されるアクセス権の種別（データ書き込みや表示など）は、Forge アプリが Access Token を取得する処理で指定した Scope の内容が反映されたものとなります。 [許可] をクリックすると、A360 ストレージ データのオーナーが Forge アプリにアクセス許可を与えることになります。
9. Hub >> Project >> Folder >> Item >> Version の順で当該 A360 のストレージ構造をナビゲートし、任意の Version をクリックすると、デザイン（モデル）が Viewer 領域に表示されます。
   
   もちろん、A360 内でナビゲートした内容と同じ構造で、同じデザイン バージョンを表示出来ているはずです。
   
   A360 側で一度表示したデザイン データは、既に SVF 変換されていて、マニフェストを取得出来る点に注意してください。つまり、Forge アプリ側で Model Derivative API を使った明示的な SVF 変換は不要です。

BIM 360 Docs ストレージにも同様の 3-Legged OAuth を介して取得した Access Token を使って Data Management API でアクセスすることが出きます。ただし、そのような BIM 360 統合アプリには、事前に BIM 360 側でストレージにアクセスすることになる Forge アプリの Client ID を登録する必要があります。詳しくは、過去のブログ記事 BIM 360 Docs と Data Management API アクセス をご参照ください。

By Toshiaki Isezaki