あなたにおすすめするWebSocketを用いた全く新しいOAuthのご紹介

この記事は、 Advent Calendar 2016 - VOYAGE GROUP techlog の16日目のエントリです！

みなさんこんにちは！

VOYAGE MARKETINGにてエンジニアをしている なかにしごう (@gomachan46) | Twitter です。

2014年より社内非公式サークルとして 音ゲー部 を立ち上げ、お昼休みは会議室のプロジェクターで音ゲー鑑賞、定時後はゲームセンターで練習と、現在もなお元気に活動しています。

さて、今回はタイトルの通り WebSocketを用いた全く新しいOAuth をご紹介したいと思います。

ご存知の方も多いとは思いますが、さらっと簡単に用語の説明をしていこうと思います。

WebSocket

WebSocket（ウェブソケット）は、コンピュータ・ネットワーク用の通信規格の1つである。インターネットの標準化団体であるW3CとIETFがウェブサーバーとウェブブラウザとの間の通信のために規定を予定している双方向通信用の技術規格であり、APIはW3Cが、WebSocket プロトコルはIETFが策定に関与している。プロトコルの仕様は RFC 6455。TCP上で動く。

参考: WebSocket - Wikipedia

特性上、チャットなどのリアルタイム性を求められるようなケースに利用されたりしています。

ActionCable

Rails5系からの新機能で、 Rails と WebSocket をつなぐために用意されたものです。

これを用いることで Railsの良さはそのままに、リアルタイム通信を簡単に扱えるようになりました。

github.com

OAuth

OAuth とは、 Otoge Authorization の略です。

Otogeとは

簡単にいうとリズムに合せて作成された譜面の通りにボタンを押して遊ぶゲームです。音ゲーです。

以前よりもだんだんと認知度が上がってきているように感じますね！

OAuth は、この音ゲーで対戦を行い、相手よりも高いスコアを出すことでログインすることが出来るという全く新しい認証方式です！！*1

今回はこの OAuth を、 ActionCable を用いて実装してみました！

デモ

早速ですが百聞は一見に如かずということでデモをどうぞ！(動画埋め込みだと小さいかもしれないです)

OAuth を用いたログインの流れを、とくとご覧ください。

上から落ちてくるログインボタンを...

タイミングよくクリック！頼む〜！ログインさせてくれ〜🙏🙏🙏

勝者には真のログインボタンが与えられ、ここからログインすることができます。

使っている技術

重複もありますがざっと触った技術も書いておきますmm

全て触ったことのない技術でなんじゃこりゃ、という感じのまま気づけばブログ投稿2日前を迎えましたがなんとか動かすところまで出来てよかったですw

コードは闇を抱えていますがこちら GitHub - gomachan46/action-cable-oauth: OAuth

WebSocket

以下のような情報を WebSocket を用いてpushしあっています。

• 対戦相手のjoin情報
• プレイ開始情報
• 各プレイヤーのコンボ情報
• 各プレイヤーのスコア情報
• プレイ終了時の勝敗

Rails5

Rails5 系で ActionCable を用いています。

enchant.js

enchantjs.com

もうしばらく更新が止まっていそうですがとりあえず雑にゲームっぽいのが動きゃいいんだよ！ということで突っ込んでいます。

Rails 上に突っ込むのが必要だったので以下の記事やスライドあたりを主に参考にしました。

qiita.com

speakerdeck.com

音ゲー

音ゲーを雑にでも実装する必要があったので、以下の記事を参考にしながら実装しました。

blog.bokuweb.me

参考記事の皆さん、大変助かりましたmmありがとうございましたmm

スピード感、リアルタイム感

意外と(?)割と普通に音ゲー出来たなと言う感じでした！

動画の音声も2ウィンドウで同時に再生されているわけなのですが、ほぼズレを感じることなく聞こえているのではないかと思います🤔

処理する物量が増えたときなどどうなってくるかは要確認ですが、ちゃんと作ったらそれなりに面白いものが出来る可能性を感じるなどしましたw

おわりに

いかがでしたでしょうか？

これが未来の認証方式、 OAuth です。

みなさんも WebSocketを用いた全く新しいOAuth をぜひサービスに盛り込んで最高のログイン体験を！！

明日の更新もお楽しみに〜👀

関連

VOYAGE GROUP エンジニアブログ : あなたにおすすめするたった一つの最高のキーボード

shiro-goma.hatenablog.com

*1:これが言いたかっただけ。色々ツッコミどころはあるけどこまけぇこたぁいいんだよ！！←