検証可能な資格情報（VC：Verifiable Credentials）とメタバース（Mozilla Hubs）を連携してみた

# 目次
はじめに
確認したこと
利用モジュール
連携手順
動作確認
おわりに
参考資料

# はじめに
最近、メタバースはゲーム業界だけではなく、イベントや一般の経済活動においても利用されつつあります。それに伴い、法律が追いついてない理由もありますが、ハラスメントや青少年が巻き込まれるトラブルがメタバース内で発生しております。
そこで今回はトラブルを防止するために、メタバース内におけるアバターの信頼性を提供する手段として、検証可能な資格情報（VC:Verifiable Credentials）を利用してみました。

# 確認したこと
- VC である「Microsoft Entra Verified ID」のサンプルコードを元に、発行サーバー、検証サーバーをクラウド環境で動作させたこと
- Mozilla Hubsをクラウド環境で動作させたこと
- VCの検証サーバーとメタバースであるMozilla Hubsを連携して、アバター名にVC内のニックネームやユーザIDを表示させたこと
- VC内のニックネームなどはURLパラメータとして渡したこと
- それに対応するために、Hubs側のカスタマイズをしたこと
![gaiyou-4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221946/ae67def8-0ae6-eafb-82d9-c9087e33aacf.jpeg)


＜図1. VC(検証可能な資格情報)とメタバースの連携図＞

# 利用モジュール
- Microsoft Entra Verified ID サンプルコード
https://github.com/Azure-Samples/active-directory-verifiable-credentials
2022年12月12日時点
OS: Ubuntu VERSION: 20.04.5 LTS(Focal Fossa)

- Mozilla Hubs
https://github.com/mozilla/hubs
 head位置　926dbde62
 OS: Ubuntu VERSION:18.04.6 LTS

# 連携手順
### 1) Microsoft Entra Verified ID(VC) の構築

1) Microsoft社「Microsoft Entra Verified ID のドキュメント」内のチュートリアルを参考に作業を実施しました。(参考資料　参照 )
2) クラウド上のマシンでサンプルアプリケーションをビルドし、発行サーバーと検証サーバーを起動します。（Python版使用）
3) VC(検証可能な資格情報）においては、ユーザーID(userId)とニックネーム(nickname）を属性として指定し、VCを発行します。
4) 検証サーバーにアクセスし、発行したVCで検証できる事を確認しました。

![VC-image0-s-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221946/0c0276f9-f8bb-6065-46e8-7ac7765edcec.png)

＜図2.VC(検証可能な資格情報）＞

![verifier.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221946/109b3141-d104-bb0f-d378-94d118d1a7c6.jpeg)
＜図3.VCサンプルアプリ（発行サーバー/検証サーバー）＞|

### 2) Mozilla Hubsの構築
1) 以下の記事を参考にHubsを構築しました
「Mozilla Hubs を VirtualBox でホストしてみた」
https://www.infiniteloop.co.jp/tech-blog/2022/02/mozilla-hubs-on-virtualbox/

2) 記載されている複数のモジュールをクラウド上のPCへ順番にインストールし、Hubsを起動しました
3) ブラウザでHubsへアクセスします。その際にセキュリティの警告が表示されますが、今回は実験的な連携である為、警告を無視します
https://<ホスト名>:8080/　

4) 「部屋を作成する」をタップします。但しシーンを指定していない為、作成された部屋は真っ暗です
5) 「Join Room」をタップして入室します
6) アバター設定画面(Avatar Setup)が表示されます
7) その時のURLを入室用URLとし記録しておきます
入室用URL
https://＜ホスト名＞:8080/hub.html?hub_id=＜部屋Id＞

8) 別のブラウザを起動し、先ほどの入室用URLを使用してHubsへアクセスします。
9) 新しいアバターを指定して入室できることを確認します。

### 3) VC検証サーバーをカスタマイズ
サンプルアプリケーション　active-directory-verifiable-credentials　の検証サーバー(Verifier)に注目します。

### コード変更点
- VCが検証された後に、Hubsへリダイレクトします。
- リダイレクトURLとして、先ほどの入室用URLを使用します。入室する部屋Idはパラメータとして指定されています。
- 利用者のVC情報をHubsへ渡したい為、VCのニックネームとユーザIDをURLパラメーターとして渡します。

