Twitter API Ringo🍎🍎🍎

Studio準子
ワンピース水着

Twitter API PHPでXに画像付きポスト

撮影スクリプト ViewRingoにポーズURLをXにポストする機能がありましたが，ポーズだけで画像は付かなかったという。。。普通，画像の方がポストされると思いますよね。で，これは，ViewRingoからXに画像つきポストができるようにした際のメモをまとめたものです。

やったこと (このページの内容)

javascriptのWebアプリのユーザが，Xの自分のアカウントで画像付きポストを行う
画像のアップロードにはTwitter API v1.1，ポストにはTwitter API v2の無料APIを使用
Twitter APIの認証は，レンタルWebサーバのPHPで，OAuth 1.0aとOAuth 2.0の両方

アプリをXに連携するにはTwitter APIを使います
Xの機能を利用するにはTwitter APIを使う必要があります。あれれ？って思うかもですが，X Developer Platformでも Twitter APIってなってたり，X APIってなってたり，まだ混乱しているみたいです。あと，日本語のX 開発者プラットフォームもあるけど，リンク先は英語だったりします。
で，無料 (Free) のTwitter APIには，以前から使われていたTwitter API v1.1と新しいTwitter API v2があります。それ以外，広告用のTwitter Ads APIや企業向け?のTwitter API: Enterpriseは有料のサービス/APIです。もちろんポスト数とか使える機能に制限はありますが，ここでは無料のTwitter API v1.1とAPI v2を使います。
APIを使うにはOAuth認証が必要です
Xにポストするには正当なユーザか否かを判定する認証が行われます。認証にはOAuthが使われていますが，これにも OAuth 1.0aとOAuth 2.0があります。 OAuth 1.0aは，特定ユーザのアカウント(Client)として認証されます。 OAuth 2.0は，いくつか方法があります。 Bearer Token (app-only)は特定のユーザアカウントに結びつかない認証方式です。 OAuth 2.0 with PKCEは，ユーザ(Public client)の承認を得て，ユーザの代わりにユーザアカウントでポストしたりできる認証方式です。
OAuthの認証方式とAPIのバージョンには関係があって，OAuth 1.0aの認証はAPI v1.1とAPI v2の両方で使えるけど， OAuth 2.0はAPI v2でしか使えません。
で，結局どうすりゃいいの？
無料のAPIについてまとめるとこんな具合。

API OAuth1.0a OAuth2.0 POST, USER Media Upload

API v1.1 X X

API v2 X X X

