From 163200f65c49b10a8e93deb85d43bfeafd9db9cf Mon Sep 17 00:00:00 2001 From: Jonas Dellinger Date: Thu, 15 Apr 2021 17:54:43 +0200 Subject: [PATCH] Added ErrorReceived to embedded auth server Also style the default HTML site based on error/success values. Fixes #566 --- SpotifyAPI.Docs/docs/authorization_code.md | 7 ++ SpotifyAPI.Docs/docs/implicit_grant.md | 7 ++ SpotifyAPI.Web.Auth/EmbedIOAuthServer.cs | 2 + .../Resources/auth_assets/main.css | 14 ++-- .../Resources/auth_assets/main.js | 37 ++++++--- .../Resources/default_site/index.html | 80 +++++++++++-------- 6 files changed, 97 insertions(+), 50 deletions(-) diff --git a/SpotifyAPI.Docs/docs/authorization_code.md b/SpotifyAPI.Docs/docs/authorization_code.md index acf50e6f2..18f3c9d8d 100644 --- a/SpotifyAPI.Docs/docs/authorization_code.md +++ b/SpotifyAPI.Docs/docs/authorization_code.md @@ -81,6 +81,7 @@ public static async Task Main() await _server.Start(); _server.AuthorizationCodeReceived += OnAuthorizationCodeReceived; + _server.ErrorReceived += OnErrorReceived; var request = new LoginRequest(_server.BaseUri, "ClientId", LoginRequest.ResponseType.Code) { @@ -103,6 +104,12 @@ private static async Task OnAuthorizationCodeReceived(object sender, Authorizati var spotify = new SpotifyClient(tokenResponse.AccessToken); // do calls with Spotify and save token? } + +private static async Task OnErrorReceived(object sender, string error, string state) +{ + Console.WriteLine($"Aborting authorization, error received: {error}"); + await _server.Stop(); +} ``` For real examples, have a look at [Example.CLI.PersistentConfig](https://github.com/JohnnyCrazy/SpotifyAPI-NET/tree/master/SpotifyAPI.Web.Examples/Example.CLI.PersistentConfig) and [Example.CLI.CustomHTML](https://github.com/JohnnyCrazy/SpotifyAPI-NET/tree/master/SpotifyAPI.Web.Examples/Example.CLI.CustomHTML) diff --git a/SpotifyAPI.Docs/docs/implicit_grant.md b/SpotifyAPI.Docs/docs/implicit_grant.md index 703809b87..946116459 100644 --- a/SpotifyAPI.Docs/docs/implicit_grant.md +++ b/SpotifyAPI.Docs/docs/implicit_grant.md @@ -89,6 +89,7 @@ public static async Task Main() await _server.Start(); _server.ImplictGrantReceived += OnImplicitGrantReceived; + _server.ErrorReceived += OnErrorReceived; var request = new LoginRequest(_server.BaseUri, "ClientId", LoginRequest.ResponseType.Token) { @@ -103,6 +104,12 @@ private static async Task OnImplicitGrantReceived(object sender, ImplictGrantRes var spotify = new SpotifyClient(response.AccessToken); // do calls with Spotify } + +private static async Task OnErrorReceived(object sender, string error, string state) +{ + Console.WriteLine($"Aborting authorization, error received: {error}"); + await _server.Stop(); +} ``` For real examples, have a look at [Example.CLI.PersistentConfig](https://github.com/JohnnyCrazy/SpotifyAPI-NET/tree/master/SpotifyAPI.Web.Examples/Example.CLI.PersistentConfig) and [Example.CLI.CustomHTML](https://github.com/JohnnyCrazy/SpotifyAPI-NET/tree/master/SpotifyAPI.Web.Examples/Example.CLI.CustomHTML) diff --git a/SpotifyAPI.Web.Auth/EmbedIOAuthServer.cs b/SpotifyAPI.Web.Auth/EmbedIOAuthServer.cs index 42de59e72..90cce5b47 100644 --- a/SpotifyAPI.Web.Auth/EmbedIOAuthServer.cs +++ b/SpotifyAPI.Web.Auth/EmbedIOAuthServer.cs @@ -14,6 +14,7 @@ public class EmbedIOAuthServer : IAuthServer { public event Func? AuthorizationCodeReceived; public event Func? ImplictGrantReceived; + public event Func? ErrorReceived; private const string AssetsResourcePath = "SpotifyAPI.Web.Auth.Resources.auth_assets"; private const string DefaultResourcePath = "SpotifyAPI.Web.Auth.Resources.default_site"; @@ -38,6 +39,7 @@ public EmbedIOAuthServer(Uri baseUri, int port, Assembly resourceAssembly, strin var error = query["error"]; if (error != null) { + ErrorReceived?.Invoke(this, error, query["state"]); throw new AuthException(error, query["state"]); } diff --git a/SpotifyAPI.Web.Auth/Resources/auth_assets/main.css b/SpotifyAPI.Web.Auth/Resources/auth_assets/main.css index 56fcf5d9f..623844b76 100644 --- a/SpotifyAPI.Web.Auth/Resources/auth_assets/main.css +++ b/SpotifyAPI.Web.Auth/Resources/auth_assets/main.css @@ -1,14 +1,14 @@ html, body { - width : 100%; + width: 100%; height: 100%; } body { - color : #f5f6fa; - background-color : #353b48; - width : 100%; - height : 100%; + color: #f5f6fa; + background-color: #353b48; + width: 100%; + height: 100%; background-attachment: fixed; } @@ -20,3 +20,7 @@ main { .logo { margin-bottom: 50px; } + +.hidden { + visibility: hidden; +} diff --git a/SpotifyAPI.Web.Auth/Resources/auth_assets/main.js b/SpotifyAPI.Web.Auth/Resources/auth_assets/main.js index 7a1a337b5..e8a1541a8 100644 --- a/SpotifyAPI.Web.Auth/Resources/auth_assets/main.js +++ b/SpotifyAPI.Web.Auth/Resources/auth_assets/main.js @@ -1,43 +1,54 @@ function getUrlParams(hash, start) { - const hashes = hash.slice(hash.indexOf(start) + 1).split('&') + const hashes = hash.slice(hash.indexOf(start) + 1).split("&"); if (!hashes || hashes.length === 0 || hashes[0] === "") { return undefined; } - const params = {} - hashes.map(hash => { - const [key, val] = hash.split('=') - params[key] = decodeURIComponent(val) - }) - return params + const params = {}; + hashes.map((hash) => { + const [key, val] = hash.split("="); + params[key] = decodeURIComponent(val); + }); + return params; } function handleImplicitGrant() { - const params = getUrlParams(window.location.hash, '#'); + const params = getUrlParams(window.location.hash, "#"); if (!params) { return; } params.request_type = "token"; console.log("Sent request_type token to server", params); - fetch('?' + new URLSearchParams(params).toString(), { - method: 'POST', + fetch("?" + new URLSearchParams(params).toString(), { + method: "POST", }); } handleImplicitGrant(); function handleAuthenticationCode() { - const params = getUrlParams(window.location.search, '?'); + const params = getUrlParams(window.location.search, "?"); if (!params) { return; } params.request_type = "code"; console.log("Sent request_type code to server", params); - fetch('?' + new URLSearchParams(params).toString(), { - method: 'POST', + fetch("?" + new URLSearchParams(params).toString(), { + method: "POST", }); } handleAuthenticationCode(); +document.addEventListener("DOMContentLoaded", () => { + const errorContainer = document.querySelector("#error"); + const successContainer = document.querySelector("#success"); + const params = new URLSearchParams(window.location.search); + + if (params.has("error")) { + errorContainer.classList.remove("hidden"); + } else { + successContainer.classList.remove("hidden"); + } +}); diff --git a/SpotifyAPI.Web.Auth/Resources/default_site/index.html b/SpotifyAPI.Web.Auth/Resources/default_site/index.html index 6c8c71026..e7e0abf45 100644 --- a/SpotifyAPI.Web.Auth/Resources/default_site/index.html +++ b/SpotifyAPI.Web.Auth/Resources/default_site/index.html @@ -1,38 +1,54 @@ + + + + Spotify Authorization + + + + + - - - - Spotify Authorization - - - - - - - -
-
- - + +
+ +
+ +