feature image

2023年4月22日 | ブログ記事

traPには部内製のOAuth2.0認可サーバーがあります

結論

東京工業大学デジタル創作同好会traPには、部内製のチャットアプリ traQ が存在します。このtraQでは、OAuth2.0の認可サーバーとしての機能が実装されており、部員は自由にクライアントアプリを作成することができます。

君もtraPに入って、自分だけのOAuthクライアントを作ろう!!!!!

はじめに

この記事はtraP新歓ブログリレー2023 45日目(4/22)の記事です。

こんにちは、@d_etteiu8383です。traPではグラフィック班でデザインや3DCGをやっていたり、ゲーム班でゲームを作る素振りを見せていたりしています。

本記事では、部内製OAuth2.0認可サーバーを使っていろいろ勉強ができたぜ!!!!という話をします。新入生向け記事ということで、技術的な話はほとんどしません。

(部内向けアプリについてブログで公開する機会があまりなく、ほぼ自分語りみたいになってしまった)

OAuth2.0とは

OAuth2.0、"オー オース"と読みます。誤解を恐れずに、ものすごくおおざっぱに言うと、下のような仕組みです。

あなた「ゲームのスクリーンショットを撮影したぞ!Twitterに投稿したいな...」
ゲーム機「Twitterと連携して簡単に投稿できるけど、やる?」
あなた「ええやん」
ゲーム機「じゃあ次に出す画面でTwitterのログイン情報入力してね」
ゲーム機 (Twitterさん!この人がTwitterに画像投稿したいらしいからちょっと確認お願いします)
あなた「まあええよ、連携するわ」
ゲーム機 (了解です 感謝)
ゲーム機「よっしゃスクショ投稿できるようになったで」
あなた「じゃあこの画像投稿するわ」
ゲーム機 (さっき貰った鍵を使って...投稿完了)

この全体の流れの仕様がOAuth2.0です。特定のアプリケーションを指してOAuthだ、と言っているのではなく、この仕組み・形がOAuth2.0です(より正確にはRFC 6749という文書で定義されているフロー)。

もちろん、この例はかなり簡略化して一部のみを抜き出したものです。実際にはもうすこし複雑です。

詳細なOAuth2.0の仕様については猫でもわかる(諸説)OAuth 2.0【新歓ブログリレー2020 26日目】 | 東京工業大学デジタル創作同好会traPが詳しいのでこちらをご覧ください↓↓↓

猫でもわかる(諸説)OAuth 2.0【新歓ブログリレー2020 26日目】
はじめに こちらは新歓ブログリレー2020 26日目の記事です。 こんにちは。19Bのmazreanです。traP内ではSysAd班に所属しており、普段はサーバーサイドのコードを書いたり、サーバー触ったりしています。 traP内には、traQという部内製のチャットサービスがあります。traPでは原則入部時にこのチャットに登録することになっています。そうなると他のサービスを作るにあたってこのアカウントを使ってユーザー認証をしたり、ここから情報を得たりしたいことがでてくるわけです。この記事では、そのようなときに使うOAuth 2.0という仕組みについて説明していきたいと思います[1]。 OA…

実際に使ってみた

で、上記の例における"Twitter"側の機能が、traQにより提供されています。traQはtraP内で利用・開発されているチャットツールです。SlackとかDiscordみたいなそういうアレです。

上記の例における"あなた"が部員です。"ゲーム機"の部分を、自由に作成することができちゃいます。上の例での"ゲーム機"は、"Twitterと連携して画像の投稿"という機能を提供しているわけですが、traPでは"traQと連携して「traQへのメッセージ投稿」や「traP部員の情報の取得」"ができちゃいます。

これまでに私が作成した"ゲーム機"(クライアントと呼んだりします)の例を以下で紹介します。

部員の情報を取得する系

traP全員言えるかな?

traP部員はそれぞれがIDを持っているのですが(私は@d_etteiu8383)、それを全部員分言えるかな?というゲームです。ポケモン全部言えるかな?ゲームのパクリです。
このような部員の情報を使ったアプリをスッと作れると、部員間の繋がりも増えて楽しい。

名札メーカー

traP部員の情報を取得し、名札を作成するアプリです。そのまま印刷して使えるようになってます。対面イベントが増えてきて役立つかなと思い作りました。団体の運営に役立つアプリを作るのってtraPぐらい大規模なサークルでないと経験できないかも...?

traQの機能を使う系

スタンプメーカー

SlackやDiscordと同様に、traQにもスタンプ文化が存在します。そのスタンプをブラウザ上で作成・投稿できるアプリケーションを作りました。

(実はtraP部員じゃなくても画像作成はできます https://trap.show/~d_etteiu8383/easy-stamp-v2/)

Spotify連携

Slackにおける"チャンネルの説明"やDiscordにおける"チャンネルトピック"と同様の機能が、traQにも存在します。
また、traQでは各部員が"times"と呼ばれるチャンネルを持っており(いわゆる分報チャンネル)、そこで各自が自由に投稿しています。

私は自分のtimesチャンネルのトピックに「Spotifyで最近聞いた曲」を表示するためのクライアントを作りました。1時間おきにSpotifyのAPIを叩いて最近聞いた曲を取得し、timesチャンネルのトピックに表示しています。Spotify上の情報を取得するために、Spotify側でもOAuth2.0を利用しています。

(トピック変更履歴で普段何聴いてるかtraP部員全員にバレる)

SpotifyのAPI利用についてはSpotify API を使ってみた | 東京工業大学デジタル創作同好会traPでも紹介されているのでぜひご覧ください。

Spotify API を使ってみた
皆さんこんにちは。20BのRozelinです。この記事は新歓ブログリレー2021 10日目の記事です。 traPでは様々な部内サービスを利用することができますが、その中でも最も多くの部員に使われているのは部内SNSツール「traQ」だと思います。そこで、プログラミングの勉強と自分の娯楽を兼ねて、traQ用のBOTとSpotify APIを組み合わせて、traQ内でSpotifyの楽曲検索とアーティスト検索をできるようにしてみました。 最初 Spotify APIを使うにあたって、使おうと思っている全てのリクエストのコードを全て1から書くのはコスパが悪すぎると思ったので、パッケージを使うこと…

まとめ

OAuth2.0を含むtraPの環境を利用して君もインターネットに詳しくなろう!!!!!!!!

TwitterやGoogleのアカウントなどを普段何気なく連携しているそこのあなた!!!その裏側で起こっているやり取りを知ることは、セキュリティ意識を高めることにもつながります。ぜひtraPでOAuth2.0を利用したアプリケーションを作ってみましょう!!


最後までお読みいただきありがとうございます。明日の新歓ブログリレー2023担当者は@H1rono_Kです。楽しみ~

d_etteiu8383 icon
この記事を書いた人
d_etteiu8383

グラフィック班とゲーム班とSysAd班所属 いろいろ活動しています

この記事をシェア

このエントリーをはてなブックマークに追加
共有

関連する記事

2024年9月20日
2024年 1-Monthonを開催しました!!
Synori icon Synori
2023年4月17日
ポケモンを飼いたい夢を叶える
tqk icon tqk
2023年12月11日
DIGI-CON HACKATHON 2023『Mikage』
toshi00 icon toshi00
2023年4月25日
【驚愕】作曲4年目だった男が大学3年間ゲームサウンドに関わった末路...【ゲームサウンドのお仕事について】
tenya icon tenya
2023年3月20日
traPグラフィック班の活動紹介(Ver.2023)
NABE icon NABE
2021年8月12日
CPCTFを支えたWebshell
mazrean icon mazrean
記事一覧 タグ一覧 Google アナリティクスについて 特定商取引法に基づく表記