Edited at

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

以上で終了です。

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