2014-01-20 2 views
0

Я недавно искал хорошее глобальное решение для входа в facebook и, возможно, другие ... После двухдневного исследования мне удалось заставить его работать через InAppBrowser из Phonegap.Phonegap Facebook Войти с помощью InAppBrowser

я начал тестирование с андроида версии 2.3> и вот мое решение:

ответ

1

Что сценарий фактически делает:

  1. открывает новое дочернее окно с facebook входа в систему и устанавливает переадресацию URL
  2. После пользователь был перенаправлен на redirect.html, он проверяет, был ли логин успешным или нет. В случае, если он был успешным, он получает запрошенные параметры из объекта api facebook и добавляет их к URL-адресу setVars.html. или нет успеха, он будет перенаправлять на setVars.html
  3. Теперь события loadstop на нашем открытом childwindow в login.html вызовет, потому что URL-адрес - это просто купируется на - это setVars.html
  4. Теперь извлекает необходимые параметры из URL - в моем случае электронной почты, идентификатор и имя и записывает их в login.html

1: создать приложение facebook, добавить свои домены и сделать его общедоступным

2: создать 3 файла - login.html, redirect.html, setVars.html

setVars.html:

<!DOCTYPE html> 

<title>SetVars</title> 

    <style type='text/css'> 
     /* Styles specific to this particular page */ 
    </style> 

</head> 

<body> 
</body> 

redirect.html:

<div id="fb-root"></div> 
<script type="text/javascript" charset="utf-8"> 

      window.fbAsyncInit = function() { 
          FB.init({ 
          appId  : YOUR_ID, 
          status  : true, // check login status 
          cookie  : true, // enable cookies to allow the server to access the session 
          xfbml  : true // parse XFBML 
          }); 


          function getJsonFromUrl(urlString) { 
           var parameterQuery = urlString.split("?"); 
           var data = parameterQuery[1].split("&"); 
           var result = {}; 
           for(var i=0; i<data.length; i++) { 
           var item = data[i].split("="); 
           result[item[0]] = decodeURIComponent(item[1]); 
           } 
           return result; 
          } 

          var fbDataArray = getJsonFromUrl(document.URL); 

          //If user cancels the permission page 
          if (typeof fbDataArray['error'] !== "undefined") { 
          location = "http://YOUR_DOMAIN/setVars.html?name=" + response.name + "&email=" + response.email + "&id=" + response.id; 
          } 

          FB.Event.subscribe('auth.authResponseChange', function(response) { 

          // Here we specify what we do with the response anytime this event occurs. 
          if (response.status === 'connected') { 
           // The response object is returned with a status field that lets the app know the current 
           // login status of the person. In this case, we're handling the situation where they 
           // have logged in to the app. 
           getFBdata(); 
          } else if (response.status === 'not_authorized') { 
           // In this case, the person is logged into Facebook, but not into the app 
           //FB.login(); 
           location = "http://YOUR_DOMAIN/setVars.html?name=" + response.name + "&email=" + response.email + "&id=" + response.id; 
          } else { 
           // In this case, the person is not logged into Facebook, 
           //FB.login(); 
           location = "http://YOUR_DOMAIN/setVars.html?name=" + response.name + "&email=" + response.email + "&id=" + response.id; 
          } 
          }); 



       }; 

       // 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 = "https://connect.facebook.net/en_US/all.js"; 
       ref.parentNode.insertBefore(js, ref); 
       }(document)); 



       // Here we run a very simple test of the Graph API after login is successful. 
       // This testAPI() function is only called in those cases. 
       function getFBdata() { 

       FB.api('/me', {fields: 'name,email,id'}, function(response) { 
        location = "http://YOUR_DOMAIN/setVars.html?name=" + response.name + "&email=" + response.email + "&id=" + response.id; 
       }); 

       } 
    </script> 

login.html

<div id="fb-root"></div> 

    <div onclick="fbLogin();" style="margin-top: 25px; height: 100px; width: 100%; background-color: blue; color: white; font-size: 40px">Login with Facebook</div> 
    <div onclick="location = 'https://www.facebook.com' " style="margin-top: 25px; height: 100px; width: 100%; background-color: blue; color: white; font-size: 40px">Goto Facebook</div> 

    <div id="userData"></div> 

    <script type="text/javascript" charset="utf-8"> 


     document.addEventListener("deviceready", function() { 



      function getJsonFromUrl(urlString) { 
       var parameterQuery = urlString.split("?"); 
       var data = parameterQuery[1].split("&"); 
       var result = {}; 
       for(var i=0; i<data.length; i++) { 
       var item = data[i].split("="); 
       result[item[0]] = decodeURIComponent(item[1]); 
       } 
       return result; 
      } 

      fbLogin = function() { 
       var ref = window.open('https://www.facebook.com/dialog/oauth?scope=email&client_id=YOUR_APP_ID&redirect_uri=http://YOUR_DOMAIN/redirect.html', '_blank', 'location=no'); 

       ref.addEventListener('loadstop', function(event) { 


        if(event.url.indexOf("http://YOUR_DOMAIN/setVars.html") != -1) { 

         ref.close(); 

         var fbDataArray = getJsonFromUrl(event.url); 

         if (fbDataArray['email'].indexOf('@') != -1) { 

          $('#userData').html('<img style="display:block; height: 150px; width: 150px; margin: 0px auto; margin-top: 50px;" src="https://graph.facebook.com/' + fbDataArray['id'] + '/picture?width=100&height=100" />'); 
          $('#userData').append('<div style="text-align:center; height: 50px; width: 300px; margin: 0px auto; font-size: 25px; margin-top: 25px;">' + fbDataArray['email'] + '</div>'); 
          $('#userData').append('<div style="text-align:center; height: 50px; width: 300px; margin: 0px auto; font-size: 25px; margin-top: 10px;">' + fbDataArray['name'] + '</div>'); 
          $('#userData').append('<div style="color: green; text-align:center; height: 50px; width: 300px; margin: 0px auto; font-size: 25px; margin-top: 10px;">ACCESS GRANTED!</div>'); 
         } else { 
          $('#userData').html('<div style="color: red; text-align:center; height: 50px; width: 300px; margin: 0px auto; font-size: 25px; margin-top: 10px;">ACCESS DENIED!</div>'); 
         } 
         //alert(fbDataArray['email'] + ' | ' + fbDataArray['name'] + ' | ' + fbDataArray['id']); 

        } 


       }); 
       ref.addEventListener('loaderror', function(event) { alert('error: ' + event.message); }); 

      }; 




       window.fbAsyncInit = function() { 
       FB.init({ 
        appId  : YOUR_APP_ID, 
        status  : true, 
        cookie  : true, 
        xfbml  : true 
       }); 

       }; 

       (function(d, s, id){ 
       var js, fjs = d.getElementsByTagName(s)[0]; 
       if (d.getElementById(id)) {return;} 
       js = d.createElement(s); js.id = id; 
       js.src = "//connect.facebook.net/en_US/all.js"; 
       fjs.parentNode.insertBefore(js, fjs); 
       }(document, 'script', 'facebook-jssdk')); 


     }); 
    </script> 

Не забудьте добавить jquery, cordova.js, index.js, где это необходимо, и заменить все заполнители вашим APP_ID и DOMAINNAME.

3

Использование openFB: repository

OpenFB использует inappbrowser.

+0

Знаете, спасибо вам большое !!!!!!!!! – BSQ

Смежные вопросы