Facebook Можно ли получить данные пользователя и заполнить форму в iframe?

Я пытаюсь создать вкладку iframe для страницы Facebook.

На этой странице я загружаю iframe, который состоит из формы с другого домена/сайта.

Можно ли использовать javascript для запроса графического API для загрузки данных пользователя в эту загруженную форму iframe с использованием javascript, чтобы он отображался предварительно заполненным для пользователя?

Я знаю, что существует проблема междоменной безопасности. В этом случае предположим, что моя вкладка iframe теперь размещена в том же домене, что и загруженная форма iframe, будет ли это выполнимо сейчас?


javascript facebook iframe jquery facebook-iframe
person super9    schedule 23.05.2012    source источник
comment
Просто чтобы проверить, правильно ли я понял: у вас есть страничное приложение, размещенное в домене dX, на этой странице (pA) вы хотите загрузить другую страницу (pB, с формой), которая также обслуживается из домена dX в iframe. , это так до сих пор? Если да, то откуда вы хотите совершать вызовы API? pA, pB или оба? Кроме того, в настройках приложения домен приложения установлен на dX?   -  person Nitzan Tomer    schedule 28.05.2012
comment
Отрицательный. pB, с формой подается из домена dZ в iframe. Я хочу сделать вызов API через FB Javascript SDK в pA, чтобы обновить форму (данные пользователя) в pB. Лично я не думаю, что это возможно, поскольку это звучит как огромная проблема безопасности, если бы я мог. Но я просто хотел перепроверить это на SO.   -  person super9    schedule 29.05.2012
comment
Вы также должны дважды проверить, что то, что вы пытаетесь сделать, не нарушает политики платформы, по крайней мере, из-за передачи данных на другой домен/сайт и/или из-за данных формы, построенных на деталях, полученных из API Facebook.   -  person Juicy Scripter    schedule 29.05.2012

Ответы (3)


arrow_upward
6
arrow_downward

Вы правы, то, что вы хотите, будет заблокировано браузером из соображений безопасности (такая же политика происхождения).

Что ты можешь сделать:

  1. Перезагрузите форму в iframe и передайте ей данные, полученные из js sdk, вы даже можете отправить данные в iframe (как это делает facebook с приложениями на основе холста).

  2. Вы должны иметь возможность изменить местоположение iframe, но только хеш-часть (фрагмент), что не приведет к перезагрузке iframe.
    В iframe следите за изменениями местоположения и извлекайте данные из фрагмента.
    Проблема в том, что этот метод, вероятно, испортит историю браузера.

  3. Найдите другое решение для междоменной связи, например, easyXDM?

Редактировать

Вот две реализации первого варианта:

1) Использование ПОЛУЧИТЬ

<iframe id="userform"></iframe>

<script type="text/javascript">
    // load and init FB JS SDK

    FB.api("me", function(response) {
        document.getElementById("userform").src = USER_FORM_URL + "?name=" + response.name;
    });
</script>

2) Использование POST в iframe

<form method="POST" action="USER_FORM_URL" target="userform" id="postForm">
    <input type="hidden" name="fbResponse" id="fbResponseInput" />
</form>

<iframe name="userform"></iframe>

Затем в самом iframe получите данные (либо из GET, либо из POST) и соответствующим образом отобразите пользовательскую форму.

<script type="text/javascript">
    // load and init FB JS SDK

    FB.api("me", function(response) {
        document.getElementById("fbResponseInput").value = JSON.stringify(response);
        document.getElementById("postForm").submit();
    });
</script>
person Nitzan Tomer    schedule 29.05.2012
comment
Не могли бы вы подробнее рассказать о пункте 1, пожалуйста? Насколько я понял из того, что вы только что сказали, pA из dX может изменить значение полей ввода в pB из dZ? Как вы думаете, вы можете указать мне в правильном направлении, чтобы сделать это? - person super9; 29.05.2012
comment
Кроме того, не будет ли меня заблокирован браузер, как вы сказали? - person super9; 29.05.2012
comment
Нет, браузер не должен блокировать эту попытку. Например, вот как Facebook загружает приложения на основе холста. - person Nitzan Tomer; 30.05.2012

arrow_upward
2
arrow_downward 

var ifrm = document.getElementById('myIframe');
ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;

Теперь у вас есть iframe, просто используйте

ifrm.getElementById('textBoxId').value = 'value-fetched-from-facebook';

Получить данные из FB по

FB.api('me?fields=firstName&lastName', function(res)
{
//response contains your user info.
});
person Varun Achar    schedule 23.05.2012

arrow_upward
1
arrow_downward

Ваша вкладка должна сделать вызов GraphAPI.

Как только вы получите данные пользователя, возвращенные в ваш поток JavaScript, у вас есть 2 варианта:

1) Вы всегда можете передать данные в свой IFRAME, используя строку запроса. Только в этот момент вы создаете iframe с правильным URL-адресом, содержащим данные в строке запроса.

2) Вы можете вызвать функцию javascript, которая находится на вашей внутренней странице IFRAME. Эта функция получит объект из ответа API графа Facebook и заполнит страницу напрямую.

Проверьте эту статью.

Вызов кода JavaScript в iframe с родительской страницы

person Adrian Salazar    schedule 30.05.2012