Prosty przykład wyskakującego uwierzytelniania z Facebook Graph API

Question

Próbujesz przekonać moich użytkowników do Facebooka za pomocą wyskakującego okienka javascript. Teraz mam:

<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')" /> 

Ale kiedy użytkownik loguje się przez Facebooka, popup wyświetla tylko stronę główną Facebook.com. Chciałbym, aby okienko wyskakujące służyło do uwierzytelnienia użytkownika i odejścia, aby można było rozpocząć pobieranie danych użytkownika z interfejsu graficznego.

Czy istnieje lepszy/łatwiejszy sposób na zrobienie tego? Proste przykłady są doceniane.

Dziękuję.

Answer 1

oauth2 na facebooku składa się z dwóch kroków, zadzwoń, aby uzyskać kod, a następnie wywołaj access_token, aby uzyskać token. Jednym ze sposobów radzenia sobie z pop loginem:

Otwórz adres URL logowania w nowym oknie, tak jak zrobiłeś, gdy Facebook przekierowuje z powrotem do Twojego adresu URL w popup, ustawiasz ciasteczko za pomocą kodu po stronie serwera lub używając javascript do przechwytuj parametr zapytania URL, gdy strona jest załadowana w popup, zamknij okno natychmiast window.close.

Na stronie głównej, po kodzie window.open, dodawanie kodu JavaScript do wykrycia, jeśli popup jest zamknięte i uchwycić 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); 
} 

Answer 2

Kasa ten artykuł: Create Facebook PopUp Authentication Window using PHP and javascript uwierzytelniania Dostosuj podręcznego.

Answer 3

Dobrym pomysłem może być wykonanie zarówno funkcji zwrotnej z okna potomnego, jak mówi Avner, jak i licznika czasu, który oczekuje zamknięcia okna. W ten sposób, jeśli okno Dziecko zostanie zamknięte bez określonej akcji, możesz podjąć odpowiednie działanie w oknie Rodzica.

**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(); 
     } 

Answer 4

Dlaczego nie po prostu ...

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/