web-dev-qa-db-ja.com

GoogleへのリダイレクトOAuthプログレッシブWebアプリのフロー

私はReactとNext.jsを使用して、現在PWAサポートを追加しているアプリに取り組んでいます。

ユーザーはGoogle OAuthフローからアプリにログインします。元々はポップアップウィンドウを使用するJSクライアントを使用していましたが、PWAでエラーが発生しました。現在使用しています通常のOAuth=ユーザーをGoogleのOAuth URL。

これはブラウザで正常に機能します。 iOSのスタンドアロンPWAでは、OAuthページを新しいSafariウィンドウで開きます。これは、OAuthフローがSafariで実行され、エンドユーザーは、スタンドアロンのPWAではなく、Safariのアプリを使用します。

私はこの方法を使用してリダイレクトしています：

export function setHref(newLocation: string) {
  window.location.href = newLocation;
}

これは、PWAでリダイレクトする際にポップアップを回避するために誰もが推奨する方法であるようにも見えます。これは最近変更されましたか？または、スタンドアロンのプログレッシブWebアプリ内でリダイレクト/ OAuthフローを実行する別の方法はありますか？

javascriptoauthgoogle-oauthprogressive-web-apps
15
Jakemmarsh

IOSのサファリスタンドアロンWebアプリでoauthリダイレクトの問題を解決する回避策があります。

問題はマニフェストメタタグです。webkit（safari）は古い仕様で実装しているようです（Chromiumでも同じ問題があり、最近のバージョンで修正されています）。

GoogleのPWACompat Javascriptを変更して回避策を作成しました：

https://github.com/GoogleChromeLabs/pwacompat/blob/master/pwacompat.js

PWAcompat jsは、ホームアイコンとスプラッシュスクリーンを備えたスタンドアロンWebアプリを作成するために、適切なhtmlメタタグを生成するのに便利です。

Index.htmlのように、メタタグの名前を識別子で置き換えることにより、PwaCompatスクリプトと「マニフェスト」メタタグで小さな「ハッキング」を行う必要があります。

<link rel="pwa-setup" href="manifest.json" >
<script async src="js/pwacompat.js"></script>

manifest.jsonには、Webアプリの名前、アイコン、スタイリングを含む標準のmanifest.json宣言が含まれています。

js/pwacompat.jsには、Googleからのpwacompat.jsのコピーが含まれていますが、この小さな変更（36行目）があります。

変化する ：

const manifestEl = document.head.querySelector('link[rel="manifest"]');

によって

const manifestEl = document.head.querySelector('link[rel="pwa-setup"]');

ここで、pwa-setupはメタタグに配置する名前で、manifest.jsonが解釈され、同じスタンドアロンコンテキストでoauthリダイレクトされますか????

16
Valvert

今のところ、良い解決策は pwacompat でハックすることです。ただし、Androidマニフェストrel属性を「pwa-setup」に変更してもwebapp要件に準拠しないため、ホームへのインストールポップアップは表示されません。

<link rel="pwa-setup" href="manifest.json" >
<script async src="js/pwacompat.js"></script>

変更された行 ＃36

const manifestEl = document.head.querySelector('link[rel="pwa-setup"]');

より良い解決策は、webappがiOSまたはAndroidでレンダリングされているかどうかを識別し、「ランタイム」でrel属性を変更することです

<link rel="manifest" href="manifest.json">
<link rel="pwa-setup" href="manifest.json">
<script src="pwacompat.js"></script>
<script>
   var iOS = !!navigator.platform && /iPhone|iPod/.test(navigator.platform);
   if(iOS) {
      document.querySelector('link[rel="manifest"]').setAttribute("rel", "no-on-ios");
   }
</script>
6
Lester

@Lesterの回答と @ Roysh を組み合わせて、iOS上でよりPWAを置き換えられるようにしました。マニフェストを失ったため、デフォルト名としてタイトルを使用し、マニフェストのstart_urlの代わりに現在のパスを開きます。

<link rel="manifest" href="manifest.webmanifest">
<script>
  if (!!navigator.platform && /iP(?:hone|ad|od)/.test(navigator.platform)) {
    document.querySelector(`link[rel="manifest"]`).setAttribute(`rel`, `no-ios`);
    document.title = `AppName`; // default app name | simulate short_name
    if (`standalone` in window.navigator && window.navigator.standalone && sessionStorage.getItem(`iOS-redirect`) === null) {
      sessionStorage.setItem(`iOS-redirect`, ``);
      window.location = `/`; // simulate start_url
    }
  }
</script>
1
hisoft