Question

我正在尝试制作您在此处看到的代码： https://glitch.com/edit/#!/amusing-swallow?path=index.html:7:68

我的节点js应用程序上的可执行文件。请注意，该链接上的代码正常运行。

我所做的就是设置了这样的环境：

root folder
  --public
     --index.html
  --script.js
  --app.js
  --package.json

然后我将html代码复制到我的index.html文件中，如下所示：

<!DOCTYPE html>
<html>

<head>
  <title>Spotify Implicit Grant Template</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://sp-bootstrap.global.ssl.fastly.net/8.0.0/sp-bootstrap.min.css" rel="stylesheet" />
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"></script>

</head>

<body class="container">
  <h1 class="text-salmon">Spotify Implicit Grant Template</h1>
  <h3>This app uses the implicit grant authorization flow to authenticate users and get user data.</h3>
  <p>
    Here are your top artists on Spotify:
    <ol id="top-artists"></ol>
  </p>
  <script src="../script.js" type='text/javascript'></script>
</body>

</html>

没什么特别的，然后我让script.js成为一个自调用函数：

(function() {
  // Get the hash of the url
  const hash = window.location.hash
    .substring(1)
    .split("&")
    .reduce(function(initial, item) {
      if (item) {
        var parts = item.split("=");
        initial[parts[0]] = decodeURIComponent(parts[1]);
      }
      return initial;
    }, {});
  window.location.hash = "";

  // Set token
  let _token = hash.access_token;

  const authEndpoint = "https://accounts.spotify.com/authorize";

  // Replace with your app's client ID, redirect URI and desired scopes
  const clientId = "xxxxxxxxxxxxxxxxxxxxxxxx";
  const redirectUri = "http://localhost:8888/callback/";
  const scopes = ["user-top-read"];

  // If there is no token, redirect to Spotify authorization
  if (!_token) {
    window.location = `${authEndpoint}?client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scopes.join(
      "%20"
    )}&response_type=token&show_dialog=true`;
  }

  // Make a call using the token
  $.ajax({
    url:
      "https://api.spotify.com/v1/search?query=tania+bowra&offset=0&limit=20&type=artist",
    type: "GET",
    beforeSend: function(xhr) {
      xhr.setRequestHeader("Authorization", "Bearer " + _token);
    },
    success: function(data) {
      // Do something with the returned data
      data.items.map(function(artist) {
        let item = $("<li>" + artist.name + "</li>");
        item.appendTo($("#top-artists"));
      });
    }
  });
})();

最后在我的app.js上发送快递：

var express = require("express"); // Express web server framework
var app = express();
app.use(express.static(__dirname + "/public"));
console.log("Listening on host 8888......");
app.listen(8888);

所以我尝试运行这个，每当我访问localhost：8888时，我都会继续这样做：

GET http://localhost:8888/script.js 404 (Not Found)

Refused to execute script from 'http://localhost:8888/script.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

我不确定为什么。但我只是复制了相同的确切代码，只是将我的凭据放在那里，但它仍然无法正常工作。知道我做错了什么吗？

Spotify隐式授权不适用于节点

0 个答案: