🌐

LINE, Facebook, Instagramなどの内部ブラウザ表示・WebViewで表示した際のAuth0ログイン・エラーについて

まさぴょん

2023/12/30に公開

こんにちは、AIQ株式会社のフロントエンドエンジニアのまさぴょんです！
今回は、LINE, Facebook, Instagramなどの内部ブラウザ表示・WebViewで表示した際のAuth0ログイン・エラーについて、解説します。

LINE以外でも、Auth0ログイン・エラーというトラップ

以前の記事で、LINEの内部ブラウザだと、Auth0のGoogleログイン機能がエラーになる事件が起きたことと、その対応内容を書きました。

それから数日後、今度は、Instagramの内部ブラウザでもAuth0のGoogleログイン機能がエラーになる事件が起きたとの話が。。。😇

Auth0のGoogleログイン機能を使って、Loginしようとすると、
「アクセスをブロックしました。xxxxxのリクエストはGoogleのポリシーに準拠していません」 というエラーが発生するとのこと。

LINE対応で解決と思っていた矢先に、Instagramでも上記のエラーが発生したので、これは、LINE, Instagramだけの問題じゃないかも、と思い調査を開始しました。

結論： Google OAuthは、ポリシーによって、Web Viewでは機能しない。

調査を進めると「Google OAuthは、ポリシーによって、Web View(ネイティブアプリの内部ブラウザ)では機能しない」とのこと。
まじっすか、Googleさん。。。😇

we will no longer allow OAuth requests to Google in embedded browsers known as “web-views”, such as the WebView UI element on Android and UIWebView/WKWebView on iOS, and equivalents on Windows and OS X.
引用元：Modernizing OAuth interactions in Native Apps for Better Usability and Security

つまり、Webアプリで、Auth0のGoogleログイン機能を実装している場合は、スマホアプリの内部ブラウザから、Googleログインをしようとすると、基本的にエラーになるってこと？
(それは、ぴえんすぐるでしょ。。。🥺)

解決策は、開発者にNative App内で、Chrome Custom Tabでの実装を依頼する？

Google OAuth does not work in embedded web views per policy.
You should reach out to the app developer to recommend they use one of the alternatives recommended like Chrome Custom Tabs.
引用元：How can I log in using Google OAuth in the TikTok in-app browser?

Web開発者だから、Nativeアプリのことは詳しくないが、Chrome Custom Tabの実装じゃないとこの問題は、解決できないのか？
(有識者に教えていただきたい。。。)

そもそも、WebViewとは？

ここまで、あたりまえに「WebView（ウェブビュー）」というWordを使っていましたが、私と同じようなWeb Developerには、聞き馴染みがないはずなので、ここで説明しておきます。

スマホApp内ブラウザからAuth0のGoogleログインを実機でテスト

エラーはしっかりと自分の目で確かめる必要があるので、次の4つのアプリ内ブラウザ(WebView)からAuth0のGoogle連携ログインを実機でテストしてみました。

LINE
Instagram
Facebook
X(旧:Twitter)

本日(2023年12月30日)、確認したところ、Auth0のGoogle連携ログイン機能が動作したのは、X(旧:Twitter)だけでした。。。🥺

LINE, Instagram, Facebook のアプリ内ブラウザ(WebView)では 「アクセスをブロックしました。xxxxxのリクエストはGoogleのポリシーに準拠していません」 というエラーが発生
X(旧:Twitter)だと、Auth0のGoogleログイン成功！
- X(旧:Twitter)は、対応してたんだ、と感心しました👀✨

主要なアプリ内ブラウザのUserAgent

2021年版主要なアプリ内ブラウザのUserAgentを調べてみた & 判定を実装してみたから、主要なアプリ内ブラウザのUserAgentの情報を引用します。

iOSのアプリ内ブラウザのUserAgent

Twitter, Slack, Discordは、Safariと同じUserAgentなので、判別が不可能。
Chrome, Facebook, Instagram, LINEの判定は、UserAgentで判別できる。

