Question

我希望收到Spotify的oauth回调，并且在我的网址中遇到#的问题。

routes.js

 app.config(['$routeProvider',
  function ($routeProvider) {
    $routeProvider.
      ...
      when('/callback', {
        templateUrl: 'views/callback.html',
        controller: 'CallbackCtrl'
      })
      ...
  }]);

因此要访问该路由，URL为e。 G。 http://test.com/#/callback

对于spotify端点，redirect_uri必须是url编码的：

https://accounts.spotify.com/authorize/?client_id=...&response_type=code&redirect_uri=http%3A%2F%2Ftest.com%2F%23%2Fcallback&scope=user-read-private%20user-read-email&state=profile%2Factivity

来自spotify的重定向：

http://test.com/%23/callback?code=..&state=profile%2Factivity

结果是404

我知道有一些解决方法，例如使用/路由或启用html5mode来摆脱#，但我希望有一个真正的解决方案。

Answer 1

看起来您将实施授权代码流客户端，公开您在注册应用时提供的密钥。这是错误的，因为有人可能会使用客户端ID和密钥代表您的应用程序生成令牌。

更好的方法是使用隐式授权（例如，如何在https://github.com/possan/webapi-player-example上完成）或实现令牌交换服务器端并将令牌传递给AngularJS webapp。

Answer 2

你的情况根本不是那么尴尬。

由于您无法控制在OAuth工作后发现重定向的方式，因此它为您提供了两个选项：

1）创建一个例如http://test.com/redirect_uri/?code=....的URL路径，它将自动将用户重定向到登录状态的webapp。

这种方法不是一个好习惯，除非你确切地知道你在做什么。这里的主要问题是安全性。除非您在重定向页面中添加了非常好的机制。

2）在所有方面都更容易，实际上更好：

$locationProvider.html5Mode(true); 关于此的一个小介绍：

为什么删除#？因为启用HTML5模式时，它将使用历史记录来引用应用中的本机路径。

但坚持这不是你唯一要做的事情：您必须重定向所有请求才能正常浏览主页index.html。

我用.htaccess来做这个。但是从AngularJS 1.3开始，我知道还有另一种方法是添加meta <base href=/base/path/of/app/directory">标签。通常是<base href="/">

但我仍然更喜欢.htacces rewriterule或w / e您正在使用的网络服务器。

Answer 3

查看有关Scotch.io的this文章，了解应解决此问题的“漂亮网址”。

您必须将html5Mode设置为true：

// Remember to inject $locationProvider
$locationProvider.html5Mode(true);

然后，在你的html文件中包含一个基础：

<base href="/">

这将允许您使用相对链接浏览网页。

我提到的文章也涉及旧浏览器的后备。

AngularJS oauth端点，其中包含url中的哈希值（SpotifyAPI）

3 个答案: