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
作成する際に、access_tokenの取得を行うことができますが、
ここで得られるaccess_tokenは自分用です。
もし作成したWebページに他の人がアクセスして、
自分用のaccess_tokenが利用されると、
アカウントを乗っ取られてしまいます。
なので各アカウントごとに作成したアプリに対して割り振られる、
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サーバといったところです。
具体的には、
クライアント側から必要なパラメータがPOSTされるので、
POSTリクエストを受け取ると、レスポンスを返すJSON APIとなります。
クライアント側では、
作成したHerokuサーバへPOSTリクエストを送り、
レスポンスされた値を用いて、
処理で得られた一部の値はWebローカルストレージに保存しておき、
TwitterへのPOSTリクエスト用に保持します。
まずテキストを入力せずツイートボタンを押します
次にツイート連携画面に飛びます
認証ボタンを押すと、元のページに帰ってきます。
テキストを入力して、ボタンを押します。
TwitterにもツイートがPOSTされていることを確認できます。
成果物としたいので、
ソースコードはGitHubを参照していただけたらと思います。
以上で終了です。
なにか質問やアドバイスなどあればよろしくお願いします！！
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 用のアプリの設定を作成
https://yosiakatsuki.net/blog/create-twitter-application/
- HerokuとXdomainなどへの登録
- Herokuの使い方を覚える
- Node.jsの環境構築
- 読みにくいTwitter API Referenceを読める英語力
作成する際に、access_tokenの取得を行うことができますが、
ここで得られるaccess_tokenは自分用です。
もし作成したWebページに他の人がアクセスして、
自分用のaccess_tokenが利用されると、
アカウントを乗っ取られてしまいます。
なので各アカウントごとに作成したアプリに対して割り振られる、
access_tokenを取得する必要があります。
Twitter OAuth 認証手順
- request_tokenを取得する。
- request_tokenを各種パラメータに付けて、ユーザを認証画面に飛ばす。
- ユーザが、認証画面でアプリ連携を許可する。
- 許可証となるコードを各種パラメータに付けて、ユーザがCallbackURLで設定したURLアドレスに飛ばされてくる。
- 許可証となるコードを利用して、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サーバといったところです。
具体的には、
- request_tokenを取得する。
- request_tokenをパラメータに付けたURLをクライアントに返す。
- 許可証となるコードを利用して、access_tokenを取得する。
- 取得したaccess_tokenをクライアントに渡す。
クライアント側から必要なパラメータがPOSTされるので、
POSTリクエストを受け取ると、レスポンスを返すJSON APIとなります。
クライアント側
クライアント側では、作成したHerokuサーバへPOSTリクエストを送り、
レスポンスされた値を用いて、
- Herokuサーバから得られたURLを用いてユーザを認証画面に遷移させる.
- ユーザが、認証画面でアプリ連携を許可する。
- 許可証となるコードをパラメータに付けてユーザがCallback URLで設定したURLアドレスに飛ばされる。
- 許可証となるコードを取得しHerokuサーバにポストする。
- Herokuサーバからレスポンスされたaccess_tokenを用いてTwitterにPOSTリクエストを行う。
処理で得られた一部の値はWebローカルストレージに保存しておき、
TwitterへのPOSTリクエスト用に保持します。
動作例
まずテキストを入力せずツイートボタンを押します次にツイート連携画面に飛びます
認証ボタンを押すと、元のページに帰ってきます。
テキストを入力して、ボタンを押します。
TwitterにもツイートがPOSTされていることを確認できます。
成果物としたいので、
ソースコードはGitHubを参照していただけたらと思います。
以上で終了です。
なにか質問やアドバイスなどあればよろしくお願いします！！
コメント
コメントを投稿