通过使用 phone 差距转换 Web 应用程序来创建 android 应用程序时，Facebook 登录不起作用

Question

我正在做一个需要从 facebook 登录的项目。我还必须为同一个项目创建一个 android 应用程序，并且需要在其中登录相同的 facebook。所以我已经实现了我的 web 应用程序，它的 facebook 登录工作正常。然后我在 android 应用程序中使用相同的源代码转换它，当我尝试从 android 应用程序登录时它在浏览器中打开并且无法正常工作抛出错误。

"given url is not allowed bty the application configuration:one or more of the given url is not allowed by the app settings."

我需要一个解决方案，可以将我的同一个 Web 应用程序转换为 android、iphone 等

代码：

app.js

var myApp = angular.module('myApp',['ngRoute']);
window.fbAsyncInit = function() {
    FB.init({
      appId      : 'xxxxxxxxxxxxxxxxx',
      status: true, 
      cookie: true, 
      xfbml: true,
      version: 'v2.5'
    });
  };

  (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 = "http://connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));

home.js

myApp.controller('HomeCtrl',["$scope",function($scope){
    $scope.name = 'Login please';
    $scope.FBLogin = function(){
        FB.login(function(response) {
            if (response.authResponse) {
             console.log('Welcome!  Fetching your information.... ');
             FB.api('/me', function(response) {
               console.log('Good to see you, ' + response.name + '.');
               console.log(response);
             });
            } else {
             console.log('User cancelled login or did not fully authorize.');
            }
        });
        console.log("dsgfds");  
    };
}]);

//.......更新了使用 ngcordova 实现的代码......//

Html代码

<!DOCTYPE html>
<html ng-app="facebookApp">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
   <script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/ngCordova/dist/ng-cordova.min.js"></script>
    <script type="text/javascript" src="cordova.js"></script>

    <script type="application/javascript" src="js/customjs/fbapp.js"></script>  

        <title></title>
    </head>
    <body ng-controller="mainCtrl">
        <div>
            <div>
                <div id="home">
                    <div id="fb-root" >

                    </div>
                    <div >
                        <h1>Login</h1>
                    </div>
                    <div>

                        <a ng-click="facebookLogin()" style="text-decoration: none"><button>Login via Facebook</button></a>
                   </div>
                </div>
            </div>
       </div>
    </body>
</html>

fbapp.js

        var app = angular.module("facebookApp",['ngCordova']);

        app.controller('mainCtrl',["$scope","$cordovaOauth", function($scope, $cordovaOauth /*$cordovaFacebook*/) {
    $scope.facebookLogin = function() {

$cordovaOauth.facebook("xxxxxxxxxxxxxxxxxxxx", ["public_profile","email"])
        .then(function(success) {

            alert("welcome1");

          }, function (error) {
          // error
          alert("error :"+ error);
        });
    }
    }]);

错误：

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0/$injector/modulerr?p0=facebook-app&p1=Err…92.168.1.3%3A3000%2Fbower_components%2Fangular%2Fangular.min.js%3A20%3A449)
(anonymous function) @ angular.js:38
(anonymous function) @ angular.js:4526
n @ angular.js:321
g @ angular.js:4487
fb @ angular.js:4409
Ac.c @ angular.js:1691
Ac @ angular.js:1712
fe @ angular.js:1606
(anonymous function) @ angular.js:30423
i @ jquery.min.js:2
j.fireWith @ jquery.min.js:2
n.extend.ready @ jquery.min.js:2
J @ jquery.min.js:2

Answer 1

使用 deviceready 事件解决了问题。

deviceready 事件对于任何应用程序都是必不可少的。它表明 Cordova 的设备 API 已加载并准备好访问。

Cordova 由两个代码库组成：本机和 JavaScript。加载本机代码时，会显示自定义加载图像。但是，JavaScript 仅在 DOM 加载后加载。这意味着网络应用程序可能会在相应的本机代码可用之前调用 Cordova JavaScript 函数。

Cordova 完全加载后将触发 deviceready 事件。一旦事件触发，您就可以安全地调用 Cordova API。

var app = angular.module("facebookApp",['ngCordova','ngCordovaOauth','ngRoute','ngStorage']);

    app.controller("mainCtrl", function($scope, $cordovaOauth, $localStorage, $location, $http) {

        // Wait for device API libraries to load
        //
        function onLoad() {
            document.addEventListener("deviceready", onDeviceReady, false);
        }

        // device APIs are available
        //
            function onDeviceReady() {
                // Now safe to use device APIs
                app.config(["$cordovaFacebookProvider",function($cordovaFacebookProvider) {
                  var appID = xxxxxxxxxxxxxxxxx;
                  var version = "v2.5"; // or leave blank and default is v2.0
                  $cordovaFacebookProvider.browserInit(appID, version);
                }]);
            }


            $scope.facebookLogin = function() {
                 // $cordovaFacebook.login(["public_profile"])
                     $cordovaOauth.facebook("xxxxxxxxxxxxxxxx", ["public_profile","email"])
                        .then(function(success) {

                             $localStorage.accessToken = success.access_token;

                          }, function (error) {
                          // error
                          alert("error :"+ error);
                        });
           }

通过使用 phone 差距转换 Web 应用程序来创建 android 应用程序时，Facebook 登录不起作用

facebook login not working while creating an android app by converting a web app using phone gap

facebook

cordova

facebook-graph-api

phonegap-facebook-plugin

app.js

home.js

Html代码

fbapp.js

错误：