I have a PWA
application which needs user authentication via Facebook/OAuth
.
The problem is that the OAuth
mechanism works in every circumstances but iPhone/Standalone
.
I need to find out some way to make a PWA
application works with Facebook/OAuth
on iPhone
. Is it possible? Yes
/No
?
I created a sample project:
https://github.com/napolev/pwa-oauth-login
based on the article:
https://medium.com/@jonnykalambay/progressive-web-apps-with-oauth-dont-repeat-my-mistake-16a4063ce113
For simplicity, on this sample project, I replaced the Facebook/OAuth
mechanism with a simple Custom/OAuth
mechanism.
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>
If I connect my Mac
to my iPhone
and do Remote Debugging
, I can see that when the method above: window.close();
gets called, it throws the following warning, which makes me feel very pesimistic about my possibilities:
Can't close the window since it was not opened by JavaScript
About the call: window.opener.postMessage(...)
that's another story and right now I don't have enough information about why is not sending
the token to the opener window. Probably it is because a similar issue as with: window.close();
.
I did a series of experiments and all of them came out fine, but the case: iPhone/Standalone
which failed because, even though a shorcut is added
to the home screen successfully and when you click it the app is opened properly without address bar, when the user clicks
the button: Start OAuth flow
a new window is opened, this time with an address bar (github.io
). Then, when the user clicks
the link: [APP-CALLBACK]
, the user is redirected to a the app callback url but this window doesn't send back the token to the opener
window and also it doesn't get closed. If I do this experiment on Android/Standalone
, this works fine. On top of that, on the same
iPhone
with Safari
(but not standalone) it works properly. The only problem I'm facing is on iPhone/Standalone
as you can see
on the following animated image.
Please, check the Experiments
section below for more details.
$ git clone https://github.com/napolev/pwa-oauth-login
$ cd pwa-oauth-login
$ npm i
$ npm run start
On your iPhone
(another device on the same network), go to:
http://[YOUR-SERVER-IP-ADDRESS]:4000
Android / Google Chrome - Click on the highlighted option to install the app as standalone.
iPhone / Safari - Click on the highlighted icons to install the app as standalone.
1- 2018-11-24 00:10 GMT
. On this commit, the OAuth
flow behaves as follows:
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 !!!
Remove the manifest when loading the application on an iOS device as discussed here.
var iOS = !!navigator.platform && /i(Phone|Pad|Pod)/.test(navigator.platform);
if (iOS) {
document.querySelector('link[rel="manifest"]').setAttribute("rel", "no-on-ios");
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With