Простой пример всплывающей проверки подлинности с помощью API-интерфейса Facebook Graph

Попытка получить Facebook для аутентификации моих пользователей через всплывающее окно javascript. Прямо сейчас у меня есть:

<input type="button" value="Connect with Facebook" onclick="window.open('https://graph.facebook.com/oauth/authorize?client_id=XXXXXXXXXXX&redirect_uri=http://example.com/step2&display=popup')"  />

Но когда пользователь входит в систему через Facebook, всплывающее окно просто открывает домашнюю страницу Facebook.com. Я бы хотел, чтобы всплывающее окно аутентифицировало пользователя и ушло, чтобы я мог начать извлекать данные пользователя из графика api.

Есть ли лучший/более простой способ сделать это? Простые примеры оценены.

Спасибо.

Ответы

Ответ 1

oauth2 в facebook включает в себя два шага, авторизацию вызова для получения кода, а затем вызов access_token для получения токена. Один из способов борьбы с поп-логином:

открыть URL-адрес для входа в новое окно, как и вы, когда facebook перенаправляет обратно на ваш URL-адрес во всплывающем окне, вы устанавливаете файл cookie либо с помощью кода на стороне сервера, либо с помощью javascript для захвата параметра запроса url, когда страница загружается в всплывающее окно, закройте окно немедленно window.close.

На главной странице, после кода window.open, добавьте код JavaScript, чтобы определить, закрыто ли всплывающее окно и захватить файл cookie:

var signinWin;
$('#FacebookBtn').click(function () {
        var pos = screenCenterPos(800, 500);
        signinWin = window.open("[URL]", "SignIn", "width=780,height=410,toolbar=0,scrollbars=0,status=0,resizable=0,location=0,menuBar=0,left=" + pos.x + ",top=" + pos.y);
        setTimeout(CheckLoginStatus, 2000);
        signinWin.focus();
        return false;
    });

function CheckLoginStatus() {
    if (signinWin.closed) {
        $('#UserInfo').text($.cookie("some_cookie");
    }
    else setTimeout(CheckLoginStatus, 1000);
}

Ответ 2

Почему бы просто...

function authorizeAppInPopup() {
    FB.login(function(response) {
        if (response.authResponse) {
            // User authorized app
        } else {
            // User cancelled login or did not fully authorize
        }
    }, {scope: 'publish_stream'});
}

???:]

https://developers.facebook.com/docs/reference/javascript/FB.login/

Ответ 3

Ознакомьтесь с этой статьей: Создайте окно проверки подлинности Facebook PopUp с помощью PHP и javascript для настройки всплывающей проверки подлинности.

Ответ 4

Это может быть хорошей идеей сделать как функцию обратного вызова из окна Child, так и Avner, а также таймер, который следит за закрытием окна. Таким образом, если окно Child закрыто без определенного действия, вы можете предпринять соответствующие действия в окне родителя.

**On Child**
// Set oAuthToken from server side when it comes back from authenticating 
// and you have the token on the server side.
var oAuthToken = "";
oAuthToken = "--STRING INSERTED BY SERVER SIDE CODE--";
window.opener.pbFromPopup(oAuthToken);

**On Parent :** 
       function CheckLoginStatus() {
            if (authWindow.closed) {
                // Handle error if authentication window is closed 
                // without any action on Allow or Deny
                alert("window closed");                
                //location.href = "errorPage.aspx?error=authwinclosed;
            }
            else setTimeout(CheckLoginStatus, 1000);
        }
        function pbFromPopup(token) {
            // Function called from child window, 
            // token is passed back from child
            authWindow.close();
            // Put token in a hidden form field and submit the form to pass 
            // it back to the server
            $("#authToken").val(token);
            $("#form1").submit();
        }