クエリパラメータとリダイレクトURIをURLエンコード

redirect_uriの値、コールバックURL、入れ子のパラメータを安全にエンコードして、認証やAPIリクエストの破損を防ぎます。

このガイドはURLエンコードを実践的に扱います。リダイレクトフロー、クエリパラメータ、scope値、URL全体をエンコードする場合と1要素だけをエンコードする場合の違いに焦点を当てます。

こんなときに使う
コールバックURL、入れ子のクエリ文字列、またはredirect_uriの値が繰り返し拒否されたり切り詰められたりする。
まず確認すること
URL全体をエンコードしたのか、パラメータ要素だけをエンコードしたのかを確認してください。その違いが壊れたリダイレクトの説明になることが多いです。
よくある落とし穴
スペース、プラス記号、アットマーク、疑問符はログでは無害に見えても、そのままコピーするとリクエストを壊しがちです。
使い方の例
redirect_uri の値をエンコードする
入れ子になったコールバックURLは、外側のリクエストにそのまま貼り付けるのではなく、パラメータ値としてエンコードする必要があります。
redirect_uri=https%3A%2F%2Fapp.example.com%2Fcallback%3Fnext%3D%252Fsettings
scope文字列をエンコード
OAuthのscope値にはスペースが含まれることが多く、確実に送るにはパーセントエンコードが必要です。
scope=read%3Ausers%20write%3Ausers
検索語やメール値を扱う
+、@、/、? のような文字は、正しい要素をエンコードできているかを見極める良い目印です。
email=dev%2Balerts%40example.com
コールバックを読みやすく保つ
公開中のツールでは一度に1つの値だけをエンコード/デコードできるので、リダイレクトログが読みづらいときに便利です。
https://app.example.com/callback?next=/settings
encodeURI vs encodeURIComponent

構造を保ったまま扱いたいURL全体にはencodeURIを使い、redirect_uri、state、検索クエリのような1つのパラメータ値にはencodeURIComponentを使います。

  • 多くの認証/APIバグは、encodeURIComponentが必要なのに予約文字を残してしまうことから起こります。
リクエスト全体ではなく値を適切にエンコードする

署名付きリクエスト、OAuthリダイレクト、入れ子URLはすべて、正しいレイヤーで正しい要素をエンコードすることが前提です。迷ったらまず値だけを切り出してテストしてください。

  • 問題がクエリ文字列ではなくリクエストボディにあるなら、JSON整形に切り替えてください。