Question

我是AngularJS的新手，现在我遇到了一个问题。我一直在寻找/尝试几个小时，但似乎没有任何效果。

我曾经创建了一个通过OAuth 2.0与Google连接的网络应用，用于检索Google Analytics数据。它的工作方式与预期的一样，但我只是将我的应用程序转换为AngularJS，突然OAuth不再工作了。

经过一些调试后，我发现在使用我的Google帐户登录并重定向回我的网页后，无法从网址中检索返回的“代码”。我的代码停止工作：

if (isset($_GET['code'])) { // Do something }

注意：如果我跳过此步骤，并且只是在没有有效令牌的情况下立即请求数据，Google会返回401：Login Required错误。所以连接或应用凭证没有任何问题。

重定向网址如下所示：

http://www.domain.com/app/?code=HaShCoDe#/app/dashboard （其中HaShCoDe当然是返回的代码）

我在这里发布了多个用于从URL中检索“代码”的内容，但我的$ _POST始终为NULL。也许问题是在发布数据之后的'＃/ app / dashboard'，但这就是这个主题（我买的）是如何工作的，所以我必须接受它。

Answer 1

然而，不是最佳解决方案，此解决方法似乎解决了这个问题。

我注意到其他一些人遇到了完全相同的问题（针对Google和其他OAuth重定向），但仍然无法解决这个问题，Angular团队也没有解决方案（即使他们似乎是意识到这个问题），我会在这里发布我的解决方案。

在您的主页上检查是否设置了access_token变量，如果没有，请创建指向新页面的链接：

<? 
if(!isset($_SESSION['access_token'])) {
    echo '<a href="/link/to/analytics.php">Connect with Analytics</a>';
} 
?>

现在创建一个非AngularJS页面（见上文，在我的案例中为analytics.php）。让该页面处理授权。 不要忘记将该网页设置为Google Analytics中的重定向URI 。现在，在此页面上添加相同的access_token检查，并在设置access_token时将其自动转发到您的主页面。

<? 
if(isset($_SESSION['access_token'])) {
    header('Location: http://www.mainpage.com/app');
} 
?>

现在，您的Angular JS应用中可以使用$_SESSION['access_token']，并且查询Google服务器的工作方式应该如此。

Answer 2

问题是角度使用的网址中的＃。要解决此问题，您可以设置不带路径的重定向，并像这样处理重定向

angular
  .module('angularoauthexampleApp', [
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/access_token=:accessToken', {
        template: '',
        controller: function ($location,$rootScope) {
          var hash = $location.path().substr(1);

          var splitted = hash.split('&');
          var params = {};

          for (var i = 0; i < splitted.length; i++) {
            var param  = splitted[i].split('=');
            var key    = param[0];
            var value  = param[1];
            params[key] = value;
            $rootScope.accesstoken=params;
          }
          $location.path("/about");
        }
      })
  });

另一种方法是设置$ locationProvider.html5mode（true）。此模式可以仅使用路径并进行无缝集成。但是它可能不适用于旧浏览器

这是一个完整的例子 http://anandsekar.github.io/oauth2-with-angularjs/

在我的Angular页面上访问POST数据（OAuth重定向代码）

2 个答案: