Hubsカスタマイズ
別WEBサイトとの
ログイン連携による入室制限
Hironori(@hironori_yan)
デジタル・スタンダード
自己紹介
Hironori(@hironori_yan) ← Twitter
・職業：大阪のソフト開発会社のプログラマー
・仕事でやっていること：
スマホアプリ、Windowsアプリケーション開発など
・今回ははじめての登壇！！
アイデアのみで登壇ボタンをクリック（๑✧∀✧๑）☀
登壇日迄にものを作り上げにいくスタイルでやってみた
そもそもHubsって何よ？
Mozillaが公開しているオープンソース(https://github.com/mozilla/hubs)で公開しているソーシャルVR。
特徴は
・圧倒的手軽さ。ブラウザ上で動く！
・URLリンクのみで入室出来る！
・VR端末、PC、スマホでも使える
2020-07-15 VRSionUp!7 "Hubs Study"
Hubs Cloud研究-公開リポジトリを中心に（akihiko.shirai）より抜粋
（https://www.slideshare.net/vrstudiolab/hubs-cloud-236930572）
クライアント
バックエンド
過去の開発： Hubs（フロント側）の改造によるECサイト化
@yukihiko_a
Hubsでラクラク決済
2020/10/23
対象のオブジェクトを叩くと、
Hubs内で決済が
出来る
今回やったこと
他サイトとログイン連携を
Hubsのバックエンドを担っているReticulumを拡張し、
別WEBサイトはほぼ触らずに実現することを試みた
結果、、、、出来ました！
動作確認動画↓↓
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に統合しました
動作確認キャプチャ①：会場とは違う普通の部屋
ホーム画面から
入室できる
動作確認キャプチャ②：ホームからイベント会場
HOME画面から
「Premium Live 2020」を押下しても
認証失敗追い出される
動作確認キャプチャ③：別サイトからの入室
入室出来た！
対象の静的ページに必要なコード
headタグ内に所定のJSを
なんと、たったの35行の追加
で実現！！！✧٩(ˊωˋ*)و✧
シナリオ例: 自社サイトと連携
自社サイトのマイページからのみHubs内のイベント会場に入室可
自社サイト
ログイン画面
自社サイト
マイページ画面
Hubsイベント会場
認証
ID
PW
OK
Cnl
GO!
未認証は入室不可！
自社サイトマイページロード時の処理：自社サイト側
トークンをボタン遷移先のURLパラメータにセット
URL例） https://your-rooms.com/premium-live?pass=kkdfuakdfafjjjjewsd3df992dfdkk
GO!
会場へのリンクボタンを生成
自社サイトマイページのボタン押下時：Hubs側
API「パスワード照合」呼び出し
URLパラメータとReticulumのパスワードの照合結果取得
Cookieにフラグを立てる
Yes
Cookieを見て認証
イベント会場
Hubsホーム画面
No
Yes
No
ログイン連携：実装手順
①Reticulumへのテーブル追加(postgre)
②API Gateway、 LambdaでのAPI作成(Python)
③別WEBサイトからのAPIコール（HTML/JS）
④Hubs clientでの認証（node.js）
実装①：Reticulumへのテーブル追加
AWSコンソールから追加
RDS > Query Editor
普通のCREATE文で
テーブル作成
実装②：API Gateway、LambdaでAPI作成
AWSコンソール
Lambdaで関数追加
⇒API GatewayでAPI化
実装②：API Gateway、LambdaでAPI作成
API「パスワード取得」のコード一部抜粋
直接書いてもいいけど
VSCodeでローカルで書いてから
AWSコンソールにデプロイしてました
今後の課題
・Hubsに入る際に、自動サインインしてユーザー名やアバターを取得出来る様にしたい
・パスワードの発行回数を限定するなどして、セキュリティ面を強化したい
今後の期待：いろんな人に利用してもらいたい
オンラインイベントが熱い昨今、
ログイン連携システムがあれば便利。
ご興味あれば、お気軽にお問い合わせ下さい！
info@digital-standard.com
Hubs内完結のEC機能もありますので
そちらでも！
以上、御清聴ありがとうございました
Hironori(@hironori_yan)