traQ QRコード君の復権 ~序章~

@d_etteiu8383

traQのQRコードの話

traQ

それ

traQ QRコードの内容

eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCJ9.eyJkaXNwbGF5TmFtZSI6IuOBp-OBo-OBpuOBhOOBhiIsImV4cCI6MTY2NjI0Mzc2MCwiaWF0IjoxNjY2MjQzNDYwLCJuYW1lIjoiZF9ldHRlaXU4MzgzIiwidXNlcklkIjoiYzhmNDRjZDAtZWY5MS00YTYzLWJmMGUtMWM4MGIxZjdkMDUyIn0.KL4dHOTkBJzlau2t1Qy9jHQPvMh8GFdoBzj34UenBayf0BqgYvCmCP9bweKuKvvE0BmXmvrnVLmT3mZJgfpYeA

は?

JWT (JSON Web Token) とは

• 公式サイト(https://jwt.io)
• 署名により改ざん検知できる
• 認証用トークン等に用いられる
• Base64urlエンコーディングされている

要するに「適当なデータに署名を付けたもの」みたいなモノ

参考：https://qiita.com/knaot0/items/8427918564400968bd2b

traQ QRコードの内容をデコードしたもの

ヘッダー:

{
  "alg": "ES256",
  "typ": "JWT"
}

ペイロード:

{
  "displayName": "でっていう",
  "exp": 1666243760,
  "iat": 1666243460,
  "name": "d_etteiu8383",
  "userId": "c8f44cd0-ef91-4a63-bf0e-1c80b1f7d052"
}

署名

traQ QRコードの使用例

そのQRコードを提示した人が正規の部員であることを検証できる

• 部費等金銭支払い時の本人確認に利用可能
• 対面メンバー集会で誰が参加したかの記録を取るのに使われていたりした

使ってみる

in TypeScript

• jsQRでQRコードの読み取り
• jwt-decodeでjwtのデコード
  • (今回は署名の検証をしていないので正直atob()使うだけで良い)

使ってみよう

対面での活動ができるようになりつつあるのでtraQのQRコード君の活躍機会が増えるかも