У меня есть приложение Ionic 2 ("native"), которое также работает в браузере как для мобильных устройств, так и для настольных браузеров. Это приложение обеспечивает аутентификацию через Instagram, Google, Facebook и Twitter. На стороне API это обрабатывается hapi.js
и плагином bell
.
Теперь я занимаюсь проблемой аутентификации на Instagram, когда делаю это в мобильном браузере.
Когда это приложение работает в браузере вместо того, чтобы полагаться на предоставленные Ionic механизмы auth, мы реализуем резервные копии "браузера", чтобы сделать это.
У нас не было серьезных проблем с какой-либо из реализаций, кроме Instagram, которая ранее работала нормально.
У нас есть этот код, который должен открыть новое окно (вкладка в браузере), чтобы иметь дело с страницей входа в социальную сеть, и когда мы вернем токен аутентификации, затем приступаем к закрытию вкладки и аутентификации пользователя в приложении.
На стороне приложения обработка этого переключателя табуляции и поведения связи выглядит примерно так:
private requestToken(tokenEndpoint, resolve, reject) {
let messageReceived = false;
let win = window.open(this.globals.BASE_URL + tokenEndpoint,
'_blank', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=500, height=300');
// Await auth message
window.onmessage = (e) => {
let credentials;
messageReceived = true;
try {
credentials = JSON.parse(e.data);
}
catch (error) {
credentials = e.data;
}
return credentials ? resolve(credentials) : reject();
};
let interval = window.setInterval(() => {
try {
// win is already null after closing first tab
if (win == null || win.closed) {
window.clearInterval(interval);
if (!messageReceived) {
reject();
}
}
}
catch (e) { }
}, 1000);
}
Мой API вернет необходимые данные в интерфейс:
<script>window.opener.postMessage('{0}', '*');window.close();</script>
где {0}
- мои обязательные данные.
Для любой другой социальной сети это откроет новую вкладку с адресом about:blank
и затем изменится на правильный url
для ввода имени пользователя/пароля. Когда это будет сделано, сервер отбросит этот маленький скрипт, и телефон закрывает вкладку, передавая данные обратно в приложение. Он работает безупречно.
Для Instagram поведение отличается. Откроется новая вкладка, она немедленно закроется, и появится новая, где я верну свои данные. Проблема в том, что к моменту, когда сервер вернется со сценарием, window.opener
равно null, и ссылка на исходную страницу потеряна, что мешает мне вернуть данные auth.
Как я могу это преодолеть? Как заставить исходную вкладку не закрываться, а вести себя как другие и просто перейти на страницу входа в IG? Отправляет ли IG ответ 301 или 302? Если да, то я до сих пор не смог его поймать.
Для тех, кто оказался здесь, решения заключались в том, чтобы использовать window.parent.parent.postMessage()
а не полагаться на window.opener.postMessage()