diff --git a/SpotifyAPI.Docs/docs/auth_introduction.md b/SpotifyAPI.Docs/docs/auth_introduction.md index e6283cac..c2233a9d 100644 --- a/SpotifyAPI.Docs/docs/auth_introduction.md +++ b/SpotifyAPI.Docs/docs/auth_introduction.md @@ -12,9 +12,9 @@ Since every auth flow also needs an application in the [spotify dashboard](https Then, continue with the docs of the specific auth flows: -* [Client Credentials](client_credentials) -* [Implicit Grant](implicit_grant) -* [Authorization Code](authorization_code) -* Token Swap +* [Client Credentials](client_credentials.md) +* [Implicit Grant](implicit_grant.md) +* [Authorization Code](authorization_code.md) +* [Token Swap](token_swap.md) ![auth comparison](/img/auth_comparison.png) diff --git a/SpotifyAPI.Docs/docs/configuration.md b/SpotifyAPI.Docs/docs/configuration.md index 7ade455e..51e7ba26 100644 --- a/SpotifyAPI.Docs/docs/configuration.md +++ b/SpotifyAPI.Docs/docs/configuration.md @@ -45,4 +45,4 @@ public HttpResult Get() } ``` -This way, a single `HTTPClient` will be used. For a real world example, checkout the [ASP.NET Example](example_aspnet) +This way, a single `HTTPClient` will be used. For a real example, checkout the [ASP.NET Example](example_asp.md) diff --git a/SpotifyAPI.Docs/docs/example_asp.md b/SpotifyAPI.Docs/docs/example_asp.md index 48af0eb6..adc6c85e 100644 --- a/SpotifyAPI.Docs/docs/example_asp.md +++ b/SpotifyAPI.Docs/docs/example_asp.md @@ -2,3 +2,27 @@ id: example_asp title: ASP.NET --- + +## Description + +This example is based on ASP .NET Core. It uses `Authorization Code` under the hood with the help of [`AspNet.Security.OAuth.Spotify`](https://www.nuget.org/packages/AspNet.Security.OAuth.Spotify/). It stores the access token in the current user session (cookie-based) and allows to refresh tokens when they expire. Two pages are implemented: + +* Home shows your current playlists via pagination +* Profile shows your current profile information + +![ASP Example - Home](/img/asp_example_home.png) +![ASP Example - Profile](/img/asp_example_profile.png) + +## Run it + +Before running it, make sure you created an app in your [spotify dashboard](https://developer.spotify.com/dashboard/) and `https://localhost:5001` is a redirect uri of it. + +```bash +# Assumes linux and current working directory is the cloned repository +cd SpotifyAPI.Web.Examples/Example.ASP +dotnet restore + +SPOTIFY_CLIENT_ID=YourClientId SPOTIFY_CLIENT_SECRET=YourClientSecret dotnet run + +# Visit https://localhost:5001 +``` diff --git a/SpotifyAPI.Docs/docs/example_blazor.md b/SpotifyAPI.Docs/docs/example_blazor.md index ba219256..4b09256e 100644 --- a/SpotifyAPI.Docs/docs/example_blazor.md +++ b/SpotifyAPI.Docs/docs/example_blazor.md @@ -1,4 +1,24 @@ --- id: example_blazor -title: ASP.NET Blazor +title: Blazor ServerSide --- + +## Description + +Very similar to the [Blazor WASM Example](example_blazor_wasm.md), but runs code on the server side and pushes view updates to the client. + +![ASP Blazor Example - Home](/img/asp_blazor_example_home.png) + +## Run it + +Before running it, make sure you created an app in your [spotify dashboard](https://developer.spotify.com/dashboard/) and `https://localhost:5001` is a redirect uri of it. + +```bash +# Assumes linux and current working directory is the cloned repository +cd SpotifyAPI.Web.Examples/Example.ASPBlazor +dotnet restore + +SPOTIFY_CLIENT_ID=YourClientId SPOTIFY_CLIENT_SECRET=YourClientSecret dotnet run + +# Visit https://localhost:5001 +``` diff --git a/SpotifyAPI.Docs/docs/example_blazor_wasm.md b/SpotifyAPI.Docs/docs/example_blazor_wasm.md new file mode 100644 index 00000000..d8679676 --- /dev/null +++ b/SpotifyAPI.Docs/docs/example_blazor_wasm.md @@ -0,0 +1,29 @@ +--- +id: example_blazor_wasm +title: Blazor WASM +--- + +## Description + +This small cross-platform web app runs on `Blazor WebAssembly`, which was released on 19. May 2020. It allows to run C# code in any browser which supports WebAssembly. This allows to create .NET full-stack web projects without writing any JavaScript. Find more about [Blazor WebAssembly here](https://devblogs.microsoft.com/aspnet/blazor-webassembly-3-2-0-now-available/) + +Since this library is compatible with `.NET Standard 2.1`, you can use all features of `SpotifyAPI.Web` in your blazor wasm app. The example logs the user in via `Implicit Grant` and does 2 user-related API requests from the browser. You can observe the requests from your browsers network tools. + +![BlazorWASM Spotify Example](/img/blazorwasm_homepage.png) + +![BlazorWASM Spotify Example - network tools](/img/blazorwasm_network_tools.png) + +## Run it + +Before running it, make sure you created an app in your [spotify dashboard](https://developer.spotify.com/dashboard/) and `https://localhost:5001` is a redirect uri of it. + +```bash +# Assumes linux and current working directory is the cloned repository +cd SpotifyAPI.Web.Examples/Example.BlazorWASM +dotnet restore + +echo "{ \"SPOTIFY_CLIENT_ID\": \"YourSpotifyClientId\" }" > wwwroot/appsettings.json +dotnet run + +# Visit https://localhost:5001 +``` diff --git a/SpotifyAPI.Docs/docs/getting_started.md b/SpotifyAPI.Docs/docs/getting_started.md index 6b2d973f..19bd7bb1 100644 --- a/SpotifyAPI.Docs/docs/getting_started.md +++ b/SpotifyAPI.Docs/docs/getting_started.md @@ -57,7 +57,7 @@ class Program ``` :::tip -Notice that the spotify api does not allow unauthorized API access. Wondering where you should get an access token from? For a quick test, head over to the [Spotify Developer Console](https://developer.spotify.com/console/get-album/) and generate an access token with the required scopes! For a permanent solution, head over to the [authentication guides](auth_introduction). +Notice that the spotify api does not allow unauthorized API access. Wondering where you should get an access token from? For a quick test, head over to the [Spotify Developer Console](https://developer.spotify.com/console/get-album/) and generate an access token with the required scopes! For a permanent solution, head over to the [authentication guides](auth_introduction.md). ::: @@ -105,4 +105,4 @@ If a query/body parameter is required, it has to be supplied in the constructor ## Guides -All other relevant topics are covered in the "Guides" and [Authentication Guides](auth_introduction) section in the sidebar! +All other relevant topics are covered in the "Guides" and [Authentication Guides](auth_introduction.md) section in the sidebar! diff --git a/SpotifyAPI.Docs/docs/token_swap.md b/SpotifyAPI.Docs/docs/token_swap.md index 28428669..14c62f2e 100644 --- a/SpotifyAPI.Docs/docs/token_swap.md +++ b/SpotifyAPI.Docs/docs/token_swap.md @@ -5,7 +5,7 @@ title: Token Swap Token Swap provides an authenticatiow flow where client-side apps (like cli/desktop/mobile apps) are still able to use long-living tokens and the oppurtunity to refresh them without exposing your application's secret. This however requires a server-side part to work. -It is based on the [Authorization Code](authorization_code) flow and is also documented by spotify: [Token Swap and Refresh ](https://developer.spotify.com/documentation/ios/guides/token-swap-and-refresh/). +It is based on the [Authorization Code](authorization_code.md) flow and is also documented by spotify: [Token Swap and Refresh ](https://developer.spotify.com/documentation/ios/guides/token-swap-and-refresh/). ## Flow diff --git a/SpotifyAPI.Docs/sidebars.js b/SpotifyAPI.Docs/sidebars.js index 2f18092b..20eaaa3b 100644 --- a/SpotifyAPI.Docs/sidebars.js +++ b/SpotifyAPI.Docs/sidebars.js @@ -33,6 +33,7 @@ module.exports = { label: 'Examples', items: [ 'example_asp', + 'example_blazor_wasm', 'example_blazor', 'example_cli_custom_html', 'example_cli_persistent_config', diff --git a/SpotifyAPI.Docs/static/img/asp_blazor_example_home.png b/SpotifyAPI.Docs/static/img/asp_blazor_example_home.png new file mode 100644 index 00000000..dc679070 Binary files /dev/null and b/SpotifyAPI.Docs/static/img/asp_blazor_example_home.png differ diff --git a/SpotifyAPI.Docs/static/img/asp_example_home.png b/SpotifyAPI.Docs/static/img/asp_example_home.png new file mode 100644 index 00000000..0ff80795 Binary files /dev/null and b/SpotifyAPI.Docs/static/img/asp_example_home.png differ diff --git a/SpotifyAPI.Docs/static/img/asp_example_profile.png b/SpotifyAPI.Docs/static/img/asp_example_profile.png new file mode 100644 index 00000000..d92b85a4 Binary files /dev/null and b/SpotifyAPI.Docs/static/img/asp_example_profile.png differ diff --git a/SpotifyAPI.Docs/static/img/blazorwasm_homepage.png b/SpotifyAPI.Docs/static/img/blazorwasm_homepage.png new file mode 100644 index 00000000..46baf933 Binary files /dev/null and b/SpotifyAPI.Docs/static/img/blazorwasm_homepage.png differ diff --git a/SpotifyAPI.Docs/static/img/blazorwasm_network_tools.png b/SpotifyAPI.Docs/static/img/blazorwasm_network_tools.png new file mode 100644 index 00000000..ff28c88a Binary files /dev/null and b/SpotifyAPI.Docs/static/img/blazorwasm_network_tools.png differ diff --git a/SpotifyAPI.sln b/SpotifyAPI.sln index b75d5325..28f9e3af 100644 --- a/SpotifyAPI.sln +++ b/SpotifyAPI.sln @@ -30,6 +30,8 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Example.TokenSwap", "Exampl EndProject Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Client", "SpotifyAPI.Web.Examples\Example.TokenSwap\Client\Client.csproj", "{D5C85F68-BE15-4CF3-A84B-98EEBCA584AD}" EndProject +Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Example.BlazorWASM", "SpotifyAPI.Web.Examples\Example.BlazorWASM\Example.BlazorWASM.csproj", "{D6E9A2B1-3219-4AF3-87E5-D2E7AB3063A2}" +EndProject Global GlobalSection(SolutionConfigurationPlatforms) = preSolution Debug|Any CPU = Debug|Any CPU @@ -230,6 +232,26 @@ Global {D5C85F68-BE15-4CF3-A84B-98EEBCA584AD}.Release|x64.Build.0 = Release|Any CPU {D5C85F68-BE15-4CF3-A84B-98EEBCA584AD}.Release|x86.ActiveCfg = Release|Any CPU {D5C85F68-BE15-4CF3-A84B-98EEBCA584AD}.Release|x86.Build.0 = Release|Any CPU + {D6E9A2B1-3219-4AF3-87E5-D2E7AB3063A2}.Debug|Any CPU.ActiveCfg = Debug|Any CPU + {D6E9A2B1-3219-4AF3-87E5-D2E7AB3063A2}.Debug|Any CPU.Build.0 = Debug|Any CPU + {D6E9A2B1-3219-4AF3-87E5-D2E7AB3063A2}.Debug|ARM.ActiveCfg = Debug|Any CPU + {D6E9A2B1-3219-4AF3-87E5-D2E7AB3063A2}.Debug|ARM.Build.0 = Debug|Any CPU + {D6E9A2B1-3219-4AF3-87E5-D2E7AB3063A2}.Debug|ARM64.ActiveCfg = Debug|Any CPU + {D6E9A2B1-3219-4AF3-87E5-D2E7AB3063A2}.Debug|ARM64.Build.0 = Debug|Any CPU + {D6E9A2B1-3219-4AF3-87E5-D2E7AB3063A2}.Debug|x64.ActiveCfg = Debug|Any CPU + {D6E9A2B1-3219-4AF3-87E5-D2E7AB3063A2}.Debug|x64.Build.0 = Debug|Any CPU + {D6E9A2B1-3219-4AF3-87E5-D2E7AB3063A2}.Debug|x86.ActiveCfg = Debug|Any CPU + {D6E9A2B1-3219-4AF3-87E5-D2E7AB3063A2}.Debug|x86.Build.0 = Debug|Any CPU + {D6E9A2B1-3219-4AF3-87E5-D2E7AB3063A2}.Release|Any CPU.ActiveCfg = Release|Any CPU + {D6E9A2B1-3219-4AF3-87E5-D2E7AB3063A2}.Release|Any CPU.Build.0 = Release|Any CPU + {D6E9A2B1-3219-4AF3-87E5-D2E7AB3063A2}.Release|ARM.ActiveCfg = Release|Any CPU + {D6E9A2B1-3219-4AF3-87E5-D2E7AB3063A2}.Release|ARM.Build.0 = Release|Any CPU + {D6E9A2B1-3219-4AF3-87E5-D2E7AB3063A2}.Release|ARM64.ActiveCfg = Release|Any CPU + {D6E9A2B1-3219-4AF3-87E5-D2E7AB3063A2}.Release|ARM64.Build.0 = Release|Any CPU + {D6E9A2B1-3219-4AF3-87E5-D2E7AB3063A2}.Release|x64.ActiveCfg = Release|Any CPU + {D6E9A2B1-3219-4AF3-87E5-D2E7AB3063A2}.Release|x64.Build.0 = Release|Any CPU + {D6E9A2B1-3219-4AF3-87E5-D2E7AB3063A2}.Release|x86.ActiveCfg = Release|Any CPU + {D6E9A2B1-3219-4AF3-87E5-D2E7AB3063A2}.Release|x86.Build.0 = Release|Any CPU EndGlobalSection GlobalSection(SolutionProperties) = preSolution HideSolutionNode = FALSE @@ -242,6 +264,7 @@ Global {258D1593-5B3B-485F-A71F-54D7FAB221FA} = {48A7DE65-29BB-409C-AC45-77F6586C0B15} {A2A74C61-9AEE-4802-9E29-518CB8053E6F} = {48A7DE65-29BB-409C-AC45-77F6586C0B15} {D5C85F68-BE15-4CF3-A84B-98EEBCA584AD} = {A2A74C61-9AEE-4802-9E29-518CB8053E6F} + {D6E9A2B1-3219-4AF3-87E5-D2E7AB3063A2} = {48A7DE65-29BB-409C-AC45-77F6586C0B15} EndGlobalSection GlobalSection(ExtensibilityGlobals) = postSolution SolutionGuid = {097062B8-0E87-43C8-BD98-61843A68BE6D}