mirror of
https://github.com/Sarsoo/Spotify.NET.git
synced 2024-12-24 23:16:28 +00:00
365 lines
18 KiB
HTML
365 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<meta name="author" content="JohnnyCrazy">
|
|
|
|
<link rel="shortcut icon" href="../../img/favicon.ico">
|
|
|
|
<title>SpotifyAPI.Web.Auth - SpotifyAPI-NET</title>
|
|
|
|
<link href="../../css/bootstrap-custom.min.css" rel="stylesheet">
|
|
<link href="../../css/font-awesome-4.0.3.css" rel="stylesheet">
|
|
<link href="../../css/prettify-1.0.css" rel="stylesheet">
|
|
<link href="../../css/base.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/agate.min.css">
|
|
|
|
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
|
<!--[if lt IE 9]>
|
|
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
|
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
|
<![endif]-->
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
|
|
<div class="container">
|
|
|
|
<!-- Collapsed navigation -->
|
|
<div class="navbar-header">
|
|
<!-- Expander button -->
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
|
|
<!-- Main title -->
|
|
<a class="navbar-brand" href="../..">SpotifyAPI-NET</a>
|
|
</div>
|
|
|
|
<!-- Expanded navigation -->
|
|
<div class="navbar-collapse collapse">
|
|
<!-- Main navigation -->
|
|
<ul class="nav navbar-nav">
|
|
|
|
|
|
<li >
|
|
<a href="../..">Home</a>
|
|
</li>
|
|
|
|
|
|
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">SpotifyAPI.Web <b class="caret"></b></a>
|
|
<ul class="dropdown-menu">
|
|
|
|
<li >
|
|
<a href="../gettingstarted/">Getting started</a>
|
|
</li>
|
|
|
|
<li >
|
|
<a href="../examples/">Examples</a>
|
|
</li>
|
|
|
|
<li >
|
|
<a href="../proxy/">Proxy</a>
|
|
</li>
|
|
|
|
<li >
|
|
<a href="../albums/">- Albums</a>
|
|
</li>
|
|
|
|
<li >
|
|
<a href="../artists/">- Artists</a>
|
|
</li>
|
|
|
|
<li >
|
|
<a href="../browse/">- Browse</a>
|
|
</li>
|
|
|
|
<li >
|
|
<a href="../follow/">- Follow</a>
|
|
</li>
|
|
|
|
<li >
|
|
<a href="../library/">- Library</a>
|
|
</li>
|
|
|
|
<li >
|
|
<a href="../personalization/">- Personalization</a>
|
|
</li>
|
|
|
|
<li >
|
|
<a href="../player/">- Player</a>
|
|
</li>
|
|
|
|
<li >
|
|
<a href="../playlists/">- Playlists</a>
|
|
</li>
|
|
|
|
<li >
|
|
<a href="../profiles/">- Profiles</a>
|
|
</li>
|
|
|
|
<li >
|
|
<a href="../search/">- Search</a>
|
|
</li>
|
|
|
|
<li >
|
|
<a href="../tracks/">- Tracks</a>
|
|
</li>
|
|
|
|
<li >
|
|
<a href="../util/">- Util</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</li>
|
|
|
|
|
|
|
|
<li class="active">
|
|
<a href="./">SpotifyAPI.Web.Auth</a>
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
<!-- Search, Navigation and Repo links -->
|
|
<ul class="nav navbar-nav navbar-right">
|
|
|
|
<li >
|
|
<a rel="next" href="../util/">
|
|
<i class="fa fa-arrow-left"></i> Previous
|
|
</a>
|
|
</li>
|
|
<li class="disabled">
|
|
<a rel="prev" >
|
|
Next <i class="fa fa-arrow-right"></i>
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="https://github.com/JohnnyCrazy/SpotifyAPI-NET">
|
|
|
|
<i class="fa fa-github"></i>
|
|
|
|
GitHub
|
|
</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="col-md-3"><div class="bs-sidebar hidden-print affix well" role="complementary" style="height=90%;">
|
|
<ul class="nav bs-sidenav">
|
|
|
|
<li class="main active"><a href="#auth-methods">Auth-Methods</a></li>
|
|
|
|
<li><a href="#notes">Notes</a></li>
|
|
|
|
<li><a href="#implicitgrantauth">ImplicitGrantAuth</a></li>
|
|
|
|
<li><a href="#tokenswapauth">TokenSwapAuth</a></li>
|
|
|
|
<li><a href="#autorizationcodeauth">AutorizationCodeAuth</a></li>
|
|
|
|
<li><a href="#clientcredentialsauth">ClientCredentialsAuth</a></li>
|
|
|
|
|
|
</ul>
|
|
</div></div>
|
|
<div class="col-md-9" role="main">
|
|
|
|
<h1 id="auth-methods">Auth-Methods</h1>
|
|
<p>Before you can use the Web API full functional, you need the user to authenticate your Application.
|
|
If you want to know more, you can read to the whole auth-process <a href="https://developer.spotify.com/web-api/authorization-guide/">here</a>.</p>
|
|
<p>Before you start, install <code>SpotifyAPI.Web.Auth</code> and create an application at Spotify: <a href="https://developer.spotify.com/my-applications/#!/applications">Your Applications</a></p>
|
|
<hr />
|
|
<p>After you created your Application, you will have following important values:</p>
|
|
<blockquote>
|
|
<p><strong>Client_Id</strong>: This is your client_id, you don't have to hide it
|
|
<strong>Client_Secret</strong>: Never use this in one of your client-side apps!! Keep it secret!
|
|
<strong>Redirect URIs</strong>: Add "http://localhost", if you want full support for this API</p>
|
|
</blockquote>
|
|
<p>Now you can start with the user-authentication, Spotify provides 3 ways (4 if you consider different implementations):</p>
|
|
<ul>
|
|
<li>
|
|
<p><a href="../../SpotifyWebAPI/auth#implicitgrantauth">ImplicitGrantAuth</a></p>
|
|
</li>
|
|
<li>
|
|
<p><a href="../../SpotifyWebAPI/auth#tokenswapauth">TokenSwapAuth</a> (<strong>Recommended</strong>, server-side code mandatory, most secure method. The necessary code is shown here so you do not have to code it yourself.)</p>
|
|
</li>
|
|
<li>
|
|
<p><a href="../../SpotifyWebAPI/auth#autorizationcodeauth">AutorizationCodeAuth</a> (Not recommended, server-side code needed, else it's unsecure)</p>
|
|
</li>
|
|
<li>
|
|
<p><a href="../../SpotifyWebAPI/auth#clientcredentialsauth">ClientCredentialsAuth</a> (Not recommended, server-side code needed, else it's unsecure)</p>
|
|
</li>
|
|
</ul>
|
|
<h2 id="notes">Notes</h2>
|
|
<p>Generally, if you're developing a 100% client-side application, no auth mechanism is totally secure. <code>AutorizationCodeAuth</code> and <code>ClientCredentialsAuth</code> require your clients to know the <code>client_secret</code>, which should be kept secret. For <code>ImplicitGrantAuth</code> to work, <code>http://localhost</code> needs to be added to the redirect uris of your spotify application. Since <code>localhost</code> is not a controlled domain by you, everybody is able to generate API-Keys. However, it is still the best option of all 3.</p>
|
|
<p>Overview:
|
|
<img alt="Overview" src="http://i.imgur.com/uf3ahTl.png" /></p>
|
|
<p>After implementing one of the provided auth-methods, you can start doing requests with the token you get from one of the auth-methods.</p>
|
|
<h2 id="implicitgrantauth">ImplicitGrantAuth</h2>
|
|
<p>This way is <strong>recommended</strong> and the only auth-process which does not need a server-side exchange of keys. With this approach, you directly get a Token object after the user authed your application.
|
|
You won't be able to refresh the token. If you want to use the internal Http server, please add "http://localhost" to your application redirects.</p>
|
|
<p>More info: <a href="https://developer.spotify.com/documentation/general/guides/authorization-guide/#implicit-grant-flow">here</a></p>
|
|
<pre><code class="c#">static async void Main(string[] args)
|
|
{
|
|
ImplicitGrantAuth auth =
|
|
new ImplicitGrantAuth(_clientId, "http://localhost:4002", "http://localhost:4002", Scope.UserReadPrivate);
|
|
auth.AuthReceived += async (sender, payload) =>
|
|
{
|
|
auth.Stop(); // `sender` is also the auth instance
|
|
SpotifyWebAPI api = new SpotifyWebAPI() {TokenType = payload.TokenType, AccessToken = payload.AccessToken};
|
|
// Do requests with API client
|
|
};
|
|
auth.Start(); // Starts an internal HTTP Server
|
|
auth.OpenBrowser();
|
|
}
|
|
</code></pre>
|
|
|
|
<h2 id="tokenswapauth">TokenSwapAuth</h2>
|
|
<p>This way uses server-side code or at least access to an exchange server, otherwise, compared to other
|
|
methods, it is impossible to use.</p>
|
|
<p>With this approach, you provide the URI/URL to your desired exchange server to perform all necessary
|
|
requests to Spotify, as well as requests that return back to the "server URI".</p>
|
|
<p>The exchange server <strong>must</strong> be able to:</p>
|
|
<ul>
|
|
<li>Return the authorization code from Spotify API authenticate page via GET request to the "server URI".</li>
|
|
<li>Request the token response object via POST to the Spotify API token page.</li>
|
|
<li>Request a refreshed token response object via POST to the Spotify API token page.</li>
|
|
</ul>
|
|
<p><strong>The good news is that you do not need to code it yourself.</strong></p>
|
|
<p>The advantages of this method are that the client ID and redirect URI are very well hidden and almost unexposed, but more importantly, your client secret is <strong>never</strong> exposed and is completely hidden compared to other methods (excluding <a href="../../SpotifyWebAPI/auth#implicitgrantauth">ImplicitGrantAuth</a>
|
|
as it does not deal with a client secret). This means
|
|
your Spotify app <strong>cannot</strong> be spoofed by a malicious third party.</p>
|
|
<h3 id="using-tokenswapwebapifactory">Using TokenSwapWebAPIFactory</h3>
|
|
<p>The TokenSwapWebAPIFactory will create and configure a SpotifyWebAPI object for you.</p>
|
|
<p>It does this through the method GetWebApiAsync <strong>asynchronously</strong>, which means it will not halt execution of your program while obtaining it for you. If you would like to halt execution, which is <strong>synchronous</strong>, use <code>GetWebApiAsync().Result</code> without using <strong>await</strong>.</p>
|
|
<pre><code class="c#">TokenSwapWebAPIFactory webApiFactory;
|
|
SpotifyWebAPI spotify;
|
|
|
|
// You should store a reference to WebAPIFactory if you are using AutoRefresh or want to manually refresh it later on. New WebAPIFactory objects cannot refresh SpotifyWebAPI object that they did not give to you.
|
|
webApiFactory = new TokenSwapWebAPIFactory("INSERT LINK TO YOUR index.php HERE")
|
|
{
|
|
Scope = Scope.UserReadPrivate | Scope.UserReadEmail | Scope.PlaylistReadPrivate,
|
|
AutoRefresh = true
|
|
};
|
|
// You may want to react to being able to use the Spotify service.
|
|
// webApiFactory.OnAuthSuccess += (sender, e) => authorized = true;
|
|
// You may want to react to your user's access expiring.
|
|
// webApiFactory.OnAccessTokenExpired += (sender, e) => authorized = false;
|
|
|
|
try
|
|
{
|
|
spotify = await webApiFactory.GetWebApiAsync();
|
|
// Synchronous way:
|
|
// spotify = webApiFactory.GetWebApiAsync().Result;
|
|
}
|
|
catch (Exception ex)
|
|
{
|
|
// Example way to handle error reporting gracefully with your SpotifyWebAPI wrapper
|
|
// UpdateStatus($"Spotify failed to load: {ex.Message}");
|
|
}
|
|
</code></pre>
|
|
|
|
<h3 id="using-tokenswapauth">Using TokenSwapAuth</h3>
|
|
<p>Since the TokenSwapWebAPIFactory not only simplifies the whole process but offers additional functionality too
|
|
(such as AutoRefresh and AuthSuccess AuthFailure events), use of this way is very verbose and is only
|
|
recommended if you are having issues with TokenSwapWebAPIFactory or need access to the tokens.</p>
|
|
<pre><code class="c#">TokenSwapAuth auth = new TokenSwapAuth(
|
|
exchangeServerUri: "INSERT LINK TO YOUR index.php HERE",
|
|
serverUri: "http://localhost:4002",
|
|
scope: Scope.UserReadPrivate | Scope.UserReadEmail | Scope.PlaylistReadPrivate
|
|
);
|
|
auth.AuthReceived += async (sender, response) =>
|
|
{
|
|
lastToken = await auth.ExchangeCodeAsync(response.Code);
|
|
|
|
spotify = new SpotifyWebAPI()
|
|
{
|
|
TokenType = lastToken.TokenType,
|
|
AccessToken = lastToken.AccessToken
|
|
};
|
|
|
|
authenticated = true;
|
|
auth.Stop();
|
|
};
|
|
auth.OnAccessTokenExpired += async (sender, e) => spotify.AccessToken = (await auth.RefreshAuthAsync(lastToken.RefreshToken)).AccessToken;
|
|
auth.Start();
|
|
auth.OpenBrowser();
|
|
</code></pre>
|
|
|
|
<h3 id="token-swap-endpoint">Token Swap Endpoint</h3>
|
|
<p>To keep your client secret completely secure and your client ID and redirect URI as secure as possible, use of a web server (such as a php website) is required.</p>
|
|
<p>To use this method, an external HTTP Server (that you may need to create) needs to be able to supply the following HTTP Endpoints to your application:</p>
|
|
<p><code>/swap</code> - Swaps out an <code>authorization_code</code> with an <code>access_token</code> and <code>refresh_token</code> - The following parameters are required in the JSON POST Body:
|
|
- <code>grant_type</code> (set to <code>"authorization_code"</code>)
|
|
- <code>code</code> (the <code>authorization_code</code>)
|
|
- <code>redirect_uri</code>
|
|
- - <strong>Important</strong> The page that the redirect URI links to must return the authorization code json to your <code>serverUri</code> (default is 'http://localhost:4002') but to the folder 'auth', like this: 'http://localhost:4002/auth'.</p>
|
|
<p><code>/refresh</code> - Refreshes an <code>access_token</code> - The following parameters are required in the JSON POST Body:
|
|
- <code>grant_type</code> (set to <code>"refresh_token"</code>)
|
|
- <code>refresh_token</code></p>
|
|
<p>The following open-source token swap endpoint code can be used for your website:
|
|
- <a href="https://github.com/rollersteaam/spotify-token-swap-php">rollersteaam/spotify-token-swap-php</a>
|
|
- <a href="https://github.com/simontaen/SpotifyTokenSwap">simontaen/SpotifyTokenSwap</a></p>
|
|
<h4 id="remarks">Remarks</h4>
|
|
<p>It should be noted that GitHub Pages does not support hosting php scripts. Hosting php scripts through it will cause the php to render as plain HTML, potentially compromising your client secret while doing absolutely nothing.</p>
|
|
<p>Be sure you have whitelisted your redirect uri in the Spotify Developer Dashboard otherwise the authorization will always fail.</p>
|
|
<p>If you did not use the WebAPIFactory or you provided a <code>serverUri</code> different from its default, you must make sure your redirect uri's script at your endpoint will properly redirect to your <code>serverUri</code> (such as changing the areas which refer to <code>localhost:4002</code> if you had changed <code>serverUri</code> from its default), otherwise it will never reach your new <code>serverUri</code>.</p>
|
|
<h2 id="autorizationcodeauth">AutorizationCodeAuth</h2>
|
|
<p>This way is <strong>not recommended</strong> and requires server-side code to run securely.
|
|
With this approach, you first get a code which you need to trade against the access-token.
|
|
In this exchange you need to provide your Client-Secret and because of that it's not recommended.
|
|
A good thing about this method: You can always refresh your token, without having the user to auth it again</p>
|
|
<p>More info: <a href="https://developer.spotify.com/documentation/general/guides/authorization-guide/#authorization-code-flow">here</a></p>
|
|
<pre><code class="c#">static async void Main(string[] args)
|
|
{
|
|
AuthorizationCodeAuth auth =
|
|
new AuthorizationCodeAuth(_clientId, _secretId, "http://localhost:4002", "http://localhost:4002",
|
|
Scope.PlaylistReadPrivate | Scope.PlaylistReadCollaborative);
|
|
auth.AuthReceived += async (sender, payload) =>
|
|
{
|
|
auth.Stop();
|
|
Token token = await auth.ExchangeCode(payload.Code);
|
|
SpotifyWebAPI api = new SpotifyWebAPI() {TokenType = token.TokenType, AccessToken = token.AccessToken};
|
|
// Do requests with API client
|
|
};
|
|
auth.Start(); // Starts an internal HTTP Server
|
|
auth.OpenBrowser();
|
|
}
|
|
</code></pre>
|
|
|
|
<h2 id="clientcredentialsauth">ClientCredentialsAuth</h2>
|
|
<p>With this approach, you make a POST Request with a base64 encoded string (consists of ClientId + ClientSecret). You will directly get the token (Without a local HTTP Server), but it will expire and can't be refreshed.
|
|
If you want to use it securely, you would need to do it all server-side.
|
|
<strong>NOTE:</strong> You will only be able to query non-user-related information e.g search for a Track.</p>
|
|
<p>More info: <a href="https://developer.spotify.com/documentation/general/guides/authorization-guide/#client-credentials-flow">here</a></p>
|
|
<pre><code class="c#">CredentialsAuth auth = new CredentialsAuth(_clientId, _secretId);
|
|
Token token = await auth.GetToken();
|
|
SpotifyWebAPI api = new SpotifyWebAPI() {TokenType = token.TokenType, AccessToken = token.AccessToken};
|
|
</code></pre></div>
|
|
</div>
|
|
|
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
|
|
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
|
|
<script src="../../js/bootstrap-3.0.3.min.js"></script>
|
|
<script src="../../js/base.js"></script>
|
|
<script src="../../highlight.js"></script>
|
|
</body>
|
|
</html> |