Zoom Appsについて

Zoom JapanのQiita記事にて、丁寧に紹介されていました。

本記事のモチベーション

Zoom Apps実装経緯としては、
1. 開発チームとしてFlutterベースでの開発が主流のため
2. Zoomを利活用するアプリの案件の中で、デフォルトのZoomクライアントアプリを利用したい、機能として画面を表示しながら開発アプリ上で操作を行いたいという要望がZoom Appsの利用ケースとマッチした
以上の点で、FlutterでZoom Appsを実装するという運びとなりました。

Zoom AppsはJavascriptベースでのSDKであり、Zoom Appsのアプリ画面はWebViewから特定のページを表示させる形で構成されるので、Flutter Webの限定対応という形で開発が始まりました。

開発していた中で、Flutter Web上でZoom Apps SDKを利用するのにつまづいたポイントがいくつかありましたので、備忘録的にそれらを書き記していこうとしたのが、本記事の主旨になります。

構成としては、以下の通りです。
Zoom Apps構成までに必要な要素は何か、Flutterでそれらを実装するにはどのようにするかを検討する事前準備編（当記事）
事前準備編の内容を踏まえて実際に実装を行う実装編（次回・・・もしかしたら2部構成になるかもしれません）
実際に作成したアプリを申請した際の備忘録の申請編

1.Zoom Appsをスタートアップできる環境を用意する

冒頭のZoom Apps紹介記事にて
Zoomクライアント内Webviewを経由した連携になるためWebサーバの用意が必要
とされています。

ということで、Flutter Web Appを外部公開できる環境を構築する必要があります。
アプリケーションをデプロイした場合はデプロイ先のURLとなりますが、開発中に毎回デプロイが発生するのは効率が悪い・・・
そこでローカル環境を外部公開するツールが必要になります。
色々探してみましたが、 Ngrok を使用するのがよさそうです。

Flutter Webでも利用されている記事もありました。Zoom Appsではないですが、リダイレクト処理によるアクセスが発生する=URLの外部公開が必須であるという点で共通しており、テスト的に動作を確認するのに便利なツールです。

2.OAuth認証用ステップをWebサーバに設定>>Flutter Web内で用意

OAuth認証自体の説明に関してはこちらを参考にしています。

Zoomでのアプリケーション認証では、
zoomの認証サーバ(https://zoom.us/oauth/authorize) をパラメータ付きで開く
OAuth認証ステップを実装する必要があります。

URLをWebブラウザで開くものとしては、Flutterではurl_launcherパッケージを使用するのがよさそうです。

また、OAuth2.0での拡張仕様であるPCKEもサポートされており、セキュリティを考慮するのであれば、こちらも利用することが望ましい。

PCKEも含めて実装したい場合は、pkceパッケージを使用するのがよさそうです。

3.クライアントがアプリを介してWebにアクセスする際にOWASPを設定する

クライアントからアクセスされた際に全てOWASP対応にする必要があるのでヘッダーに制限事項を明示する必要があるようです。

クライアントがアプリ経由でサイトにアクセスする際にWebサーバ側がヘッダー情報にOWASP情報を盛り込む必要がありますが、
OWASPヘッダーを簡単に作成できるhelmetというライブラリを利用するのが、漏れなく実装できそうです。

4.ZoomAppsSDKのJSライブラリをFlutter上で利用できるようにする

Zoom AppsのSDKはJavascriptのライブラリとして提供されています。

これをFlutter上で使えるようにする場合は、jsパッケージを使用するのがよさそうです。

使用するべきツール・ライブラリ・Flutterパッケージの検討に関しては以上になります。

次回からは、実際にこれらを使い、Flutter WebでZoom Appsを作成していきます。
(記事の根幹部分なので早めに更新をしていきたいですが、1ヶ月以上お待たせするかもしれません・・・🙏)