どんなアプリかによって，適切な認証・APIを選択する必要があると思いますが，こんな感じでしょうか
- 何かつぶやくだけのアプリ OAuth1.0a + API v2
- 画像付きでポストするアプリ OAuth1.0a + API v1.1 + API v2
- ユーザに代わってつぶやくアプリ OAuth2.0 + API v2
- ユーザに代わって画像をポストするアプリ OAuth1.0a + API v1.1 + OAuth2.0 + API v2
ViewRingoのようにユーザの代わりに画像付きポストを行うアプリだと， OAuth 1.0aとOAuth 2.0の両方の認証を使って，機能によってTwitter API v1.1とAPI v2を使い分ける必要があります。つまり全部入り💦
サーバと言語
これも悩ましいところ。。。
アプリがjavascriptなので，ブラウザサイドのjavascriptだけで実装しようとすると， Oauth.ioというサービスが見つかります。これは，Client Secretなどの公開しちゃいけないパラメータをOauth.ioのサーバに登録しておいて， Oauth.ioのサーバを経由して，OAuth認証やAPIへのアクセスを行うものですが，$ 19/monthはちょっと高い。
AWSとかクラウド使えれば，サーバサイドでNode.jsとか動かせるので，何の問題もないけれど，これはコストが高い。無料や格安レンタルWebサーバだと機能制限があって難しいけれど，最近はWord pressのお陰で，無料でもPHPが動くレンタルサーバが増えていて，これが使えれば助かります。 APIは基本的にhttpを叩いているだけなので何とかなるとして，OAuthをどうするかが肝です。
OAuthライブラリ
実は，OAuth2.0はPHPの標準的な機能だけで，ライブラリなどを使わなくても比較的簡単に認証ができます。それに比べると，OAuth1.0aは処理がちょっと面倒です。X Developerの Tools and librariesにはオフィシャルのライブラリやSDKと書かれているけれど，PHPは対応していないみたい。 Community tools and librariesとしてPHPのライブラリも上げられています。 TwitterOAuthは， OAuth1.0aの認証とAPI v1.1とAPI v2の両方に対応しています。
Gitなどを探すとこれら以外にも，PHPでOAuth1.0aを使う方法はたくさん出てきます。 League/oauth2-clientを元にして，いろいろなサイトの認証がThrid party providerとして実装されているみたい。 Twitter用にはsmolblog / oauth2-twitteが公開されています。
開発環境
無料・格安のレンタルWebサーバだと，シェルの使えるものはほとんどないと思います。そうなると，ローカルで開発・テストを行って，FTPなどでアップロードを行うクロス開発環境を用意するのが一般的かと思います。 XAMPPだと， Apache + MariaDB + PHP + Perl の環境が一発でインストールできます。 Windows用だと，インストーラをダウンロードして実行するだけ。
この後，Composerをインストールしますが，その準備のために， C:\xampp/php/php.ini の ;extension=zipのコメントアウトを外しておきます。 Git for Windowsもインストールしておきます。
Composerも Windows用のインストーラがあるので，これを使いますが，なぜかgetcomposer.org のDownload じゃなくて， Getting Startedからダウンロードするようになってます。
開発環境の一覧
用意した開発環境は以下の通りです。
- サーバ: PHP・FTPが使えるだけの格安レンタルサーバ
- OAuth1.0aとTwitter API v1.1: TwitterOAuth
- OAuth2.0とTwitter API v2: PHPのcURLコマンドなどで実装
- クロス開発環境: XAMPP
- Dependency Manager: Composer
TwitterOAuthは。他のライブラリに依存していないようなので， Composerを使わなくても， Githubのabraham/twitteroauth-comからインストールできるかもしれません。（Ringoはやってないので，未確認です。） Composerを使わないのなら，クロス開発環境なしで，いきなりサーバに上げてもいいんじゃないかとも思いますが，開発中は，Client Secretを見えるところに置いたり，Tokenをprint_rで表示したりすることがあると思います。ローカルで開発し，Client SecretやTokenが見えないように工夫してから公開サーバに上げたほうが良いと思います。
TwitterOAuthのインストール
XAMPPを標準的な方法でインストールしていれば， C:\xampp\htdocsがドキュメントルートになっているはずです。公開サーバのフォルダ配置などを考慮して，ローカルのPHPを配置するフォルダを決めてください。ここでは，C:\xampp\htdocs\twitter\に作ったことにします。
フォルダでPower shellを起動し，TwitterOAuthに書かれている通り， Composerを使ってインストールします。
composer require abraham/twitteroauth
X Developer・Projectの登録
X Developer Platformに登録します。 X Developer portalに行くと有料サブスクのボタンが出てきますが，その下のSign up for Free Accountをクリックします。もちろん，有料サブスクして貰ってもいいんですけど。。。
TwitterのデータやAPIの利用方法を全部書けとか出てきますが，画像をアップロードするとか，公開ユーザのアイコンURLを調べるとか，公開ユーザの代理でポストするとかそれっぽいことを書いておけば良いと思います。審査に時間がかかるとか書かれたポストありますが，特に審査らしいことはなくて，登録するとすぐに使えるようになります。
ID・KEYなどの発行と保管
続けてProjectを登録します。FreeだとProjectを1個しか登録できません。 Projectを登録するとProjectのページのKeys and tokensタブでキーやトークンが発行できます。 Callback URIには，認証コードを受け取るURLを記入します。 XAMPPのローカル環境のC:\xampp\htdocs\twitter\のフォルダでテストする場合 http://localost/twitter/callback.phpとかにします。 Consumer keyとConsumer secretは，ユーザIDとパスワードのようなもの， Access tokenとAccess token secretはOAuth1.0a認証のIDとパスワードのようなもの， OAuth2.0では，Client IDとClient Secretも必要になります。開発時にはこれらを頻繁に使うので，config.phpとかにまとめて記入していました。
```
config.php

$consumerKey = ".........";
$consumerSecret = "........";
$accessToken = "..............";
$accessTokenSecret = "..........";
$clientID = "...........";
$clientSecret = ".........";
$redirectUri = 'http://localhost/twitter/callback.php';
```
これをPHPで，require './config.php'とかすればすぐに使えます。本番では，.ENVとか読み取れないファイルに記載するのが良いようです。

API	OAuth1.0a	OAuth2.0	POST, USER	Media Upload
API v1.1	X			X
API v2	X	X	X

TwitterOAuthの動作確認
簡単な動作確認をしてみます。 /2/users/meだと，特にパラメータを設定しなくても，自分のIDや名前が返ってくるので動作確認に便利です。

