Progressive Web App - OAuth Login - Funktioniert nicht auf dem iPhone

PWA OAuth-Login

Problem:

Ich habe eine PWA-Anwendung, die eine Benutzerauthentifizierung über Facebook/OAuth..__ erfordert. Das Problem ist, dass der OAuth-Mechanismus unter allen Umständen funktioniert, außer iPhone/Standalone.

Ich muss herausfinden, wie eine PWA-Anwendung mit Facebook/OAuth auf iPhone funktioniert. Ist es möglich? YesNo?

Beispielprojekt:

Ich habe ein Beispielprojekt erstellt:

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

basierend auf dem Artikel:

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

_/Zur Vereinfachung habe ich in diesem Beispielprojekt den Mechanismus Facebook/OAuth durch einen einfachen Mechanismus Custom/OAuth ersetzt.

Code-Vorschau:

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>

Wenn ich mein Mac mit meinem iPhone verbinde und Remote Debugging mache, kann ich sehen, dass, wenn die Methode oben aufgerufen wird: window.close();, die folgende Warnung ausgegeben wird, was mich sehr pesimistisch bezüglich meiner Möglichkeiten macht:

Das Fenster kann nicht geschlossen werden, da es nicht von JavaScript geöffnet wurde

Über den Aufruf: window.opener.postMessage(...) ist eine andere Geschichte und im Moment habe ich nicht genügend Informationen darüber, warum Das Token nicht an das Öffnerfenster gesendet wird. Wahrscheinlich liegt es an einem ähnlichen Problem wie bei: window.close();.

Highlights:

Ich habe eine Reihe von Experimenten gemacht und alle waren gut, aber der Fall: iPhone/Standalone was fehlgeschlagen ist, obwohl ein Shorcut hinzugefügt wurde erfolgreich auf dem Startbildschirm angezeigt wird und wenn Sie darauf klicken, wird die App ohne Adressleiste ordnungsgemäß geöffnet Wenn der Benutzer auf .__ klickt, wird die Schaltfläche: Start OAuth flow ein neues Fenster geöffnet, diesmal mit einer Adressleiste (github.io). Wenn der Benutzer auf Auf den Link: [APP-CALLBACK] klickt, wird der Benutzer zu einer App-Rückruf-URL umgeleitet, dieses Fenster sendet jedoch das Token nicht an das Öffnerfenster . Außerdem wird es nicht geschlossen. Wenn ich dieses Experiment mit Android/Standalone mache, funktioniert das gut. Darüber hinaus funktioniert es auf demselben iPhone mit Safari (aber nicht eigenständig) einwandfrei. Das einzige Problem, dem ich gegenüberstehe, ist iPhone/Standalone, wie Sie Auf dem folgenden animierten Bild sehen können.

Bitte überprüfen Sie den Abschnitt Experiments für weitere Details.

Projekt-Download:

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

Prüfung:

Gehen Sie auf Ihrem iPhone (einem anderen Gerät im selben Netzwerk) zu:

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

Als Standalone installieren:

Android/Google Chrome - Klicken Sie auf die hervorgehobene Option, um die App als Standalone zu installieren.

iPhone/Safari - Klicken Sie auf die hervorgehobenen Symbole, um die App als Standalone zu installieren.

Experimente:

1- 2018-11-24 00:10 GMT. Bei diesem Commit verhält sich der OAuth-Fluss wie folgt:

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 !!!