Added more example docs

This commit is contained in:
Jonas Dellinger 2020-06-04 15:24:13 +02:00
parent fdb0400ccd
commit d245139343
14 changed files with 106 additions and 9 deletions

View File

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

View File

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

View File

@ -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
```

View File

@ -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
```

View File

@ -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
```

View File

@ -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!

View File

@ -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

View File

@ -33,6 +33,7 @@ module.exports = {
label: 'Examples',
items: [
'example_asp',
'example_blazor_wasm',
'example_blazor',
'example_cli_custom_html',
'example_cli_persistent_config',

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 129 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

View File

@ -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}