WebアプリでGoogleログインを利用するのは難しいかもしれない
January 30, 2022
「難しい」というのは実装が難しいということではなく、UX の観点から本当に採用すべきか考えた方が良いケースもあるという意味です。
なおこれは Web アプリに限った話なので、ネイティブアプリには関係がありません。
きっかけ #
Firebase を使用して作成したアプリ（以下「APP」とします。）にて、Google ログインや Facebook ログインを使用しています（Google や Facebook アカウントを使用して Firebase でユーザーを認証）。
iPhone ユーザがログインしようとするとまれにエラーになるという連絡があり、具体的には以下で再現されました。
- iPhone を使用します。
- Facebook アプリ上で APP の URL からアプリを開きます。
- Google ログインを行います。
そうすると、以下のエラーが iPhone 画面に表示されます。
承認エラー
エラー 403: disallowed_useragent
原因 #
原因は APP の実装でもなく、Firebase のバグでもなく、Google ログインの仕様が関係していました。
Google は特定のユーザエージェントからの Google ログインをセキュリティ上の理由から認めておらず、これに該当した場合に「403: disallowed_useragent」のエラーを返すようにしています。
この仕様変更について、公式が以下で説明しています。原文と公式による日本語訳です。
- Google Developers Blog: Modernizing OAuth interactions in Native Apps for Better Usability and Security
- Google Developers Japan: ネイティブ アプリの OAuth インタラクションを最新にしてユーザビリティとセキュリティを向上する
要約すると、今後 WebView（ウェブビュー）からの Google ログインは許可されなくなります、と言っています。
これが関係するのがアプリ内ブラウザです。
アプリ内ブラウザ #
Facebook、Twitter、Slack、LINE といったアプリでは、アプリ内で外部のページを開くことができます。このときアプリ内ブラウザが使用されています。
アプリ内ブラウザとして利用されるブラウザには種類があります。WebView（ウェブビュー）という埋め込みブラウザや、Android 端末公式の Chrome Custom Tab というブラウザ、iOS 端末公式の SFSafariViewController というブラウザなどです。
先の Google の説明ではこのうちウェブビューからのアクセスを不許可とするため、Chrome Custom Tab や SFSafariViewController を使用してください、ということになっています。
しかし例えば iOS の Facebook のアプリ内ブラウザにて使用されているのはウェブビューとなっており、その結果冒頭に記載したエラーの発生につながりました。
なお、Facebook アプリを例として説明していますが、この挙動はウェブビューを使用しているすべての環境で発生します。
対策 #
結論から述べると有効な対策はありません。
Facebook アプリで使用されるアプリ内ブラウザを指定するのは Facebook アプリの開発者ですので、そこに外部のものが関与する余地はありません。
アプリ内ブラウザの変更が不可能だとすると、次に考えられるのは自分のアプリの URL を開く際にはアプリ内ブラウザではなく Chrome や Safari といった標準ブラウザに遷移させるという方法です。
例外的に LINE アプリはこれが可能なようですが、基本的にこれに関してもこちら側が手出しできるものではありません。
参考：JavaScript - [web 開発] アプリ内ブラウザで開いた web サイトを、web 側の制御で外部ブラウザで開く方法はあるでしょうか｜ teratail
次に思いつくのは、Google ログインを騙す方法です。Google が何を持ってウェブビュー経由でのアクセスと判断しているかは不明ですが、ユーザーエージェントを見ているのだとすると、アクセスする際のユーザーエージェントをウェブビュー以外のものに偽装してしまえば、認証をブロックされなくなります。実現可能性はあるものの、この方法を実行に移すことはまずないでしょう。
ここまでで、ユーザに意識させないようにアプリ上で自動誘導をすることは不可能だということがわかりました。
開発者にできることは、Facebook アプリ上で開くのではなく Safari 等の外部ブラウザでアプリを開くようユーザに依頼することだけです。
ではいつそのメッセージを表示すれば良いでしょうか。ウェブビューでアプリが開かれた場合のみ、他のブラウザで開いて欲しい旨のメッセージを出すことができれば適切です。JavaScript にてユーザーエージェントを取得し、それがウェブビューであった場合のみメッセージを出すことを考えます。
しかし残念ながらユーザの使用しているブラウザを完全に見分ける方法はなく、MDN も推奨していません。
そうなると、こちらにできることは Google ログインを試みるすべてのユーザに対して、もしアプリ内ブラウザで開いているのならば外部ブラウザで開き直して欲しいと伝えるのみです。
補足：あなたの開発しているアプリがネイティブアプリの場合、アプリ内ブラウザに何を使用するかはあなたが決めることです。ウェブビューではないブラウザを使用すればこの問題は発生しません。
UX の観点から #
上記対策を取ったときに果たしてどれだけのユーザが指示に従ってくれるのでしょう。アプリが提供するサービスの魅力にもよりますが、試しに使ってみようという程度の気軽なユーザの場合、このメッセージを見て嫌気がさし離脱する可能性もあります。
Google ログインがもたらすメリットと、それを機能させるためにユーザに強いる負担およびそれがサービスにもたらすデメリットを考慮すると、Google ログインを利用しないという判断を下した方が合理的なケースもあり得ると思い、今回の記事を書きました。