logo标签列表

使用Angular JS删除Facebook OAuth哈希值

javascriptangularjs
15

Facebook喜欢在我们提供的OAuth回调URL末尾添加#_=_。虽然我们不使用基于哈希的导航，但它看起来很烦人，我想摆脱它。

location.hash = '';会在$watch中导致无限循环（$window.location.hash = '';也会发生这种情况）。Angular的$location.hash('');无效。 $location.path('');可以让我们实现部分目标，结果是/#/被附加到我们的url上。

我还尝试了一下$locationProvider.html5Mode，但只收到错误信息。（Error: [$injector:unpr] Unknown provider: $locationProviderProvider <- $locationProvider ）尽管这可能是我自己的问题。

如何无误地删除OAuth哈希？

Angular关于“未知提供者”的错误可能是由于您没有安装ngRoute引起的，这个问题在几个版本之前被拆分到了它自己的文件中。 - Zoey Mertes
你的代码中在哪里放置$locationProvider.html5Mode()设置器？ - Ed_
$location.hash('') 似乎成功地将哈希值删除了。您是从 Angular 循环之外调用它吗？如果是这样，应该调用 $scope.$apply 才能生效。 - Sasha
不确定为什么这个问题会吸引负评... - SomeKittens
5个回答
2
与搜索属性需要以 "?" 开头类似，哈希属性应该以 "#" 开头。
不要将 location.hash 设置为空字符串，而是将其设置为 "#"。
location.hash = '#';

附言：

您可能因此而被投下负票。

虽然我们没有使用基于哈希的导航，但它看起来很烦人，我想摆脱它。

尽管我对此没有异议，但问题就是问题，无论原因如何，有些人可能会认为这是浪费时间，因为唯一的感知原因是您认为它很烦人。

0

我在FB方面没有经验，但我们使用Angular的http interceptors 进行相当数量的URL处理。 您可以通过以下方式实现对传入数据的简单正则表达式替换（从文档中改编）：

// register the interceptor as a service
$provide.factory('myHttpInterceptor', function($q, dependency1, dependency2) {
    return {
        'response': function(response) {
            // alter the response
            var loc = response.headers.location;
            response.headers.location = loc.replace(/#_=_$/,'');

            // pass along the altered response
            return response;
        }
    };
});
$httpProvider.interceptors.push('myHttpInterceptor');

这段代码应该放在你的 Angular 应用程序的 .config 模块中。它将通过 $http 服务透明地运行在所有请求下面，所以如果你需要保留一些 URL，你可能需要进行额外的处理。

接近但不是有效的解决方案 - 这是一个页面加载问题，而不是 $http 问题。 - SomeKittens
有没有一个例子能够让我参考一下？很想帮忙，但是我不确定提供URL的机制是什么（重定向、数据请求等等），以及你想如何使用它（重写成更符合'rest'风格的url、显示等等）。 - gkl
1
在 'response' 键声明之前，您缺少返回语句。 - deb0rian
0

我猜你在谈论https://www.facebook.com/dialog/oauth?client_id=...&redirect_uri=... OAuth 调用。在我的代码中，我为他们提供了一个 URI 编码的重定向 URI，其中已经包含了一个哈希，例如 myserver.com/myapp/#/login/facebook，因此他们的重定向将在我的应用程序的 AngularJS $routeProvider 中处理。奇怪的是，Facebook 在哈希后面附加了一个“&”到路径上，所以我的 $routeProvider 配置看起来像：

myApp.config(['$routeProvider', function($routeProvider) {
  $routeProvider.
  when('/login/facebook', {
    templateUrl: 'dialogs/login/facebook.html',
    controller: 'LoginFacebookCtrl'
  }).
  when('/login/facebook&', { // Facebook seems to attach an & at the end
    templateUrl: 'dialogs/login/facebook.html',
    controller: 'LoginFacebookCtrl'
  })
  ...
}]);

对我来说可行。

我在这个项目中没有使用 ng-route。 - SomeKittens
-1

看起来Angular会将#_=_转换为#/_=_，因此我们可以使用$location.path('/')来重置它。

这将导致/#/，这是一个通常的哈希符号，我们可以通过使用html5模式来关闭它。

myApp.config(['$locationProvider',
    function ($locationProvider) {
        $locationProvider.html5Mode(true);
    }]);

根据doc，您需要在<head>部分下添加<base href="/">标签。

-1

如果适合您，尝试添加重定向：

app.config(['$routeProvider', function ($routeProvider) {
  $routeProvider.when('/_=_', { redirectTo: '/' });
}]);
后端看不到请求中的哈希值。 - SomeKittens
谁在谈论后端？实际上那是前端代码。 - Denis Zhbankov
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接