testOAuth1.0a.php

require "./config.php";
require "vendor/autoload.php";
use Abraham\TwitterOAuth\TwitterOAuth;

$connection = new TwitterOAuth($consumerKey,
    $consumerSecret, $accessToken, $accessTokenSecret);
$connection->setApiVersion(2);
$response = $connection->get('users/me', []);
print_r($response);

ブラウザでhttp://localhost/twitter/testOAuth1.0a.phpにアクセスすると

Response

stdClass Object (
    [data] => stdClass Object (
        [id] => *****************
        [name] => Ringo🍎🍎🍎
        [username] => ringo3apples
    )
)

のように，ユーザIDや名前，ユーザー名の応答が返ってきます。

OAuth2.0のテスト
OAuth2.0の認証プロセスで，testOAuth2.0.phpで認証プロセスを開始して， callback.phpにコールバックする場合，
```
testOAuth2.0.php

require "./config.php";
$scope = rawurlencode('tweet.read tweet.write users.read offline.access');

$url = "https://twitter.com/i/oauth2/authorize?response_type=code
    &client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scope}
    &state=state&code_challenge=challenge&code_challenge_method=plain";

header(“Location: ${url}”);
```
$scopeの詳細は，/2/users/meここにあります。今回の$scopeには，ツイートの読み書きとユーザ情報の読み込み， offline.accessを設定しています。 offline.accessは後述のリフレッシュトークンを受け取るためのオプションです。
ブラウザで，http://localhost/twitter/testOAuth2.0.phpにアクセスすると，上記のURLが設定されて，Twitterの認証サーバにリダイレクトされます。ブラウザはTwitterの認証サーバのアクセス承認画面になります。ここで，アクセスを承認すると，callback.phpへリダイレクトされます。
Xにログインしているユーザのアイコン絵が表示されているので，このアカウントでよければ承認ボタンを押します。別のアカウントにしたい場合は，Xにログインを押して，Xのページで別のアカウントに切り替え，戻るボタンで承認画面まで戻ってくると，アイコン絵が変わっているので，承認ボタンを押します。
承認のボタンを押すと，ブラウザはコールバックに設定したcallback.phpにリダイレクトされます。このとき，URLに認証コードがついているので，callback.phpで受け取ります。
```
callback.php

require "./config.php";

$url = 'https://api.twitter.com/2/oauth2/token';
$headerStrings = [
    'Content-Type: application/x-www-form-urlencoded',
    'Authorization: Basic ' . base64_encode("${clientId}:${clientSecret}"),
];
$postField = [
    "code" => $_GET['code'],
    "grant_type" => "authorization_code",
    "redirect_uri" => $redirectUri,
    "code_verifier" => "challenge",
    "client_id" => $clientId,
];

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, $headerStrings);
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($postField));
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
$response = curl_exec($ch);
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
if(curl_errno($ch)) {
    echo 'Curl error: ' . curl_error($ch);
    exit(0);
}
curl_close($ch);
if($httpCode < 300){
    $data = json_decode($response);

    $accessToken = $data -> access_token;
    $refreshToken = $data -> refresh_token;

    echo "Access token: ${accessToken}<br>Refresh token: ${refreshToken}";
}else{
    echo "${httpCode}<br>";
    print_r($data);
}
```
callback.phpでは，URLから認証コードを$_GET['code']で受取り，ポストフィールド$postFieldに追加します。ポストフィールドには，認証方式がauthorization_codeであるとか，リダイレクトURI，チャレンジの確認，client_idなどが入っています。また，ヘッダーには，client_idとclient_secretを:で繋いで， base64変換したものでBasic認証します。
これらをcurl関数で/2/oauth2/tokenのエンドポイントにPOSTで送ります。問題なければ，アクセストークンeaccessTokenとリフレッシュトークンrefreshTokenがjsonにまとめられて返ってきます。

アクセストークンのテスト
/2/users/meを使って，アクセストークンのテストをします。

usersMe.php

require "./config.php";
$accessToken = ".....................................";

$url = 'https://api.twitter.com/2/users/me?user.fields=profile_image_url';

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, [
    'Authorization: Bearer ' . $accessToken,
    'Content-Type: application/json',
    'Accept: application/json'
]);
$response = curl_exec($ch);
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
if(curl_errno($ch)) {
    echo 'Curl error: ' . curl_error($ch);
    exit(0);
}
curl_close($ch);
if($httpCode < 300){
    $data = json_decode($response);
    $id = $data->data->id;
    $name = $data->data->name;
    $username = $data->data->username;
    $icon = $data->data->profile_image_url;
}else{
    echo "${httpCode}<br>";
    print_r($data);
}

