Spotify 授权登录调用错误 url

Question

我正在开发一个简单的网络应用程序来显示我当前正在播放的歌曲。我已经设置了一个 Spotify 帐户并收到了 clientId 和客户端密码。我尝试请求初始令牌，以便与 spotify 进一步通信 api.

我正在显示收到的登录 html，我尝试登录，但没有任何反应，它只是在登录表单上方显示 "There went something wrong ..."。此时我检查了 spotify 仪表板并将所有本地回调 url 列入白名单，但我仍然收到此消息，没有任何反应。我检查了浏览器开发工具并看到了一些奇怪的东西（至少我相信它很奇怪）。登录调用重定向到“https://losthost:5001/api/login”，这导致 404.

public async Task<IActionResult> Connect()
{
    var client = new HttpClient();
    var clientId = "clientId";

    var redirectUrl = HttpUtility.UrlEncode("http://localhost:5000/Spotify/Callback/");
    var url = $"client_Id={clientId}&response_type=code&redirect_uri={redirectUrl}";

    var result = await client.GetAsync($"https://accounts.spotify.com/authorize?{url}");

    if (result.Content.Headers.ContentType.MediaType == "text/html"){
        var spotifyLoginHtml = await result.Content.ReadAsStringAsync();

        return new ContentResult()
        {
            Content = spotifyLoginHtml,
            ContentType = "text/html",
        };
    }
    else
    {
        //var accessToken = await result.Content.ReadAsStringAsync();
        //return RedirectToAction("DevicesSelection");
    }   

    return View();         
}

我认为我的问题是来自 spotify 登录的错误登录调用 html，但我不知道为什么会发生这种情况或如何解决它。

编辑：添加了带有初始错误（未捕获在承诺中）和错误 api/login 调用的图像

Answer 1

redirect_uri :

The URI to redirect to after the user grants or denies permission. This URI needs to have been entered in the Redirect URI whitelist that you specified when you registered your application. The value of redirect_uri here must exactly match one of the values you entered when you registered your application, including upper or lowercase, terminating slashes, and such.

Spotify 提供 article available 涵盖身份验证和授权设置和流程 step-by-step。

因此，如果 http://localhost:5000/Spotify/Callback/ 是您的重定向 url ，您应该首先将 url 添加到仪表板中的重定向 URI 白名单：

并且在您的应用程序中，您应该有路由匹配 http://localhost:5000/Spotify/Callback/ 以通过查询字符串获取代码，然后使用代码获取用于访问 Spotify API 的访问令牌。这是一个代码示例：

class SpotifyAuthentication
{
    public string clientID = "xxxxxxxxxxxxxxxxxxxxx";
    public string clientSecret = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
    public string redirectURL = "https://localhost:44363/callback";
}

public class HomeController : Controller
{
    SpotifyAuthentication sAuth = new SpotifyAuthentication();

    [HttpGet]
    public ContentResult Get()
    {
        var qb = new QueryBuilder();
        qb.Add("response_type", "code");
        qb.Add("client_id", sAuth.clientID);
        qb.Add("scope", "user-read-private user-read-email");
        qb.Add("redirect_uri", sAuth.redirectURL);

        return new ContentResult
        {
            ContentType = "text/html",
            Content = @"
                <!DOCTYPE html>
                <html>
                    <head>
                        <meta charset=""utf-8"">
                        <title>Spotify Auth Example</title>
                    </head>
                    <body>
                        <a href=""https://accounts.spotify.com/authorize/" + qb.ToQueryString().ToString() + @"""><button>Authenticate at Spotify</button></a>
                    </body>
                </html>
            "
        };
    }

    [Route("/callback")]
    public ContentResult Get(string code)
    {
        string responseString = "";

        if (code.Length > 0)
        {
            using (HttpClient client = new HttpClient())
            {
                Console.WriteLine(Environment.NewLine + "Your basic bearer: " + Convert.ToBase64String(System.Text.ASCIIEncoding.ASCII.GetBytes(sAuth.clientID + ":" + sAuth.clientSecret)));
                client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Basic", Convert.ToBase64String(System.Text.ASCIIEncoding.ASCII.GetBytes(sAuth.clientID + ":" + sAuth.clientSecret)));

                FormUrlEncodedContent formContent = new FormUrlEncodedContent(new[]
                {
                    new KeyValuePair<string, string>("code", code),
                    new KeyValuePair<string, string>("redirect_uri", sAuth.redirectURL),
                    new KeyValuePair<string, string>("grant_type", "authorization_code"),
                });

                var response = client.PostAsync("https://accounts.spotify.com/api/token", formContent).Result;

                var responseContent = response.Content;
                responseString = responseContent.ReadAsStringAsync().Result;
            }
        }

        return new ContentResult
        {
            ContentType = "application/json",
            Content = responseString
        };
    }
}

代码参考：https://github.com/bmsimons/dotnet-core-spotify-authentication and blog .

当然你可以使用 Spotify 中间件，here 是一个代码示例。

Spotify 授权登录调用错误 url

Spotify authorization login call in wrong url

c#

model-view-controller

spotify

asp.net-core-mvc