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 OAuthhttps://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 に保存済み

トラブルシューティング

参考文献