Межсайтовая авторизация – JSONP
Сегодня рассмотрим как можно сделать общую авторизацию на двух сайтах расположенных на разных доменах. Поставлена задача: при переходе по ссылке на сайте site1.ru автоматически регистрироваться и авторизоваться на сайте site2.ru
Из всех рассмотренных ниже вариантов, самой быстрой и надежной оказалась кросс-доменная коммуникация с помощью JSONP
Первым пришедшим в голову вариантом было – передавать хеш код в ссылке на сайте site1.ru (например href=http://site2.ru?act=auth&hash=2314edwqfjksa231213), хеш генирируется на несколько минут для авторизованного пользователя на сайте site1.ru, но тут есть проблема – если пользователь скопирует эту ссылку и передаст своему другу то от его имени на сайте site2 будет авторизован его друг, да и безопасности никакой.
Вторым вариантом попробовал использовать передачу session_id (пользователя на сайте site1.ru) через iframe, но и тут возникли проблемы безопасности:
«Unsafe JavaScript attempt to access frame with URL http://site2.ru/ from frame with URL http://site1.ru. Domains, protocols and ports must match«
Если нужна только поддрежка браузеров которые знают что такое HTML5 то можно сделать переброс данных через iframe с помощью postMessege, как описано здесь:
http://ternarylabs.com/2011/03/27/secure-cross-domain-iframe-communication/
рабочий пример:
http://jsbin.com/oxesef/9/edit#javascript,html
Затем я наткнулся на статью:
en.wikipedia.org
а тут еще более расписано как можно применять JSONP:
http://habrahabr.ru
Из написанного выше стало ясно что делать и как передать нужные данные с сайта site1 на site2 без особых усилий.
на http://site2.ru/test.php пишем такой код:
parseResponse({success: 'ok', sid: 867578645});
на сайте http://site2.ru/index.php пишем:
<pre id="log"></pre>
<script>
function jsonp(url)
{
var script = document.createElement("script");
script.setAttribute("src",url);
script.setAttribute("type","text/javascript");
document.body.appendChild(script);
}
jsonp('http://site2.ru/test.php');
function parseResponse(data)
{
$("#log").html("success: "+data.success+" \r\nsid: "+data.sid);
// отправляем данные для выдачи по sid данных о пользователе
$.ajax({
data: {sid:data.sid},
type: "POST",
//адрес скрипта получающего данные и регистрирующего или авторизующего на сайте site1
url: "/auth.php",
success: function(data){
alert('success');
},
error: function(error){
alert('requesting error!');
}
});
}
</script>