JSでOAuth認証した後POSTする記事が少ない

というわけで今回書かせていただきます。
割とズバズバ他記事のこと言うので、
すみません先に断っておきます。

サンプルとして用意しました下記サイトに飛ぶと
動作を理解しやすいと思います。
~~http://oldera.html.xdomain.jp~~

用意するもの

（1） HTML用サーバ（無料のレンタルサーバでもなんでもいいです）
（2） Twitter_developerへのアカウント/アプリ登録
（3） OAuth.ioのアカウント登録/アプリ登録
（4） oauth.js（OAuth認証用のもの）/ sha1.js
（5） oauth.js（OAuth.io用のもの）
（6） jquery-3.2.1.min.js

補足：
手順4と5の oauth.js のライブラリの定義名がかぶるため
そのままでは実行できません。
手順4の oauth.js 内に書かれている "OAuth" を
一括で "OAuth1" に置換してください。

手順4の oauth.js :
https://github.com/johan/oauth-js/blob/master/oauth.js
sha1.js :
http://labs.cybozu.co.jp/blog/mitsunari/2007/07/24/js/sha1.js
手順5の oauth.js :
https://github.com/oauth-io/oauth-js/blob/master/dist/oauth.js

セキュリティの問題

JavaScriptでOAuth認証って言っても、
HTTP通信使うので自サーバ上でOAuth認証を行うのは
"飛んで火に入る夏の虫"です。
つまり、見られてしまうんですよね、
中途半端なセキュリティだと。
そこで、問題を解決してくれてるのがOAuth.ioです。
今回はoauth_tokenとoauth_token_secretの解決のみに使用します。

OAuth認証をちゃんとしよう

上記に述べたような理由もあり、OAuth.ioを使います。
使い方は下記の記事を参考にしてください。
https://qiita.com/leafia78/items/abbdd5ffe3850d3a004b
で使い方ですが、、、
上記のサイトでは"2行でできる"と書いてあります。
認証自体は2行でできますが、
2行で認証してきてもこれだけだと用意したサーバに戻ってきません。
と言うわけで、下記のコードを追加してください。

access_twitter.js


function twitter_init(){

   OAuth.initialize('public_key');
   OAuth.popup('twitter',function(err, res){ //コールバック関数

         //ローカルストレージに保存する方が好ましいと思われる
         localStorage.setItem("oauth_token", res.oauth_token); 
         localStorage.setItem("oauth_token_secret", res.oauth_token_secret);

   //以下追加コード
   }).then(function(){ //終了処理

         //コールバック処理(元のアドレスに戻る)
         OAuth.callback('twitter',  "callback/url");

   });
}

ようやくOAuth認証方式でPOST

上記の処理ぶっ飛ばして
ここの処理のみ書いてる記事が非常に多いです。
セキュリティ上宜しくないので試すくらいでとどめましょう。

ただ、認証の際に参考にしたサイトがあるにはありますが
忘れたのと、結局自分で理解して書いたので割愛。

access_twitter.js


var data[];

function SendTwitter(tweets_txt){

    //以下POST先のURLの作成

    let options = {
        method: "POST",
        apiURL: "https://api.twitter.com/1.1/statuses/update.json",
        consumerKey: "consumer_key",
        consumerSecret: "consumer_secret_key",
        accessToken:  localStorage.getItem("oauth_token"),
        tokenSecret:  localStorage.getItem("oauth_token_secret")
    };

    let accessor = {
        consumerSecret: options.consumerSecret,
        tokenSecret: options.tokenSecret
    };

    //parameterの値はちゃんとリファレンス読んで理解しないと書けないぜ
    let message = {
        method: options.method,
        action: options.apiURL,
        parameters: {
            oauth_version: "1.0" ,
            oauth_signature_method:"HMAC-SHA1" ,
            oauth_consumer_key: options.consumerKey ,
            oauth_token: options.accessToken,
            status: tweets_txt + "",
            callback: "callback1"
        }      
    };

    //以下OAuth1は本来OAuthであるが先に書いた理由から改変
    OAuth1.setTimestampAndNonce(message);
    OAuth1.SignatureMethod.sign(message, accessor);

    //ここでPOSTするURIを作成しています。
    let url = OAuth1.addToURL(message.action, message.parameters);

    //GET_requestの場合、ヘッダドメイン名の回避が必要だがPOSTでは必要ない
    //回避処理を書くとエラー吐かないのにPOSTできない泥沼
    $.ajax({
        type: options.method,
        url: url
    });
}
//以下のコールバック関数内の処理は適当にやってください
function callback1(data){
    JSON.stringify(data);
}

コールバック関数ってなんだ

最初戸惑いましたが
読んで字のごとくその処理が終わった直後、
処理自体が扱っている変数などを
扱うことができる関数って理解するとわかりやすい。

JavaScriptを始めて2ヶ月くらいなので

間違い等ご指摘ありましたら、どしどしお願いします。
今回UIの部分は割愛しましたが
本題はちゃんとやってるのでよしとします。
サンプルURL先にデモアプリとして実装しているため、
そちらの方をブラウザの検証機能などで参考にしていただけるとありがたい。

※ リクエスト方式等の説明ぶっ飛ばしてるんですが
　各々リファレンス見て理解してねと言う意味を込めてます。

JavaScriptでOAuth認証した後TwitterにPOSTする