Phonegap Facebook登錄InAppBrowser

我最近搜索了一個很好的全球解決方案，做一個Facebook登錄和其他人... 經過2天的研究，我設法通過PhoneApp的InAppBrowser工作。Phonegap Facebook登錄InAppBrowser

我開始使用Android 2.3版本>這裏測試我的解決方案：

來源

2014-01-20 Jb Alexander

什麼腳本實際上做：

打開新的子窗口，Facebook登錄，並設置重定向URL
一旦用戶被重定向到redirect.html它檢查登錄是否成功。在成功的情況下，它從facebook api對象獲取請求的參數並將它們附加到setVars.html URL。全成與否，它就會重定向到上的login.html我們打開的childwindow setVars.html
現在loadstop事件將觸發因爲URL - 它只是在採空 - 是setVars.html
現在它提取從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替換所有佔位符。

來源

2014-01-20 18:59:58

使用openFB：repository

OpenFB使用inappbrowser。

來源

2015-07-09 18:45:02 icaro56

你知道，非常感謝你!!!!!!!!! – BSQ

Phonegap Facebook登錄InAppBrowser

回答

相關問題