みなさん、こんにちは！
TwitterからXに変わって1年以上経ち、最近ようやく「X」に慣れてきたところですが、皆様いかがでしょうか？
さて、X (Twitter) のAPIを使って認証する方法はいくつかありますが、
今回は、OAuth 2.0 Authorization Code Flow with PKCE 、OAuth 2.0のPKCEを使用した認可フローをBubbleで簡単にできるようなプラグインを作成しましたのでご紹介いたします！！
1. プラグイン概要
ノーコードラボでは、すでにTwitterTweetというプラグインをリリースしています。
こちらはOauth1.0aの認証となります。
個人アカウントにログインするのではなく、アプリを作成したアカウントにのみポストできます。
TwitterTweetについてはコチラ↓ blog.nocodelab.jp
それに対し、今回リリースしたプラグインでは、OAuth 2.0 Authorization Code Flow with PKCEのため、アプリ単位ではなく、個人のアカウントに対してログインしおよび個々のアカウントのデータ取得、ポストができるようになります。
※PKCE（ピクシー）とは、OAuth2.0の拡張仕様となります。
詳しく知りたい方はお調べいただくとして、
簡単に説明すると、認可コード横取り攻撃への対策を目的とし、OAuth2.0よりも安全に認証できる方法となります。
今回リリースしたプラグインは、２つあり、概要は以下の通りです。
X (Twitter) Login with PKCE ： ログイン、アクセストークンの取得、ユーザー情報取得を行うプラグイン ※有料となります
X (Twitter) Post with Token ： ポスト（X (Twitter) Login with PKCEで取得したトークンを利用）を行うプラグイン
デモアプリはコチラ↓です。実装については後述しています。
xplugin-sample-00.bubbleapps.io
それでは、各プラグインについて詳しく説明していきましょう。
1.1. X (Twitter) Login with PKCE
OAuth 2.0 Authorization Code Flow with PKCEを用いて、 X API v2を使用するためのアクセストークンを取得するのが主な目的のプラグインです。
SNS認証とは異なり、Xの認可を行うだけですが、Bubbleのログインとしても使い方によっては利用可能です（後述します）。
※現在の公式のTwitterプラグインは動いていないようですね。
このプラグインでは、以下のアクションを用意しています。
| アクション名 | 概要 |
|---|---|
| X - getRedirectURL | XにログインするためのURLを取得 |
| X - getAccessToken | X API v2を使用するためのアクセストークンを取得 |
| X - refreshToken | アクセストークンを再取得 |
| X - revokeToken | トークンを無効化 |
| X - getUserInfo | アクセストークン使用してアカウント情報を取得 |
次から各アクションの詳細を説明していきます。
1.1.1. X - getRedirectURL
Xが提供する認証用のURLを取得します。 このURLに遷移すると、Xの認証が行えます。1番初めに実行するアクションです。
| 名称 | 詳細 | |
|---|---|---|
| パラメータ | redirect_url | Xの認証用URLからリダイレクトするURLを設定します。 アクセストークンを取得する際にも同じ内容を設定します。 この値と同一の値をXのアプリに設定する必要があります。 |
| 戻り値 | auth_url | Xの認証を行うURL |
| code_verifier | アクセストークンを取得する際に必要なキー |
1.1.2. X - getAccessToken
X API v2を使用するためのアクセストークンを取得します。
| 名称 | 詳細 | |
|---|---|---|
| パラメータ | redirect_url | X - getRedirectURLで設定したパラメータ「redirect_url」と同じ値を設定してください。 |
| code | アクセストークンを取得する際に必要なキー X - getRedirectURLの戻り値「auth_url」のパラメータに「code」が付与されているので、その値を設定します。 |
|
| code_verifier | アクセストークンを取得する際に必要なキー X - getRedirectURLの戻り値「code_verifier」を設定します。 |
|
| 戻り値 | result | 処理結果：yes/no |
| error_message | エラーメッセージ。処理が成功した場合は空になります。 | |
| access_token | アクセストークン。X のAPIを利用するのに使用するトークンです。 | |
| refresh_token | リフレッシュトークン。アクセストークンを再発行するときに使用します。 |
1.1.3. X - refreshToken
リフレッシュトークンを利用してアクセストークンを再取得するアクションです。
アクセストークン、リフレッシュトークンは常に最新の値のみ有効ですのでご注意ください。
| 名称 | 詳細 | |
|---|---|---|
| パラメータ | refresh_token | リフレッシュトークン。最新のリフレッシュトークンを設定します。 |
| 戻り値 | result | 処理結果：yes/no |
| error_message | エラーメッセージ。処理が成功した場合は空になります。 | |
| access_token | アクセストークン。X のAPIを利用するのに使用するトークンです。有効期限内まで使用可能です。 | |
| refresh_token | リフレッシュトークン。アクセストークンを再発行するときに使用します。最新のリフレッシュトークンになります。 |
1.1.4. X - revokeToken
トークンを無効化します。 ログアウト時やトークンが不要になった時このアクションを実行し、破棄してください。
| 名称 | 詳細 | |
|---|---|---|
| パラメータ | token | アクセストークンまたはリフレッシュトークンを設定します。 |
| token_type | tokenに設定した値に合わせて、「access_token」または「refresh_token」を選択します。 | |
| 戻り値 | result | 処理結果：yes/no |
| error_message | エラーメッセージ。処理が成功した場合は空になります。 |
1.1.5. X - getUserInfo
アクセストークンを利用してユーザーのアカウント情報を取得します。
ちなみに、Xはメールアドレスを取得できるAPIはありませんので、メールアドレスは取得できません。
| 名称 | 詳細 | |
|---|---|---|
| パラメータ | access_token | X - getAccessToken、または X - refreshTokenで取得したアクセストークンを設定します。 |
| 戻り値 | result | 処理結果：yes/no |
| id | XのID | |
| name | Xの名前 | |
| username | Xのユーザー名 |
1.2. X (Twitter) Post with Token
X (Twitter) Login with PKCEプラグインで取得したアクセストークンを利用してXにポストするプラグインです。
先述しました「Twitter Tweet」プラグインもポストするプラグインですが、 固定アカウントにポストする場合は、こちらをお使いください。
また、「Twitter Tweet」では画像もポストできるようになっていましたが、
画像をアップロードするXのAPIがv2に対応していないため、現段階ではテキストのみのポストしかできませんので、ご了承ください。
※Xの公式では、画像アップロードのendpointは、[Coming Soon - 2024] と書かれているので、近い将来リリースされると思います。
→画像および動画のアップロードにも対応しました！ （2026/01/19 追記）
このプラグインでは、以下のアクションを用意しています。
| アクション名 | 概要 |
|---|---|
| X - Post | ポストを行います。 |
1.2.1.X - Post
ポストを行います。
| 名称 | 詳細 | |
|---|---|---|
| パラメータ | access_token | X - getAccessToken、または X - refreshTokenで取得したアクセストークンを設定します。 |
| message | ポストする内容です。 | |
| image_url | 画像または動画のURL。設定されている場合のみ、対象の画像／動画もポストします。（2025/01/19 追記） | |
| 戻り値 | result | 処理結果：yes/no |
| error_message | エラーメッセージ。処理が成功した場合は空になります。 |
2. 実際に実装してみよう
それでは、具体的に実装方法について説明します。
2.1. 前準備：X Developer Portal の設定
まずはX Developer PortalよりAPIが使えるように設定しましょう。
プロジェクトが未作成の場合は、こちら↓よりプロジェクトを作成し、アプリを作成してください。
https://developer.twitter.com/ja
以下はアプリ作成画面です。アプリ名を入力します。 ここでは「TestPluginAPP」としています。
API Key、API Key Secret、Bearer Token は今回は使用しませんが、自動で生成されます。
必要な場合は保存してください。
仮に後から必要となっても再発行可能です。
「App settings」ボタンを押下します。
※ここでのBearer Tokenは、登録したアプリに対しての認証のみです。本プラグインのアクセストークンとは異なります。
また、使用可能なAPIは閲覧のみで限られています。
アプリの設定画面が開かれますので、User authentication settingsの「Set up」ボタンを押下してください。
認証の設定を行います。 以下の設定を必ず行ってください。
- Type of App ： Web App, Automated App or Bot を選択
- App info - Callback URI / Redirect URL ： Xのログイン画面から遷移する先のURLを設定
X - RedirectURL、X - getAccessTokenアクションのパラメータ「redirect_url」に設定する同一の値を必ず設定してください。 - App info - Website URL ： アプリを使用するサイトのURLを設定
設定を行い、「Save」してください。 保存ができたら、以下の画面が表示されます。
ここで表示されている「Client ID」、「Client Secret」はOauth 2.0を使用するのに必要なキーです。 プラグインでも設定しますので、どちらも保存し（取り扱いは注意してください）、「Done」を押下します。
※仮に忘れてもこちらも再発行できます。
これでX側の設定は終わりました。
それでは早速具体的にプラグインの使い方について説明していきます！
2.2. ログイン処理を行おう
Xの認証を行い、そこからBubbleのログインを行い、ポストするアプリを作成します。
サンプルとして以下の画面を用意します。
| 画面名 | 詳細 |
|---|---|
| login | ログインを行います。 Login ボタンを用意しておきます。 |
| mypage | ログインした先のページです。Xにポストできるようにします。 |
User Dataに、以下の項目を追加します。
| 項目名 | 型 | 詳細 |
|---|---|---|
| code_verifier | text | アクセストークン取得時に必要なキー |
| X-id | text | XのId |
| X-name | text | Xの名称 |
| X-username | text | Xのユーザー名 |
| resresh_token | text | リフレッシュトークン |
大まかな流れとしては、以下のようになります。
- Xの認証URLを取得する
- 1で取得したURLに遷移する
- 2の遷移先でXにログインする（ここはBubbleの範囲外になります）
- 3でログイン後、自アプリに遷移される
- アクセストークンを取得する
- ユーザー情報を取得する
- 6で取得したIDより、BubbleのUserを生成し、ログインする
2.2.1. プラグインを設定しよう
X (Twitter) Login with PKCEプラグインをインストールし、 下図のように、前準備で取得した「ClientId」、「ClientSecret」をそれぞれ設定します。
2.2.2. ログイン画面を作成しよう
ログイン画面は、ここではTwitterからのログインのみとするため、単純にログインボタンのみの画面にしています。
ログインボタンを押下した際のワークフローです。
| Step | アクション | 詳細 |
|---|---|---|
| Step1 | X - getRedirectURL | パラメータのredirect_urlはX認証後に遷移したい画面を設定します。ここでは、login（自画面）を指定します。 |
| Step2 | Make changes to thing... | Userのcode_verifierに、Step1の戻り値「code_verifier」を設定します。アクセストークンを取得する際に必要なのでCurrent Userに保存しておきます。 |
| Step3 | Open an external website | Step1の戻り値「auth_url」を指定します。 |
Step3を実行すると以下のようなXの認証画面が出ます。
上記画面の「アプリにアクセスを許可」を押下した際、 X - getRedirectURLのパラメータに設定したredirect_urlに遷移します。
遷移先のURLは、以下のように指定したURLに「state」と「code」パラメータが付与されたURLになります。 この「code」パラメータは、アクセストークンを取得する際に必要な値となります。
【パラメータ：redirect_url】?state=xxxxxx&code=xxxxxx
次に、認証後遷移した際の処理を実装しましょう。
今回は、自画面に戻るので、login画面の「Page is loaded」イベント内でBubbleのログイン処理を行います。
| Step | アクション | 詳細 |
|---|---|---|
| Step1 | Set state | Get data from page URLよりURLから「code」パラメータを取得し、stateに設定します。 |
| Step2 | Terminate this workflow | Step1で設定した「code」がemptyの場合は、処理をここでやめます。 |
| Step3 | X - getAccessToken | アクセストークンを取得します。 redirect_urlは必ずX - getRedirectURLのパラメータと同じ値にします。 codeはStep1で設定した値 code_verifierはCurrent Userのcode_verifire（X - getRedirectURLの戻り値）を設定します。 |
| Step4 | X - getUserInfo | Xのアカウント情報を取得します。 Step3の戻り値「access_token」を設定します。 |
| Step5 | Create an acount for someone else | ユーザーのアカウントを生成します。 Xからはメールアドレスを取得できませんので、アカウントを作成するために、【Xのid】＋”@exsample.com” のように仮のメールアドレスを作成します。※念のため実在しないメールアドレスにしましょう。 Step4の情報で取得したデータをそれぞれ設定します。 Step3で取得したrefresh_tokenもUserに設定します。 |
| Step6 | Assign a temp password | ログインするために仮パスワードを発行します。 |
| Step7 | Log the user in | Step5で作成したユーザーのemailとStep6で生成したパスワードでログインを行います。 |
| Step8 | Go to page | ログイン後は「mypage」へ遷移します。 |
これで、Xの認証を利用してBubbleにログインできました。 従来のBubbleでのSNS認証とは異なり自分でユーザーを生成する必要があることをご注意ください。
ちなみに、Bubbleのログインは不要で、Xにポストしたい、ユーザー情報を取得したいだけでしたら、もちろんStep5以降は不要になります。
refresh_tokenは再度アクセストークンを取得する際に必要です。
アクセストークンは1回しか使用しないのであれば、Step5でCurrent Userに保存しておく必要はありません。
2.2.3. ポスト（ツイート）しよう
ログインができたので、次にポストをしてみましょう。
ポストは、「X (Twitter) Post with Token」プラグインになりますので、こちらをインストールしてください。
mypage画面には、以下のようにMultilineInput とポストボタンを配置しました。
ポストボタンを押下した際のワークフローです。
| Step | アクション | 詳細 |
|---|---|---|
| Step1 | X - refreshToken | アクセストークンを再発行します。 Current Userからrefresh_tokenを取得し、パラメータに設定します。 |
| Step2 | Make changes to thing... | Current Userのrefresh_tokenをStep1の戻り値のrefresh_tokenに更新します。 refresh_tokenは最新のみ有効となっているためです。 |
| Step3 | X - Post | ポストします。 access_tokenはStep1の戻り値のaccess_tokenを設定します。 messageにはMultilineInputのvalueを設定します。 image_urlには画像または動画のURLを設定します。（v1.1.0に更新したら表示されます）（2026/01/19 追記） |
これでポストまでできました！
※どのイベントもエラー処理は行っていませんので、適宜必要でしたらエラー処理を入れてください。
2.2.4. 注意事項
Xが発行するアクセストークンは2時間が有効期限になっています。
なので、アクセストークンを1度発行し、再度使用する際、2時間を超える可能性がある場合は、「X - refresh_token」 アクションから再発行してください。
refresh_tokenは無効にするまで有効になっています。
ログアウトする場合、refresh_tokenを無効にする処理を入れましょう。
無効にするアクションは、「X - revokeToken」で行えます。
また、取得したアクセストークンは、他のX API v2を利用できるようになります。 ただ、現在はプラグイン内で以下のスコープしか許可していないため、この範囲内のAPIのみ使用可能であることをご留意ください。
- tweet.read
- tweet.write
- users.read
- offline.access
- media.write （ v1.1.0より 2026/01/19 追記）
3. まとめ
PKCEを利用したXの認証ができるプラグインをご紹介しました！
OAuth1.0aの認証方法でポストを行うと、アプリの認証になるため、Xのアプリを作成したアカウントへのポストしかできませんでした。
今回の認証方法は、アカウント単位で認証され、各アカウントに対して操作が可能になります。
ぜひ一度お試しください！
ここまで読んでいただきありがとうございました！！
4.画像付きポストについて（2026/01/19 追記）
上述の中にも追記していますが、画像または動画付きポストもできるようになりました！！
「X (Twitter) Login with PKCE」、「X (Twitter) Post with Token」プラグインはどちらもv1.1.0以上に更新してください。 これで、画像または動画がポストできるようになります。
「X (Twitter) Post with Token」プラグインをv1.1.0に更新すると、下図のように「X - Post」アクションのプロパティに、「image_url」が追加されます。
この「image_url」にポストしたい画像または動画のURLを設定すると、画像または動画付きのポストになります。
ただし、画像、動画合わせて1つのみの添付となっておりますので、ご注意ください。
4.1. 画像をポスト（ツイート）しよう
実際にポストしてみましょう。
2.2.3.ポスト（ツイート）しよう の画面を変更します。
MultilineInput入力の下に、Picture Uploader を追加しました。
「ポスト」ボタンを押下したら、MultilineInputの入力内容と、Picture Uploaderにアップロードした画像をポストします。
「ポスト」ボタン押下時のStep3のアクション「X - Post」を修正します。
新しく追加されたプロパティ「image_url」に以下を設定します。
https: + 【PictureUploader's value 's URL】
※上図では、PictureUploader's valueがemptyではないときのみ設定するようにしています。
を設定します。必ずプロトコルも含めてください。
デモアプリにも追加していますので、そちらでもお試しください。 xplugin-sample-00.bubbleapps.io