ヘッダにアクセストークンを使ってBearer認証を行っています。セッテだけなので比較的簡単です。 URLにはuser.fieldsを追加していて，ユーザのアイコン絵のURLも要求しています。他の情報が欲しい場合はURLに追加します。このあたりの詳細は /2/users/meにあります。

Response

stdClass Object (
    [data] => stdClass Object (
        [id] => *****************
        [name] => Ringo3web
        [username] => ringo3web
        [profile_image_url] => ******************
    )
)

今度は，X Developerに登録したユーザではなく，アクセス承認したアカウントの情報が表示されているはずです。つまり，このトークンを使うと，アクセス承認したアカウントの代理でアクセスすることになります。

トークンのリフレッシュ
アクセストークンの有効期限は7200秒，2時間です。継続してアクセスを行うためには，新しいアクセストークンを入手する必要があります。先ほどと同じように，ユーザから承認を貰って，認証コードでアクセストークンを受け取る事もできますが，リフレシュトークンを使うと，ユーザ承認なしで，新しいアクセストークンを受け取ることができます。リフレッシュトークンの有効期限は30日なので，リフレッシュトークンが切れる前にリフレシュを行えば継続して使えることになります。
```
refresh.php

require "./config.php";
$refreshToken = ".....................................";

$url = 'https://api.twitter.com/2/oauth2/token';
$headerStrings = [
    'Content-Type: application/x-www-form-urlencoded',
    'Authorization: Basic ' . base64_encode("${clientId}:${clientSecret}"),
];
$postField = [
    'grant_type' => 'refresh_token',
    'refresh_token' => $refreshToken,
    'client_id' => $clientId,
];

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, $headerStrings);
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($postField));
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
$response = curl_exec($ch);
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
if(curl_errno($ch)) {
    echo 'Curl error: ' . curl_error($ch);
    exit(0);
}
curl_close($ch);

if($httpCode < 300){
    $data = json_decode($response);
    $accessToken = $data -> access_token;
    $refreshToken = $data -> refresh_token;
}else{
    echo "Refresh fail: ${httpCode} ${response}";
    exit(0);
}
```
リフレッシュの方法は，Authenticationに書かれていますが， X Developerの例ではリフレシュトークンだけで認証していますが，私のところでは上手くいかなかったので，ヘッダにBasic認証も付けています。もしかしたら不要なのかもしれません。これで新しいアクセストークンが入手できます。この時，リフレシュトークンも新しくなります。

画像のアップロードとツイート
最後に，画像をアップロードして，ユーザアカウントでツイートします。ツイートするには，Twitter API v2を使います。。ユーザのアカウントでツイートするには，OAuth2.0認証する必要があります。
一方，画像のアップロードにはTwitter API v1.1を使います。なので，OAuth1.0aを使います。この時，OAuth1.0aを使って画像アップロードを行うと，画像の所有権はClientIDとしてアップロードされ，他のユーザアカウントでは画像を使うことができません。そこで，additional_ownersにツイートするユーザのID$userIdを登録して，アップロードした画像をツイートするユーザも使えるようにしています。

tweet.php

require "vendor/autoload.php";
use Abraham\TwitterOAuth\TwitterOAuth;

require "./config.php";
$accessToken = ".....................................";
$userId = "...........";
$image = "image.png";
$tweet = "This is the main text for tweet.";

$connection = new TwitterOAuth($consumerKey, $consumerSecret, $accessToken, $accessTokenSecret);
$connection->setApiVersion(1.1);
$media = $connection->upload('media/upload', [
    'media' => $image,
    'additional_owners' => [$userId]
]);
$mediaId = $media->media_id_string;

if ($mediaId && isset($_COOKIE['twitterOauth'][$id]['AccessToken'])){
    $accessToken = $_COOKIE['twitterOauth'][$id]['AccessToken'];

    $url = 'https://api.twitter.com/2/tweets';

    $headers = [
        'Authorization: Bearer ' . $accessToken,
        'Content-Type: application/json'
    ];

    $postData = [
        'text' => $tweet,
        'media' => [
            'media_ids' => [$mediaId],
        ],
    ];

    $ch = curl_init($url);
    curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_POST, true);
    curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($postData));

    $response = curl_exec($ch);
    $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
    curl_close($ch);

    echo $response;

Studio準子ワンピース水着

Twitter API PHPでXに画像付きポスト

Studio準子
ワンピース水着