2012-09-12 3 views
1

Facebook에서 Javascript SDK 클라이언트 측 인증을 사용하려고 시도 중이며 Firefox에서도 그렇지만 IE에서는 비참하게 실패합니다. IE 8에서 로그인 버튼을 클릭하면 아무 일도 일어나지 않습니다. 오버레이 없음, IE에서 경고 없음, 아니요. 이 코드는 Facebook에서 제공 한 코드 샘플로서 수정 방법이 거의 없습니다.Facebook에서 JS 클라이언트 측 인증이 작동하지 않습니다.

<!DOCTYPE html> 
<html> 
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#"> 
    <title>Facebook Client-side Authentication Example</title> 
    </head> 
    <body> 
    <div id="fb-root"></div> 
    <script> 
     // Load the SDK Asynchronously 
     (function(d){ 
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0]; 
     if (d.getElementById(id)) {return;} 
     js = d.createElement('script'); js.id = id; js.async = true; 
     js.src = "//connect.facebook.net/en_US/all.js"; 
     ref.parentNode.insertBefore(js, ref); 
     }(document)); 

     // Init the SDK upon load 
     window.fbAsyncInit = function() { 
     FB.init({ 
      appId  : 'xxxxxxxxxxxxxxx', // App ID 
      channelUrl : '//thejspot.ws/channel.html', // Path to your Channel File 
      status  : true, // check login status 
      cookie  : true, // enable cookies to allow the server to access the session 
      xfbml  : true // parse XFBML 
     }); 

     // listen for and handle auth.statusChange events 
     FB.Event.subscribe('auth.statusChange', function(response) { 
      if (response.authResponse) { 
      // user has auth'd your app and is logged into Facebook 
      FB.api('/me', function(me){ 
       if (me.name) { 
       document.getElementById('auth-displayname').innerHTML = me.name; 
       oFormObject = document.forms['ri_form']; 
       oFormObject.elements['full_name'].value = me.name; 
       oFormObject.elements['email_address_'].value = me.email; 
       oFormObject.elements['gender'].value = me.gender; 
       oFormObject.elements['locale'].value = me.locale; 
       } 
      }) 
      document.getElementById('auth-loggedout').style.display = 'none'; 
      document.getElementById('auth-loggedin').style.display = 'block'; 
      } else { 
      // user has not auth'd your app, or is not logged into Facebook 
      document.getElementById('auth-loggedout').style.display = 'block'; 
      document.getElementById('auth-loggedin').style.display = 'none'; 
      } 
     }); 

     // respond to clicks on the login and logout links 
     document.getElementById('auth-loginlink').addEventListener('click', function(){ 
      FB.login(function(response) {}, {scope: 'email'}); 
     }); 
     document.getElementById('auth-logoutlink').addEventListener('click', function(){ 
      FB.logout(); 
     }); 
     } 
    </script> 
    <h1>Facebook Client-side Authentication Example</h1> 
     <div id="auth-status"> 
     <div id="auth-loggedout"> 
      <a href="#" id="auth-loginlink">Login</a> 
     </div> 
     <div id="auth-loggedin" style="display:none"> 
      <span id="auth-displayname"></span> (<a href="#" id="auth-logoutlink">logout</a>)<br /><br /> 
      <h3>Facebook Attributes</h3> 
     </div> 
    </div> 
    <form action="" method="get" id="ri_form"> 
       Full Name: <input name="full_name" type="text"><br /> 
       Email: <input name="email_address_" type="text"><br /> 
       Gender: <input name="gender" type="text"><br /> 
       Locale: <input name="locale" type="text"><br /> 
      </form> 
    </body> 
</html> 

누구나 내가 뭘 잘못하고 있을지 몰라요? 감사합니다.

답변

1

우선 : 귀하의 페이지에 <html> 개의 요소가 있으면 도움이 될 것이라고 생각합니까? 첫번째 것을 제거하십시오, 그것은 말도 안됩니다.

IE 8에서는 로그인 버튼을 클릭해도 아무런 변화가 없습니다.

IE < 9 DOM 요소에 이벤트 처리기를 바인딩 addEventListener을 지원하지 않습니다. 따라서 이전 IE에이 기능을 추가하는 라이브러리를 포함하지 않는 한 (이 코드는 아무 것도 보이지 않습니다.) 코드가이 방식으로 작동하지 않을 수 있으며 실제로 JS 콘솔에 오류가 발생합니다. (당신은 심지어 거기에서 보는 것을 괴롭 혔습니까?)

+0

CBroe - 저는 고마워하여 지금 일하고 있습니다. JS 콘솔에 관한 질문에 대답하려면 - 아니, 귀찮게하지 않았다. 나는 JS에서 많은 일을하지 않는다. 어디서부터 시작 해야할지 모르겠다. – dscl

+0

나는이 답변을 찾기 위해 인터넷을 샅샅이 뒤졌지만 IE 7/8에서'addEventListener'가 문제가되었다는 것을 알았습니다 .... 제 정성을 구 해주셔서 고마워요. – martincarlin87

관련 문제