web-dev-qa-db-fra.com

Progressive Web App - Connexion OAuth - Ne fonctionne pas sur iPhone

Connexion PWA OAuth

Problème:

J'ai une application PWA qui nécessite une authentification de l'utilisateur via Facebook/OAuth. Le problème est que le mécanisme OAuth fonctionne dans toutes les circonstances, sauf iPhone/Standalone.

Je dois trouver un moyen de faire en sorte qu'une application PWA fonctionne avec Facebook/OAuth sur iPhone. C'est possible? YesNo?

Exemple de projet:

J'ai créé un exemple de projet:

https://github.com/napolev/pwa-oauth-login

basé sur l'article:

https://medium.com/@jonnykalambay/progressive-web-apps-with-oauth-dont-repeat-my-mistake-16a4063ce113

_/Par souci de simplicité, sur cet exemple de projet, j'ai remplacé le mécanisme Facebook/OAuth par un mécanisme simple Custom/OAuth.

Aperçu du code:

index.html

<script>
...
window.open(
    url_oauth + '?url_callback=' + encodeURIComponent(url_callback),
    'Login Flow',
    'width=350,height=250'
);
...
window.addEventListener('message', function (e) {
    token.innerText = e.data.token;
})
...
</script>
...
<div>
    Token: <span id="token">...</span>
</div>

callback.html

<script type="text/javascript">
// redirected to this page from the OAuth page
...
var data = {
    token: ...,
};
window.opener.postMessage(data, ...);
window.close();
...
</script>

Si je connecte ma Mac à ma iPhone et fais Remote Debugging, je peux voir que lorsque la méthode ci-dessus: window.close(); est appelée, le message d'avertissement suivant est émis, ce qui me rend très pesimiste quant à mes possibilités:

Impossible de fermer la fenêtre car elle n'a pas été ouverte par JavaScript

À propos de l'appel: window.opener.postMessage(...) c'est une autre histoire et je n'ai pas assez d'informations sur la raison pour laquelle n'envoie pas le jeton À la fenêtre d'ouverture. C'est probablement à cause d'un problème similaire à celui-ci: window.close();.

Points forts:

J'ai fait une série d'expériences et toutes se sont bien déroulées, mais le cas: iPhone/Standalone a échoué car, même si un raccourci clavier est ajoutéà l'écran d'accueil, et lorsque vous cliquez dessus, l'application s'ouvre correctement sans barre d'adresse. , lorsque l'utilisateur clique sur le bouton: Start OAuth flow une nouvelle fenêtre s'ouvre, cette fois avec une barre d'adresse (github.io). Ensuite, lorsque l'utilisateur clique sur le lien : [APP-CALLBACK], l'utilisateur est redirigé vers l'URL de rappel de l'application, mais cette fenêtre ne renvoie pas le jeton à la fenêtre d'ouverture Si je fais cette expérience sur Android/Standalone, cela fonctionne bien. En plus de cela, sur le même iPhone avec Safari (mais pas autonome), il fonctionne correctement. Le seul problème auquel je suis confronté est sur iPhone/Standalone comme vous pouvez le voir .__ sur l'image animée suivante.

Veuillez vérifier la section Experiments ci-dessous pour plus de détails.

screenshot

Téléchargement du projet:

$ git clone https://github.com/napolev/pwa-oauth-login
$ cd pwa-oauth-login
$ npm i
$ npm run start

Tester:

Sur votre iPhone (un autre périphérique sur le même réseau), accédez à:

http://[YOUR-SERVER-IP-ADDRESS]:4000

Installation en autonome:

Android/Google Chrome - Cliquez sur l'option en surbrillance pour installer l'application de manière autonome.

screenshot

iPhone/Safari - Cliquez sur les icônes en surbrillance pour installer l'application de manière autonome.

screenshot

Expériences:

1- 2018-11-24 00:10 GMT. Sur ce commit, le flux OAuth se comporte comme suit:

Windows + Chrome → SUCCESS
Windows + Firefox → SUCCESS
Windows + Edge → SUCCESS

Android + Chrome → SUCCESS
Android + Standalone → SUCCESS

Mac + Chrome → SUCCESS
Mac + Safari → SUCCESS

iPhone + Chrome → SUCCESS
iPhone + Safari → SUCCESS
iPhone + Standalone → !!! FAILURE !!!
javascriptiosiphoneoauthprogressive-web-apps
4
davidesp

Qu'en est-il de l'utilisation d'un proxy côté serveur, de sorte que le PWA ne quitte jamais son champ d'application et que le serveur fonctionne avec tout le travail OAuth en arrière-plan?

https://medium.com/@madumalt/oauth2-proxy-for-single-page-applications-8f01fd5fdd52

1
vrtjason

Supprimez le manifeste lors du chargement de l'application sur un périphérique iOS, comme indiqué ici.

var iOS = !!navigator.platform && /i(Phone|Pad|Pod)/.test(navigator.platform);
if (iOS) {
    document.querySelector('link[rel="manifest"]').setAttribute("rel", "no-on-ios");
}
0
Josh LaMar