ソーシャルVR「HubsCloud」のカスタマイズ紹介。 Hubsの特定の部屋への入室を、 別WEBサイトの特定ページからのみ可能にする制限を設ける方法を解説。

1. Hubsカスタマイズ
別WEBサイトとの
ログイン連携による入室制限
Hironori(@hironori_yan)
デジタル・スタンダード

2. 自己紹介
Hironori(@hironori_yan) ← Twitter
・職業：大阪のソフト開発会社のプログラマー
・仕事でやっていること：
スマホアプリ、Windowsアプリケーション開発など
・今回ははじめての登壇！！
アイデアのみで登壇ボタンをクリック（๑✧∀✧๑）☀
登壇日迄にものを作り上げにいくスタイルでやってみた

3. そもそもHubsって何よ？
Mozillaが公開しているオープンソース(https://github.com/mozilla/hubs)
で公開しているソーシャルVR。
特徴は
・圧倒的手軽さ。ブラウザ上で動く！
・URLリンクのみで入室出来る！
・VR端末、PC、スマホでも使える

4. 2020-07-15 VRSionUp!7 "Hubs Study"
Hubs Cloud研究-公開リポジトリを中心に（akihiko.shirai）より抜粋
（https://www.slideshare.net/vrstudiolab/hubs-cloud-236930572）
クライアント
バックエンド

5. @yukihiko_a
Hubsでラクラク決済
2020/10/23
対象のオブジェクトを
叩くと、
Hubs内で決済が
出来る
過去の開発： Hubs（フロント側）の改造によるECサイト化

6. 今回やったこと
他サイトとログイン連携を
Hubsのバックエンドを担っているReticulumを拡張し、
別WEBサイトはほぼ触らずに実現することを試みた

7. 動作確認動画↓↓
https://drive.google.com/file/d/1J6Tse3t99-Ek0v229ZRs7Q5PdziIg7WQ
/view?usp=sharing
サンプル：別WEBサイト↓
https://testhubs.z31.web.core.windows.net/
サンプル：Hubsサイト↓
https://your-rooms.com/ ⇒ https://ds-rooms.com に統合しました
結果、、、、出来ました！

8. 動作確認キャプチャ①：会場とは違う普通の部屋
ホーム画面から
入室できる

9. 動作確認キャプチャ②：ホームからイベント会場
HOME画面から
「Premium Live 2020」を押下
しても
認証失敗追い出される

10. 動作確認キャプチャ③：別サイトからの入室
入室出来た！

11. 対象の静的ページに必要なコード
headタグ内に所定のJSを
なんと、たったの35行の追加
で実現！！！✧٩(ˊωˋ*)‫ ✧و‬

12. シナリオ例: 自社サイトと連携
自社サイトのマイページからのみHubs内のイベント会場に入室可
自社サイト
ログイン画面
自社サイト
マイページ画面
Hubsイベント会場
認証
ID
PW
OK Cnl GO!
未認証は入室不可！

13. 自社サイトマイページロード時の処理：自社サイト側
1. Hubsへ期限付きワンタイムトークンの発行依
頼
2. トークンをReticulumのDBに保存
3. トークンでアクセス
トークンをボタン遷移先のURLパラメータにセット
URL例）
https://your-rooms.com/premium-live?pass=kkdfuakdfafjjjjewsd3df992
dfdkk
GO!
会場へのリンクボタンを生成

14. 自社サイトマイページのボタン押下時：Hubs側
API「パスワード照合」呼び出し
URLパラメータとReticulumのパスワードの照合結果取得
Cookieにフラグを立てる
Yes
Cookieを見て認証
イベント会場 Hubsホーム画面
No
Yes
No

15. ログイン連携：実装手順
①Reticulumへのテーブル追加(postgre)
②API Gateway、 LambdaでのAPI作成(Python)
③別WEBサイトからのAPIコール（HTML/JS）
④Hubs clientでの認証（node.js）

16. 実装①：Reticulumへのテーブル追加
AWSコンソールから追加
RDS > Query Editor
普通のCREATE文で
テーブル作成

17. 実装②：API Gateway、LambdaでAPI作成
AWSコンソール
Lambdaで関数追加
⇒API GatewayでAPI化

18. 実装②：API Gateway、LambdaでAPI作成
API「パスワード取得」のコード一部抜粋
1. ハッシュ作成
2. SQLでハッシュを含んだ
レコードを挿入
3. ハッシュを返却
直接書いてもいいけど
VSCodeでローカルで書いてから
AWSコンソールにデプロイしてました

19. 今後の課題
・Hubsに入る際に、自動サインインしてユーザー名やアバ
ターを取得出来る様にしたい
・パスワードの発行回数を限定するなどして、セキュリティ面
を強化したい

20. 今後の期待：いろんな人に利用してもらいたい
オンラインイベントが熱い昨今、
ログイン連携システムがあれば便利。
ご興味あれば、お気軽にお問い合わせ下さい！
info@digital-standard.com
Hubs内完結のEC機能もありますので
そちらでも！

21. 以上、御清聴ありがとうございました
Hironori(@hironori_yan)