### リダイレクトURL
　　https\://＜ホスト名＞:8080/hub.html?hub_id=＜部屋Id＞&avatarname=＜アバター名＞tomo&userid=＜ユーザーID＞
　例）https\://XXX:8080/hub.html?hub_id=yyy&avatarname=tomo&userid=1234
### パラメータ
- hub_id： Hubsの部屋Id（部屋作成時にHubsが生成）
- avatarname： アバター名（VCのニックネーム）
- userid： ユーザId（VCのユーザーID） 
### 変更ファイル
```active-directory-verifiable-credentials-python/1-python-api-idtokenhint/static/verifier.html
if (respMsg.status == 'presentation_verified') {
      document.getElementById('qrcode').style.display = "none";
      document.getElementById('message').innerHTML = respMsg.message;
      document.getElementById('payload').innerHTML = "Payload: " + JSON.stringify(respMsg.payload);
      document.getElementById('subject').innerHTML = "Verifiable Credential Expert";
      clearInterval(checkStatus);
       //add --->
      let climes=respMsg.payload[0]["claims"];
      let userId=climes["userId"];
      let nickname=climes["nickname"];
      document.location.href="https://＜ホスト名＞:8080/hub.html?hub_id=＜部屋Id＞&avatarname=" + nickname + "&userid=" + userId;
       //<---  
  }

```

### 4) Hubsをカスタマイズ
Mozilla Hubsは複数のモジュールから構成されています。
今回はアバター名にVCの値を入れたいため、Hubsのモジュールを変更します。
### コード変更点
- リダイレクトURL内のパラメーターであるアバター名とユーザIdをコード内で取得します。
- 新アバター名として、上記2つの値を使用します
　新アバター名：　アバター名-ユーザId　
　（Hubsの制約に沿って、英数字とハイフン、3文字以上、32文字以下となる様に）
- アバター設定画面(Avatar Setup)で新アバター名をセットします。
### 変更ファイル
```/home/ops/mozilla/hubs/src/react-components/profile-entry-panel.js
 //省略
import { qsGet } from "../utils/qs_truthy"; //add
 //省略
    if (this.props.containerType === "sidebar") {
      return <AvatarSettingsSidebar {...avatarSettingsProps} showBackButton={this.props.showBackButton} />;
    }
    //--->add
    console.log("Message: Setting avatar name in profile-entry-panel.js ");
    const avatarname = qsGet("avatarname");
    const userid = qsGet("userid");

    if(avatarname && userid){
      const inName = avatarname+"-" +  userid;
      this.state.displayName=inName;
    }
    //<---
```
※今回は実験的なコードである為、XSS等のセキュリティ対策を考慮していません

# 動作確認
では最初から実行してみましょう。
1) ブラウザでVCの検証サーバーへアクセスします
2) スマホでQRコードをスキャンして、MS AuthenticatorのVCを提供します。
3) 検証サーバーからHubsへリダイレクトされます。
4) Husのアバター設定画面(Avatar Setup)において、アバター名の欄に新アバター名（VC内のニックネームやユーザIDから構成）が確認できます。
5) Acceptボタンをタップして、Hubsへログインします。
6) Peaples画面を確認すると、新アバター名としてログインしていることが分かります。

![avatar-2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/221946/7b2ebfb8-2c70-6d8d-754a-7176aefdf8cd.jpeg)

＜図4.アバター設定画面(Avatar Setup)＞
# おわりに
今回はクラウド上に、githubのMicrosoft Entra Verified ID サンプルコードとMozilla Hubsをインストールしました
VC検証の終了後に、Hubsへリダイレクトして、VC内の情報をアバターに表示できるのを確認しました。
今後はHubsCloud等を利用して、本格的にメタバース内での信頼性の提供に挑戦してみたいと思います。
　
# 参考資料
-Microsoft社 「Microsoft Entra Verified IDのドキュメント」
https://learn.microsoft.com/ja-jp/azure/active-directory/verifiable-credentials/

-技術ブログ「Mozilla Hubs を VirtualBox でホストしてみた」
https://www.infiniteloop.co.jp/tech-blog/2022/02/mozilla-hubs-on-virtualbox/

-お知らせ：【新技術】Mozilla Hubsを活用してメタバースイベントを開催しました 
https://note.com/note_fsd1/n/ndb8cc09e08b8