こんにちわ
ゴリラです。
最近Twitter認可機能を実装する必要があって、
全く知見がないのでこの際、仕組みを理解するために記事をまとめてみました。
内容の理解に間違いがありましたら、コメントで教えてくださいm(_ _)m
目的
今回はより気軽にサービスを利用してもらえるように、
普段使っているSNSアカウントでサービスにログインできるすることが目的です。
Twitterだと、診断系サービスを利用する時に、
認可を行ったりすることが多いですね。
認証と認可について
認証と認可の仕組みについては、こららの記事を参考にしました。
TwitterはOAuthという認可の仕組みを使用しています。
ここで一つポイントですが、「OAuthは認証の仕組み」ではないということです。
OAuthは「認可の仕組み」であり、「認証が目的ではない」です。
今回はTwitterユーザのデータを取得する権限をアプリ側に付与するために、認可の仕組みを実装します。
Twitterでの認可
参考記事で認証・認可の大枠を掴んだどころで、必要なものを整理します。
必要なものは以下２つです。
- コンシューマキー
- アクセストークン
今回やりたいのは「Twitterアカウントでアプリケーションにログインする」ことです。
なのでアプリケーション側でログインしようとするユーザの情報を取得して、保存する必要があります。
ただ、どのアプリケーションでも好きにTwitterからユーザ情報をリクエストできるわけではなく、
Twitterにアプリケーションのプロジェクトを登録して、コンシューマキーというのを取得する必要があります。
コンシューマキーは、Twitterがアプリケーションを認識するための一意なものです。
Twitter側がアプリを識別できないと、悪さをするアプリがあった場合特定＆対処できないので、
サービスの健全性を維持するためにも必要ですね。
次に、ユーザのリソースを取得するのにまずユーザのアクセストークンを取得する必要があります。
参考記事にあったように、アクセストークンはを用いることで、ユーザのリソースを取得することができます。
公式のドキュメントを見ると、アクセストークンを取得するまでの流れは以下になります。
-
callback urlとconsumer api keyを
POST https://api.twitter.com/oauth/request_tokenして、リクエストトークン(oauth_tokenとoauth_token_secret)とoauth_callback_confirmedを取得する。HTTPステータスコードが200かどうかを確認する。 - oauth_callback_confirmed がtrueになっていれば、oauth_token, oauth_token_secret をセッションに保存する。
-
GET https://api.twitter.com/oauth/authorize?oauth_token={{oauth_token}}で認可（未ログインの場合はログイン画面）に遷移する。 - 認可が完了したら、oauth_tokenとoauth_verifierを含んだ状態で、callback_urlにリダイレクトされる。
- 4で帰ってきたoauth_tokenと2でセッションに保存したoauth_tokenを比較して、同じであることを確認する。
-
consumer api keyとoauth_tokenとoauth_verifierを含んで
POST https://api.twitter.com/oauth/access_tokenでアクセストークン(oauth_tokenとoauth_token_secret)を取得する。
Twitterにアプリを登録する方法
こちらの記事を参考にしてみてください。
ぼくの場合は一瞬で許可降りました。
ユーザのプロフィールしか使わないからかな…？
アプリでの大まかの流れ
フロントはSPAでvue.jsを使っています。
vue.jsだけでOAuth認可だと、アプリのコンシューマキーをサーバーから取得する必要があり、漏れるリスクが増えます。
サーバーだけで処理を完結したいのですが、フロントでTwitterの認可画面に遷移する必要があるので、以下の様に実装してみました。
- ログインボタンを押して、認可APIをコールする
- 認可API内で1、2を処理して、Twitter認可画面のURLを返却する
- 2で受け取った認可URLをjs側で画面遷移させる（location.herf)
- ユーザが認可ボタンをポチッと押して4の通り予め設定したcallback_urlに遷移する
- callback_url自体はAPIのエンドポイントにして、5、６の処理を行い、アクセストークンを取得する
- アクセストークンをDBなりセッションなりに保存して、画面側に200ステータスコードを返してログイン後の画面に遷移する
実装
今回API側の実装に用いたフレームワークは以下になります。
そして、サンプルはこちらです。
ソースを見て頂ければ、大体わかると思いますのでソースに関する説明は省かせていただきます。
https://github.com/skanehira/vue-go-oauth
サンプルはこんな感じです。
まとめ
Twitterの認証・認可について大まかの流れは理解しましたが、
トークンとシークレットを必要とする意味など、理解しきれていないので、
引き続きそこらへんを勉強していきます。
この記事は、GoでTwitterの認証認可を実装したいけどよくわからない方に役に立てたらと思います。