2016-11-13 9 views
1

私はJhipsterとJhipster-ionicとcordovaを使ってモバイルアプリケーションを開発しています。 現在、トークンベースのAngularJS認証(Satellizer)を使用してOAuth 2.0でログインしていますが、CROSS起源の問題があります。 I Gアクセス制御 - 許可 - 発信元コード405?

<button class="btn btn-full btn-fb active db" ng-click="vm.authenticate('google')" type="submit" translate="{{'welcome.loginGoogle' |translate}}"></button> 

<button class="btn btn-full btn-fb active db" ng-click="vm.authenticate('facebook')" type="submit" translate="{{'welcome.loginFacebook' |translate}}"></button> 

しかし:

私は Satellizer-ionicに、この例に続いて、私は休閑

マイコンフィグました:

.config(function($authProvider) { 
    $authProvider.httpInterceptor = false; 
    $authProvider.withCredentials = true; 

    var commonConfig = { 
     popupOptions: { 
     location: 'yes', 
     toolbar: 'yes', 
     width: window.screen.width, 
     height: window.screen.height 
     } 
    }; 

    if (ionic.Platform.isIOS() || ionic.Platform.isAndroid()) { 
     commonConfig.redirectUri = 'http://localhost:3000/'; 
    } 

    $authProvider.facebook(angular.extend({}, commonConfig, { 
     clientId: 'MyFacebookId', 
     url: 'http://localhost:8080/social/signup' 
    })); 

    $authProvider.google(angular.extend({}, commonConfig, { 
     clientId: 'Myid.apps.googleusercontent.com', 
     url: 'http://localhost:8080/social/signup' 


     })); 
     }) 
     .run(function($ionicPlatform) { 
     $ionicPlatform.ready(function() { 
      if (window.cordova && window.cordova.plugins.Keyboard) { 
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 
      } 
      if (window.StatusBar) { 
      StatusBar.styleDefault(); 
      } 
     }); 
     }); 

コントローラー:

vm.authenticate = function(provider) { 
    $auth.authenticate(provider) 
    .then(function(res) { 
     $ionicPopup.alert({ 
     title: 'Success', 
     content: 'You have successfully logged in!' 
     }) 
     console.log("yes google login works"); 
     console.log('success', 'Welcome', 'Thanks for coming back, ' + res.user.displayName + '!'); 

    }) 
    .catch(function(error) { 
     console.log(error); 
     $ionicPopup.alert({ 
     title: 'Error', 
     content: error.message || (error.data && error.data.message) || error 
     }); 
     console.log("too bad" + error.data); 
    }); 
}; 

HTMLをこのエラーをotの:

enter image description here

私はapplication.yml

cors: #By default CORS are not enabled. Uncomment to enable. 
     allowed-origins: "*" 
     allowed-methods: GET, PUT, POST, DELETE, OPTIONS 
     allowed-headers: "*" 
     exposed-headers: 
     allow-credentials: true 
     max-age: 1800  

マイJhipsterバージョンにCORSのコメントを外したことはV3.5.1です。

+0

あなたはエラーの言うことをやってみましたか?許可されたドメインに 'Access-Control-Allow-Origin'ヘッダーが必要です。 –

+0

@MattClarkはい、試しましたが動作しません。 – foboss

+1

これはバックエンドCORSの問題です...すべてのフロントエンドコードは意味がありません – charlietfl

答えて

0

は、私は私のコードにいくつかのミスをしたcommonConfig.redirectUriは私のバックエンドのURLである必要があり、ここでの解決策:

.config(function($authProvider) { 
    $authProvider.httpInterceptor = false; 
    $authProvider.withCredentials = true; 

    var commonConfig = { 
     popupOptions: { 
     location: 'yes', 
     toolbar: 'yes', 
     width: window.screen.width, 
     height: window.screen.height 
     } 
    }; 

    if (ionic.Platform.isIOS() || ionic.Platform.isAndroid()) { 
    commonConfig.redirectUri = 'http://localhost:8080/sigin/google'; 
    } 

    $authProvider.google(angular.extend({}, commonConfig, { 
     clientId: 'googleAppId', 
    // url: "http://localhost:8080/sigin/google" 
    })); 
    console.log($authProvider); 
    }) 
    .run(function($ionicPlatform) { 
    console.log($ionicPlatform); 
    $ionicPlatform.ready(function() { 
     if (window.cordova && window.cordova.plugins.Keyboard) { 
     cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 
     } 
     if (window.StatusBar) { 
     StatusBar.styleDefault(); 
     } 
    }); 
    }); 
関連する問題