web-dev-qa-db-fra.com

redirection vers le flux Google OAuth dans une application Web progressive

Je travaille sur une application utilisant React et Next.js, en ajoutant actuellement le support PWA.

Les utilisateurs se connectent à l'application via le flux Google OAuth. À l'origine, j'utilisais le client JS, qui utilisait une fenêtre contextuelle, mais cela entraînait des erreurs dans le PWA. J'utilise maintenant le flux OAuth normal en redirigeant l'utilisateur vers l'URL OAuth de Google.

Cela fonctionne bien dans le navigateur. Dans le PWA autonome sur iOS, il ouvre la page OAuth dans une nouvelle fenêtre Safari. Cela signifie que le flux OAuth est effectué dans Safari et que l'utilisateur reste à l'aide de l'application dans Safari plutôt que du PWA autonome.

Je redirige en utilisant cette méthode:

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

Cela semble même être la méthode que tout le monde recommande d'éviter les fenêtres publicitaires lors de la redirection dans votre PWA. Cela a-t-il changé récemment? Ou existe-t-il une autre méthode pour effectuer des redirections/flux OAuth dans une application Web progressive autonome?

javascriptoauthgoogle-oauthprogressive-web-apps
8
Jakemmarsh

J'ai une solution de contournement qui résout le problème de la redirection d'oauth sur l'application Web autonome ios safari. 

Le problème est la méta-tag manifeste, il semble que webkit (safari) l’ait implémentée avec une ancienne spécification (Chromium avait le même problème et l’a corrigé dans une version récente).

J'ai basé la solution de contournement en modifiant le code Google PWACompat de Google sur lequel vous pouvez obtenir:

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

PWAcompat js est utile pour générer les balises méta HTML appropriées, dans l’ordre d'avoir une application Web autonome avec des icônes de la maison et un écran de démarrage

Vous devez faire un petit "hack" sur le script PwaCompat et dans votre balise méta "manifest" en remplaçant le nom de la balise meta par tout identificateur, par exemple, dans votre index.html:

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

manifest.json contient votre déclaration standard manifest.json, avec le nom, les icônes et le style de votre application Web.

js/pwacompat.js, contient une copie de pwacompat.js de Google, avec cette petite modification (ligne 36):

Changement : 

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

par

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

où pwa-setup est le nom que vous placez sur la balise méta, et c’est comme ça que vous avez votre manifest.json interprété et la redirection oauth dans le même contexte autonome ????

13
Jorge Valvert

La bonne solution pour le moment est de le pirater à travers pwacompat . Mais sous Android, modifier l'attribut manifest rel en "pwa-setup" n'est pas conforme à la configuration requise pour une application Web. L'installation à la maison popup n'apparaît donc pas.

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

Ligne modifiée # 36

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

Une meilleure solution consiste à identifier si l'application Web est rendue sur ios ou Android, puis à modifier l'attribut rel dans "runtime".

<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>
4
Lester

J'ai combiné @Lester answer avec @Roysh et quelques autres pour le rendre plus remplaçable par le PWA sur iOS. Puisqu'il a perdu le manifeste, il utilisera title comme nom par défaut et ouvrira le chemin actuel au lieu de start_url à partir du manifeste.

<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