Skip to content

Zoom 連携 ​

背景 ​

mtg録画を Quden で管理したい場合、毎回ダウンロードして Quden にアップロードするのは面倒なので自動でインポートされるようにしたい

システム概要 ​

Zoom OAuth App を使うことで、Zoom アカウントと Quden アカウントの連携、Zoom Cloud Recording 録画完了時に Quden Backend Server への Webhook event 送信を行なっている

システムアーキテクチャ ​

Zoom App との認証 ​

Zoom App認証フロー

  1. ユーザー設定画面のZoom連携設定で「連携」ボタンを押すと、Zoom アカウントと Quden Zoom OAuth App の連携を許可する画面にリダイレクトされる
  2. ユーザーが連携許可すると、指定した Quden のページ (/zoom-connect) にリダイレクト
  3. リダイレクトされた URL のパラメータに auth code がついてくるので、それをもとに access token / refresh token などを Zoom API から取得
  4. 取得した token をもとに zoom のアカウント情報を Zoom API から取得
  5. 取得したZoomアカウント情報や token などを mongo の user doc に保存

Zoom Cloud Recording ​

Zoom Cloud Recordingインポートフロー

  1. cloud recording の準備が完了したら、/items/events/zoom/record-complete にリクエストが飛んでくる
  • この Webhook の設定は、Quden Zoom App の Event Subscription で行なっている
  1. Mongo DB で item doc の作成
  2. 動画のダウンロードを行う Lambda function を起動
  3. Lambda function 上で動画をダウンロード & S3 に保存
  4. 終わったことを Backend に通知
  5. item doc の更新
  6. (ダウンロード後に Zoom Cloud Recording を削除するオプションを ON にしている場合)、zoom cloud recording の録画をゴミ箱に
  7. ユーザーに動画インポート完了通知

Zoom App との連携解除 ​

Zoom App連携解除フロー

連携解除をする場合、Quden のユーザー設定画面から行う方法と、zoom market place から行う方法の2種類ある

  • Quden のユーザー設定画面から行う場合
    1. Quden の設定画面から連携解除
    2. user doc の zoom 連携 ON/OFF フラグを false に
    3. Zoom API 経由で、Zoom アカウントと Quden Zoom App の連携を解除
    4. Zoom から Backend に Deauthorize Event が送られる
    5. user doc から zoom 関連の情報( token など )を削除
  • market place から行う場合
    1. market place から連携解除
    2. Zoom から Backend に Deauthorize Event が送られる
    3. user doc から zoom 関連の情報( token など )を削除

※ zoom からの Webhook を受け取っているエンドポイントでは、secret token を使って、リクエストを検証している

開発環境の設定 ​

環境変数の設定 ​

bitwarden に Zoom 周りの認証情報を含んだ backend/.env.development.local が保存されているのでそちらを設定

Quden Zoom OAuth Appの設定 ​

以下の設定は Quden Zoom OAuth App の編集画面から変更できます。

変更は自動保存されます。 production 用のアプリに変更を反映する場合は、Submit をして Zoom の審査に通る必要があります。( Chrome 拡張と同様)

  • Record Complete event が ngrok に来るように設定
    • Feature -> Event Subscriptions -> complete zoom recording の Event notification endpoint URL [development] に https://ngrok-api.dev.quden.io/items/events/zoom/record-complete を設定
  • 連携時のリダイレクトURL設定
    • App Credentials -> App Credentials Development の Redirect URL for OAuth を https://local.dev.quden.io:3000/zoom-connect に変更
  • OAuth Allow List に local ドメインを一時的に追加
    • App credentials -> OAuth Allow List -> Add Allow List に https://local.dev.quden.io:3000/zoom-connect を追加

ngrokの起動 ​

Record Complete Event を受け取るために、backend で yarn ngrok をして ngrokを起動

デプロイメントプロセス ​

Backend / Frontend / Lambda function は通常のデプロイフローと同様なので省略


Quden Zoom App に変更を加える場合、審査に出して承認してもらう必要がある。 詳しくは Submission Checklist を参照

審査の際 Zoom 側の審査担当者が動作確認を行うことがあるので、Quden のテスト用のアカウントを発行している。

email: test+zoom@toruca.com パスワードは bitwarden に保存済み

トラブルシューティング ​

参考文献 ​