从弹出窗口获取 JSON 结果。 Angular.JS答案

【问题标题】：Get JSON Result from popup window. Angular.JS从弹出窗口获取 JSON 结果。 Angular.JS
【发布时间】：2015-04-26 00:41:52
【问题描述】：

我有一个弹出窗口，它调用 RESTful 后端进行 Oauth 身份验证，但是当返回结果时，它会在弹出窗口中显示 JSON，而不是关闭弹出窗口并将 JSON 存储在模型中.我该如何解决这个问题？

this.socialLogin = function(provider) {
  var url = urlBase + '/' + provider,
      width = 1000,
      height = 650,
      top = (window.outerHeight - height) / 2,
      left = (window.outerWidth - width) / 2,
      socialPopup = null;

  $window.open(url, 'Social Login', 'width=' + width + ',height=' + height + ',scrollbars=0,top=' + top + ',left=' + left);
};

【问题讨论】：

为什么首先需要额外的窗口？如果它在您的域中，您可以使用 postMessage API 将数据传回主窗口
当我尝试这样做时，什么也没有发生。
$window.postMessage('Message', url);问题是后端从 Twitter 或 Facebook 重定向到社交登录页面
您是否检查了服务器中 oauth 的后端实现。我以前用颚骨做过这种事情。它的作用是，通常一旦 oauth 成功，它就会要求回调 url。现在它调用成功的 url 必须返回一个脚本，告诉它关闭窗口。这就是它在我们的案例中的实现方式。你可以试试看。
这是一个rest api，所以它返回的只是json。 bcallback 进入护照，并返回用户数据的 json。窗口永远不会关闭，而只是显示原始 json。

标签： javascript json angularjs

【解决方案1】：

所描述的情况可能不是在 Angular 中解决问题的最佳方法。我假设这是写在控制器内部的。如果是这样，最好使用$http 服务调用后端服务。为此，

controller.js

angular.module('example')
  .controller(['$scope', '$http', '$window', function($scope, $http, $window) {

  $scope.socialLogin = function(urlEnd) {
    $http.get(urlBase + '/' + urlEnd) // Should probably be posting here...
      .then(function(res) { // Your JSON response here
        $scope.doSomethingWithTheResponse(res.data);
      }, function(err) { // Handle your error
        $window.alert("We got us an error!\n" + JSON.stringify(err));
      });
    }
  }])

【讨论】：