# Safari
Mozilla/5.0 (iPhone; CPU iPhone OS 14_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.1 Mobile/15E148 Safari/604.1

# Chrome
Mozilla/5.0 (iPhone; CPU iPhone OS 14_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/91.0.4472.80 Mobile/15E148 Safari/604.1

# Twitter
Mozilla/5.0 (iPhone; CPU iPhone OS 14_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.1 Mobile/15E148 Safari/604.1

# Facebook
Mozilla/5.0 (iPhone; CPU iPhone OS 14_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 [FBAN/FBIOS;FBDV/iPhone13,3;FBMD/iPhone;FBSN/iOS;FBSV/14.5;FBSS/3;FBID/phone;FBLC/ja_JP;FBOP/5]

# Instagram
Mozilla/5.0 (iPhone; CPU iPhone OS 14_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 Instagram 193.0.0.29.121 (iPhone13,3; iOS 14_5; ja_JP; ja-JP; scale=3.00; 1170x2532; 299401192) NW/3

# LINE
Mozilla/5.0 (iPhone; CPU iPhone OS 14_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 Safari Line/11.10.0

# Slack
Mozilla/5.0 (iPhone; CPU iPhone OS 14_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.1 Mobile/15E148 Safari/604.1

# Discord
Mozilla/5.0 (iPhone; CPU iPhone OS 14_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.1 Mobile/15E148 Safari/604.1

Androidのアプリ内ブラウザのUserAgent

iOSと同様で、Twitter, Slack, Discordは、Safariと同じUserAgentなので、判別が不可能。
Chrome, Facebook, Instagram, LINEの判定は、UserAgentで判別できる。

# Chrome
Mozilla/5.0 (Linux; Android 11; Pixel 4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.210 Mobile Safari/537.36

# Twitter
Mozilla/5.0 (Linux; Android 11; Pixel 4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.210 Mobile Safari/537.36

# Facebook
Mozilla/5.0 (Linux; Android 11; Pixel 4 Build/RQ2A.210405.005; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/90.0.4430.210 Mobile Safari/537.36 [FB_IAB/FB4A;FBAV/324.0.0.48.120;]

# Instagram
Mozilla/5.0 (Linux; Android 11; Pixel 4 Build/RQ2A.210405.005; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/90.0.4430.210 Mobile Safari/537.36 Instagram 193.0.0.45.120 Android (30/11; 440dpi; 1080x2236; Google/google; Pixel 4; flame; flame; ja_JP; 300078998)

# LINE
Mozilla/5.0 (Linux; Android 11; Pixel 4 Build/RQ2A.210405.005; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/90.0.4430.210 Mobile Safari/537.36 Line/11.10.2/IAB

# Slack
Mozilla/5.0 (Linux; Android 11; Pixel 4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.210 Mobile Safari/537.36

# Discord
Mozilla/5.0 (Linux; Android 11; Pixel 4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.210 Mobile Safari/537.36

LINEの内部Webブラウザで閲覧しているかどうかを確認する関数

/** LINE 専用の ブラウザで開いているかどうか？ を判定する */
const isLineWebBrowser = () => {
  /** User Agent 文字列 */
  const userAgent = navigator.userAgent;
  /** Line という文字列が含まれているかどうか? を判定する */
  const isLineWebOpen = /Line/i.test(userAgent);
  return isLineWebOpen;
};

Instagramの内部Webブラウザで閲覧しているかどうかを確認する関数

/** Instagram 専用の ブラウザで開いているかどうか？ を判定する */
const isInstagramWebBrowser = () => {
  /** User Agent 文字列 */
  const userAgent = navigator.userAgent
  /** Instagram という文字列が含まれているかどうか? を判定する */
  const isInstagramWebOpen = /Instagram/i.test(userAgent)
  // console.log('Insta 判定', isInstagramWebOpen)
  return isInstagramWebOpen
};

Facebookの内部Webブラウザで閲覧しているかどうかを確認する関数

/** Facebook 専用の ブラウザで開いているかどうか？ を判定する */
const isFacebookWebBrowser = () => {
  /** User Agent 文字列 */
  const userAgent = navigator.userAgent
  /** FB という文字列が含まれているかどうか? を判定する */
  const isFacebookWebOpen = /FB/i.test(userAgent)
  // console.log('FB 判定', isFacebookWebOpen)
  return isFacebookWebOpen
};

まとめ

今回のプロジェクトでは、LINE, Instagram, Facebook の内部Webブラウザで閲覧している場合は、通常のブラウザで閲覧するようにDialogを表示する処理を追加で対応することにしました。

個人で、Blogもやっています、よかったら見てみてください。

https://masanyon.com/

注意事項

この記事は、AIQ 株式会社の社員による個人の見解であり、所属する組織の公式見解ではありません。

求む、冒険者！

AIQ株式会社では、一緒に働いてくれるエンジニアを絶賛、募集しております🐱🐹✨

詳しくは、Wantedly (https://www.wantedly.com/companies/aiqlab)を見てみてください。

参考・引用

https://iridge.jp/blog/202303/33668/

AIQ Tech Blog (有志)Publication

AIQ 株式会社に所属するエンジニアが技術情報をお届けします。 ※ AIQ 株式会社社員による個人の見解であり、所属する組織の公式見解ではありません。 Wantedly: wantedly.com/companies/aiqlab