Skip to content

Commit 163200f

Browse files
JohnnyCrazyJohnnyCrazy
committed
Added ErrorReceived to embedded auth server
Also style the default HTML site based on error/success values. Fixes #566
1 parent ddb1dc0 commit 163200f

File tree

6 files changed

+97
-50
lines changed

6 files changed

+97
-50
lines changed

‎SpotifyAPI.Docs/docs/authorization_code.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@ public static async Task Main()
8181
await _server.Start();
8282

8383
_server.AuthorizationCodeReceived += OnAuthorizationCodeReceived;
84+
_server.ErrorReceived += OnErrorReceived;
8485

8586
var request = new LoginRequest(_server.BaseUri, "ClientId", LoginRequest.ResponseType.Code)
8687
{
@@ -103,6 +104,12 @@ private static async Task OnAuthorizationCodeReceived(object sender, Authorizati
103104
var spotify = new SpotifyClient(tokenResponse.AccessToken);
104105
// do calls with Spotify and save token?
105106
}
107+
108+
private static async Task OnErrorReceived(object sender, string error, string state)
109+
{
110+
Console.WriteLine($"Aborting authorization, error received: {error}");
111+
await _server.Stop();
112+
}
106113
```
107114

108115
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)

‎SpotifyAPI.Docs/docs/implicit_grant.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ public static async Task Main()
8989
await _server.Start();
9090

9191
_server.ImplictGrantReceived += OnImplicitGrantReceived;
92+
_server.ErrorReceived += OnErrorReceived;
9293

9394
var request = new LoginRequest(_server.BaseUri, "ClientId", LoginRequest.ResponseType.Token)
9495
{
@@ -103,6 +104,12 @@ private static async Task OnImplicitGrantReceived(object sender, ImplictGrantRes
103104
var spotify = new SpotifyClient(response.AccessToken);
104105
// do calls with Spotify
105106
}
107+
108+
private static async Task OnErrorReceived(object sender, string error, string state)
109+
{
110+
Console.WriteLine($"Aborting authorization, error received: {error}");
111+
await _server.Stop();
112+
}
106113
```
107114

108115
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)

