OAuth2対応したPWAをiOSでホーム画面に追加すると認証が厳しい
概要
- 社内アプリをPWAで構築したときのはなし
- 社内の諸々はGoogleアカウントで管理しているので、認証はGoogleのOAuth2を使用
- PWAはNuxt.jsを使って作成し、APIはPHPのLaravel（社内サイトがLaravelを使ってたので流用）を使って作成
- Google OAuth 2.0 認証を使用
結論（感想）
- Nuxt.jsを使うことで、単純なPWA構築はSPAの開発経験者であればいける（キャッシュ機構、バックグラウンド実行、オンラインとオフラインの切替時の制御とか、この辺のナレッジを溜めることでPWA経験者としての優位性が出てくると思う）
- OAuth2を使用する場合、認証画面を開くときに単純なリダイレクト（ブラウザの別タブで表示される）にするよりかは、window.openで認証画面を開き、認証成功時にwindowを自動で閉じるような流れにするほうが、UI/UX的にいい感じな気がする
- OAuth2の認証を使用すると、Androidでは想像通りの動きでいける。
iOSではSafariで動かしているときにはAndroidと同様で問題ないが、ホーム画面に追加してPWAアプリとして起動するとOAuth2の認証が以下の理由で厳しい。 - 以下のfirebaseのGitHubでも同様のissueが上がっているので、もう少し様子見していこうと思う github.com
- 何か迂回策とかあれば教えてほしいです！
Google OAuth2.0のざっくりとしたフロー
- PHPでログイン状態を確認して未ログイン状態であれば、Googleアカウントのログイン画面へリダイレクト
- Googleアカウントで認証後、コールバックURLとして設定した自分のサイトへリダイレクトされる
- 自分のサイト内で、認証情報などを取得して、DBなりCookieなりに保存する
Androidの場合（ケース1）
- 「ホーム画面に追加」したPWAの処理について
- PWAで用意した認証ボタンをクリックしたときに、API側でGoogle認証画面へリダイレクト
- PWAとは別に、通常のChromeブラウザで別タブが開かれて、Google認証画面が表示される
- Chromeブラウザ上で認証したときに、Cookieに認証情報登録
- PWAに戻ると、（同一ドメインで構築の場合）Chromeで登録した認証情報にアクセスできるので、それを使い認証が必要な機能の使用が可能となる
Androidの場合（ケース2）
- Googleの認証画面へリダイレクトするAPI呼び出しをするときに、window.openを使用する
- PWA上でwindowがフルサイズで開き、Google認証画面が表示される
- ケース1とほぼ同じで、認証後はその情報を使い認証が必要な機能の使用が可能となる
- ケース1よりも良い点としては、認証後のタイミングをpostMessageなどを使用することでイベント検知できるので、認証完了したときにwindowを自動で閉じて、認証後の初期ページに遷移など制御をすることが可能
iOS safariの場合
- 「 ホーム画面に追加」したPWAを使用して検証
- PWAからOAuth2を使用するためにGoogle認証画面にリダイレクトすると、iOS safariの別タブとして起動される（window.openを使用してもiOS safariが起動される）
- Androidでは、PWAとChromeブラウザでは、同一ドメインのCookieであればお互い参照することが可能だったが、iOSのPWAとsafariではお互いのCookieにはアクセスできないような制御となっている
- iOSのPWAでは、アプリが起動中でもメインで動いていない場合には、バックグラウンドでの実行ができないため、iOS safariからpostMessageを使って認証後情報を連携しようとしてもできない
- 上記理由から、現時点ではiOSでOAuth2を使いPWAの構築は厳しそう
- もちろん、ホーム画面に追加せず、そのままsafari上ではOAuth2を使った制御も可能なため、解決方法が見つかるまではそれで進めたい
