spotify 应用程序请求授权

Posted 2023-04-15

【中文标题】spotify 应用程序请求授权

【英文标题】：spotify application requests authorization

【发布时间】：2018-06-14 16:50:07

【问题描述】：

我正在尝试使用以下代码从 spotify 获取“访问令牌”。

    var encoded = btoa(client_id+':'+client_secret);
    function myOnClick() 
       console.log('clikced!');
       $.ajax(
       url: 'https://accounts.spotify.com/api/token',
       type: 'POST',
       data: 
            grant_type : "client_credentials",
           'Content-Type' : 'application/x-www-form-urlencoded'
       ,
       headers: 
           Authorization: 'Basic ' + encoded
       ,
       dataType: 'json'
       ).always((data)=> console.log(data));
       

但是我不断收到错误：

    Cross-Origin Request Blocked: The Same Origin Policy disallows reading
    the remote resource at https://accounts.spotify.com/api/token.
    (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

和 就绪状态：0，状态：0

【参考方案1】：

这里是来自 Spotify 的 Arielle。

您似乎正在使用客户端凭据流，这是您可以与 Spotify API 一起使用的 3 个身份验证流之一。 （您可以查看所有 3 个here）

客户端凭据仅供服务器端使用，不应在前端使用，因为它需要您不应该公开的客户端密码！

您应该改用 Implicit Grant 流程，它是为在浏览器中使用而设计的。启动和运行也很容易！

// 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 = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
const redirectUri = 'http://localhost:8888';
const scopes = [
  'user-read-birthdate',
  'user-read-email',
  'user-read-private'
];

// 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`;

要点：https://gist.github.com/arirawr/f08a1e17db3a1f65ada2c17592757049

这里有一个关于 Glitch 的示例，您可以“混音”以制作副本并开始制作您的应用：https://glitch.com/edit/#!/spotify-implicit-grant

希望对您有所帮助 - 黑客攻击愉快！ ??‍?

【讨论】：

嗨，Arielle，感谢您的回答。 Angular 我可以在 Angular 中使用“客户端凭据流”吗？我在 Angular 中也收到这种类型的授权错误。

嗨！ Angular 是一个前端 javascript 框架，因此您会看到相同的问题，并且客户端凭据流不应使用。 Node.js 是服务器/后端上的 Javascript - 您将 能够在那里使用客户端凭据（这是一个示例，您可以在后端的 server.js 中看到调用： glitch.com/edit/#!/spotify-client-credentials).

【参考方案2】：

const result = await axios(
  url: this.apiLoginUrl,
  method: 'post',
  data: "grant_type=client_credentials",
  headers: 
    'Authorization': `Basic $Buffer.from(this.clientId + ":" + this.clientSecret).toString('base64')`,
  ,
);