javascript - AngularJS oauth 端点在 url 中带有哈希(SpotifyAPI)

Question

我想接收来自 Spotify 的 oauth 回调，但我的 URL 中的 # 有问题。

路由.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

嗯，你的情况一点也不尴尬。

由于您无法控制 spotify 在 OAuth 工作后的重定向方式，因此您有两个选择:

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

这种方法不是一个好习惯，除非你真的很清楚自己在做什么。这里的主要问题是安全性。除非你在重定向页面中添加非常好的机制。

2) 更简单，实际上各方面都更好:

$locationProvider.html5Mode(true); 对此的一个小介绍:

为什么这会删除 # ？因为当 HTML5 模式开启时，它将使用历史记录来引用您应用中的 native 路径。

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

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

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