-1

Facebookからログインする必要があるプロジェクトに取り組んでいます。同じプロジェクトにもAndroidアプリを作成する必要があり、同じFacebookログインが必要でした。Facebookのログインが正常に機能するWebアプリケーションを実装しました。次に、Androidアプリからログインしようとしたときに同じソースコードを使用してAndroidアプリに変換しましたが、ブラウザで開いていて、エラーをスローして動作していません。

「指定された URL はアプリケーション構成で許可されていません。指定された URL の 1 つ以上がアプリ設定で許可されていません。」

同じ 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
4

1 に答える 1

0

deviceready イベントを使用して問題を解決しました。

deviceready イベントは、どのアプリケーションにも不可欠です。Cordova のデバイス API がロードされ、アクセスする準備が整ったことを示します。

Cordova は、ネイティブと JavaScript の 2 つのコード ベースで構成されています。ネイティブ コードが読み込まれている間、カスタムの読み込みイメージが表示されます。ただし、JavaScript は DOM が読み込まれるまで読み込まれません。これは、対応するネイティブ コードが利用可能になる前に、Web アプリが 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);
                        });
           }
于 2016-02-24T13:49:17.837 に答える