BubbleでX Loginを実装する

背景

XのAPIの度重なる仕様変更により、Bubble公式のTwitterプラグインのログイン機能が、以下の画像のようなエラーメッセージが出て、正常に機能しない場合があるようです。

Error connecting to Twitter: {"errors": [{"message":"You currently have access to subset of Twitter API v2 endpoints and limited v1.1 endpoints (e.g. media poist, oauth) only. If you need access to this endpoint, you may need a different access level. You can learn more here: https://developer.twitter.com/en/portal/product","code":453}]}

一見、XのDeveloper Portalでの設定がミスってるのかなと考えますが、Bubble Forum > Unable to login using Twitter pluginでも話されているように、恐らくBubble公式のTwitter PluginがXのAPIの仕様変更に追いついていないためだと思われます。
また、何人かがサポートに問い合わせたところ、修正の目処は立っていないようです。

そこで、自分でX Login用のprivate pluginを作って対応することにしました。

実装方法

1. プラグインページで、プラグインを新規作成します。
   
2. In Plugin > General で、プラグインの名前などの情報を入力します。
   
3. In Plugin > API calls で、以下のように設定します。
   
   以下はコピペしやすいように、上記画像のそれぞれのテキストを抽出したものです。

   - API Name: X
   - Authentication: OAuth2 User-Agent Flow
   - App ID: ***
   - App Secret: ***
   - Scope: tweet.read users.read
   - Authentication goes in the header: True
   - Header key: Authorization: Bearer
   - Token is returned as querystring: False
   - Requesting an access token uses Basic Auth: True
   - Add access_type=offline (Google APIs): False
   - Login dialog redirect: https://twitter.com/i/oauth2/authorize?code_challenge=challenge&code_challenge_method=plain
   - Access token endpoint: https://api.twitter.com/2/oauth2/token?code_verifier=challenge
   - User profile endpoint: https://api.twitter.com/2/users/me
   - User ID key path: data.id
   - User email key path:
   - Name: get me
     - Use as: Action
     - Data type: JSON
     - GET: https://api.twitter.com/2/users/me?user.fields=id,name,username,profile_image_url,description
     - API documentation link: https://developer.twitter.com/en/docs/twitter-api/users/lookup/api-reference/get-users-me  # see also: https://developer.twitter.com/en/docs/twitter-api/users/lookup/api-reference/get-users-me
     - Include errors in response and allow workflow actions to continue: False
     - Capture response headers: False
   

   get me の URL (https://api.twitter.com/2/users/me?user.fields=id,name,username,profile_image_url,description) の箇所は、Twitter API v2 > GET /2/users/me の Response fields を参照し、取得したいプロパティを適宜変更してください。
4. Plugin > Settings で、使用するアプリを認可します。
   
5. あとはBubble公式のTwitterプラグイン同様に使用します。(参考: 【Bubble】Twitterログインの実装方法)
6. 補足
   Bubble公式のTwitterプラグインは画像のようにNameやHandleなどが保持されていますが、
   
   今回の実装ではBubbleの「OAuth2 User-Agent Flow」の仕様上、Current Userの選択肢にはIdとEmailしか表示されません。(もっと言うと、TwitterのAPIの仕様上、このemailはnull)
   
   ですので、例えば以下の画像のように、ログイン時に「get me」を叩いて、それをUser情報と紐づけるなどをするといいです。
   

注意点

code_challengeを固定値で設定しています。

X API は 「OAuth 2.0 Authorization Code Flow with PKCE」 認証方式をサポートしています。
リクエストごとにランダムなcode_challengeを設定するようにとの記載があります。(参照: OAuth 2.0 Authorization Code Flow with PKCE | Docs | Twitter Developer Platform)
PKCEは元々はモバイルアプリで推奨されていたようですが、OAuth 2.0 Security Best Current Practiceには、現在は全てのクライアントで推奨されるとの記載があります。(注意: このドキュメントは Active Internet-Draft であり、 RFCではありません。)
調べたところ、Bubbleの「OAuth2 User-Agent Flow」はPKCEをサポートしていないようです。
PKCEサポートを実装したい場合、「Signup/login with a social network」アクションは使用できないようです。
代わりに、認証と認可のフローの各要素を「None or self-handled」を使用して実装するプラグインを作成し、Bubbleアプリのワークフローに組み合わせて認証と認可のフローを構築する必要があります。
この場合、認証後、一時的なパスワードを毎回割り当て、メールとパスワードでのログインを実装する必要があるようです。
(参照: LINE ログイン v2.1 を完全網羅！メールアドレスも取得できる LINE LOGIN PRO プラグインを公開！ - ノーコード ラボ)

さいごに

急いで書いたので多々分かりづらいところがあると思います。
詰まったところなどあれば、コメントいただければ追記いたします。