JavaScript
Node.js
HTML5
Twitter
OAuth

TwitterのOAuthをJavaScriptでフルスクラッチする

Twitter OAuthをJavaScriptで自作

今回は以前書きました、
https://qiita.com/olt/items/472c1ebee201e541ddc3
この記事の中で登場する、Oauth.ioという外部ライブラリを用いて
実装していたaccess_tokenの取得をJavaScriptのみで
実装していきたいと思います!!
access_tokenの取得は基本的に便利なライブラリなどを
用いることが大半ですが、勉強を兼ねています。
JSのみでOAuthの認証手順を説明している
参考記事も少なかったため、TwitterのOAuthを
JSのみでフルスクラッチできるぞということを書けたらと思います。

こちらにコードを置いています。
GitHub: https://github.com/olt556/oltwitter

事前準備

Twitter Developerに登録してREST API 用のアプリの設定を
作成する際に、access_tokenの取得を行うことができますが、
ここで得られるaccess_tokenは自分用です。
もし作成したWebページに他の人がアクセスして、
自分用のaccess_tokenが利用されると、
アカウントを乗っ取られてしまいます。
なので各アカウントごとに作成したアプリに対して割り振られる、
access_tokenを取得する必要があります。

Twitter OAuth 認証手順

  1. request_tokenを取得する。
  2. request_tokenを各種パラメータに付けて、ユーザを認証画面に飛ばす。
  3. ユーザが、認証画面でアプリ連携を許可する。
  4. 許可証となるコードを各種パラメータに付けて、ユーザがCallbackURLで設定したURLアドレスに飛ばされてくる。
  5. 許可証となるコードを利用して、access_tokenを取得する

参考にしたサイト:
https://syncer.jp/Web/API/Twitter/REST_API/#section-2-4

要件

言語/プラットフォームの構成

サーバ側: Heroku/Node.js/ES6
クライアント側: Xdomain(HTMLサーバ)/HTML/CSS/JavaScript

どうしてHerokuでWebサーバも立てないの?
とかはなしいきましょう。(学生にはお金がありません)
Herokuは1サーバのみであれば機能制限はあるものの無料です。
XdomainはHTMLサーバという制約はありますが、
簡易なものであればWebアプリも動きますし無料です。
そう、お金がなくてもやろうと思えばいけるッ...。
※ HTMLサーバは通常のWebサーバでも構いません。

サーバ側

まず、サーバ側にはHTMLサーバの制約上、
クロスドメイン制約の回避を行ってもらいます。
簡単に言うと、OAuth用の独自APIサーバといったところです。
具体的には、

  1. request_tokenを取得する。
  2. request_tokenをパラメータに付けたURLをクライアントに返す。
  3. 許可証となるコードを利用して、access_tokenを取得する。
  4. 取得したaccess_tokenをクライアントに渡す。

といった部分の解決を目指します。

クライアント側から必要なパラメータがPOSTされるので、
POSTリクエストを受け取ると、レスポンスを返すJSON APIとなります。

クライアント側

クライアント側では、
作成したHerokuサーバへPOSTリクエストを送り、
レスポンスされた値を用いて、

  1. Herokuサーバから得られたURLを用いてユーザを認証画面に遷移させる.
  2. ユーザが、認証画面でアプリ連携を許可する。
  3. 許可証となるコードをパラメータに付けてユーザがCallback URLで設定したURLアドレスに飛ばされる。
  4. 許可証となるコードを取得しHerokuサーバにポストする。
  5. Herokuサーバからレスポンスされたaccess_tokenを用いてTwitterにPOSTリクエストを行う。

の処理を行えるように実装します。
処理で得られた一部の値はWebローカルストレージに保存しておき、
TwitterへのPOSTリクエスト用に保持します。

動作例

まずテキストを入力せずツイートボタンを押します
スクリーンショット 2018-12-07 16.32.18.png

次にツイート連携画面に飛びます
スクリーンショット 2018-12-07 16.33.00.png

認証ボタンを押すと、元のページに帰ってきます。
テキストを入力して、ボタンを押します。
スクリーンショット 2018-12-07 16.37.26.png

TwitterにもツイートがPOSTされていることを確認できます。
スクリーンショット 2018-12-07 16.34.34.png

成果物としたいので、
ソースコードはGitHubを参照していただけたらと思います。

デプロイしたサイト置いておきます。
お試しにどうぞ
http://oldera.html.xdomain.jp

以上で終了です。
なにか質問やアドバイスなどあればよろしくお願いします!!