‎SpotifyAPI.Web.Auth/EmbedIOAuthServer.cs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ public class EmbedIOAuthServer : IAuthServer
1414
{
1515
public event Func<object, AuthorizationCodeResponse, Task>? AuthorizationCodeReceived;
1616
public event Func<object, ImplictGrantResponse, Task>? ImplictGrantReceived;
17+
public event Func<object, string, string?, Task>? ErrorReceived;
1718

1819
private const string AssetsResourcePath = "SpotifyAPI.Web.Auth.Resources.auth_assets";
1920
private const string DefaultResourcePath = "SpotifyAPI.Web.Auth.Resources.default_site";
@@ -38,6 +39,7 @@ public EmbedIOAuthServer(Uri baseUri, int port, Assembly resourceAssembly, strin
3839
var error = query["error"];
3940
if (error != null)
4041
{
42+
ErrorReceived?.Invoke(this, error, query["state"]);
4143
throw new AuthException(error, query["state"]);
4244
}
4345

‎SpotifyAPI.Web.Auth/Resources/auth_assets/main.css‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
html,
22
body {
3-
width : 100%;
3+
width: 100%;
44
height: 100%;
55
}
66

77
body {
8-
color : #f5f6fa;
9-
background-color : #353b48;
10-
width : 100%;
11-
height : 100%;
8+
color: #f5f6fa;
9+
background-color: #353b48;
10+
width: 100%;
11+
height: 100%;
1212
background-attachment: fixed;
1313
}
1414

@@ -20,3 +20,7 @@ main {
2020
.logo {
2121
margin-bottom: 50px;
2222
}
23+
24+
.hidden {
25+
visibility: hidden;
26+
}

‎SpotifyAPI.Web.Auth/Resources/auth_assets/main.js‎

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,54 @@
11
function getUrlParams(hash, start) {
2-
const hashes = hash.slice(hash.indexOf(start) + 1).split('&')
2+
const hashes = hash.slice(hash.indexOf(start) + 1).split("&");
33

44
if (!hashes || hashes.length === 0 || hashes[0] === "") {
55
return undefined;
66
}
77

8-
const params = {}
9-
hashes.map(hash => {
10-
const [key, val] = hash.split('=')
11-
params[key] = decodeURIComponent(val)
12-
})
13-
return params
8+
const params = {};
9+
hashes.map((hash) => {
10+
const [key, val] = hash.split("=");
11+
params[key] = decodeURIComponent(val);
12+
});
13+
return params;
1414
}
1515

1616
function handleImplicitGrant() {
17-
const params = getUrlParams(window.location.hash, '#');
17+
const params = getUrlParams(window.location.hash, "#");
1818
if (!params) {
1919
return;
2020
}
2121
params.request_type = "token";
2222

2323
console.log("Sent request_type token to server", params);
24-
fetch('?' + new URLSearchParams(params).toString(), {
25-
method: 'POST',
24+
fetch("?" + new URLSearchParams(params).toString(), {
25+
method: "POST",
2626
});
2727
}
2828
handleImplicitGrant();
2929

3030
function handleAuthenticationCode() {
31-
const params = getUrlParams(window.location.search, '?');
31+
const params = getUrlParams(window.location.search, "?");
3232
if (!params) {
3333
return;
3434
}
3535
params.request_type = "code";
3636

3737
console.log("Sent request_type code to server", params);
38-
fetch('?' + new URLSearchParams(params).toString(), {
39-
method: 'POST',
38+
fetch("?" + new URLSearchParams(params).toString(), {
39+
method: "POST",
4040
});
4141
}
4242
handleAuthenticationCode();
4343

44+
document.addEventListener("DOMContentLoaded", () => {
45+
const errorContainer = document.querySelector("#error");
46+
const successContainer = document.querySelector("#success");
47+
const params = new URLSearchParams(window.location.search);
48+
49+
if (params.has("error")) {
50+
errorContainer.classList.remove("hidden");
51+
} else {
52+
successContainer.classList.remove("hidden");
53+
}
54+
});

‎SpotifyAPI.Web.Auth/Resources/default_site/index.html‎

Lines changed: 48 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,54 @@
11
<!DOCTYPE html>
22
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<title>Spotify Authorization</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
<link
9+
href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
10+
rel="stylesheet"
11+
/>
12+
<link href="/auth_assets/main.css" rel="stylesheet" />
13+
<script src="/auth_assets/main.js"></script>
14+
</head>
315

4-
<head>
5-
<meta charset='utf-8'>
6-
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
7-
<title>Spotify Authorization</title>
8-
<meta name='viewport' content='width=device-width, initial-scale=1'>
9-
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
10-
<link href="/auth_assets/main.css" rel="stylesheet">
11-
<script src="/auth_assets/main.js"></script>
12-
</head>
13-
14-
<body>
15-
<main>
16-
<div class="flex justify-center flex-wrap logo">
17-
<div class="w-1/8">
18-
<img src="/auth_assets/logo.svg" width="120" height="120" />
16+
<body>
17+
<main>
18+
<div class="flex justify-center flex-wrap logo">
19+
<div class="w-1/8">
20+
<img src="/auth_assets/logo.svg" width="120" height="120" />
21+
</div>
1922
</div>
20-
</div>
21-
<h1 class="text-4xl">Success!</h1>
22-
<p class="text-xl mx-2">
23-
Spotify Authorization was successful. You can close this tab and go back to your app.
24-
</p>
25-
<div class="text-center py-4 lg:px-4 my-6">
26-
<div class="p-2 bg-teal-800 items-center text-teal-100 leading-none lg:rounded-full flex lg:inline-flex"
27-
role="alert">
28-
<span class="flex rounded-full bg-teal-500 uppercase px-2 py-1 text-xs font-bold mr-3">Tip</span>
29-
<span class="font-semibold mr-2 text-left flex-auto">
30-
If the app does not detect the authorization, make sure you use one of the following supported Browsers:
31-
<b>Chrome</b>, <b>Edge</b> or <b>Firefox</b>
32-
</span>
23+
<div id="error" class="hidden">
24+
<h1 class="text-4xl">Error!</h1>
25+
<p class="text-xl mx-2">
26+
Spotify Authorization was not successful. You may want to retry.
27+
</p>
3328
</div>
34-
</div>
35-
</main>
36-
</body>
37-
29+
<div id="success" class="hidden">
30+
<h1 class="text-4xl">Success!</h1>
31+
<p class="text-xl mx-2">
32+
Spotify Authorization was successful. You can close this tab and go
33+
back to your app.
34+
</p>
35+
</div>
36+
<div class="text-center py-4 lg:px-4 my-6">
37+
<div
38+
class="p-2 bg-teal-800 items-center text-teal-100 leading-none lg:rounded-full flex lg:inline-flex"
39+
role="alert"
40+
>
41+
<span
42+
class="flex rounded-full bg-teal-500 uppercase px-2 py-1 text-xs font-bold mr-3"
43+
>Tip</span
44+
>
45+
<span class="font-semibold mr-2 text-left flex-auto">
46+
If the app does not detect the authorization, make sure you use one
47+
of the following supported Browsers:
48+
<b>Chrome</b>, <b>Edge</b> or <b>Firefox</b>
49+
</span>
50+
</div>
51+
</div>
52+
</main>
53+
</body>
3854
</html>

0 commit comments

Comments
 (0)