Spotify.NET/SpotifyWebAPI/auth/index.html

270 lines
12 KiB
HTML
Raw Normal View History

2017-10-27 16:37:28 +01:00
<!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">
2018-12-22 20:16:42 +00:00
<title>SpotifyAPI.Web.Auth - SpotifyAPI-NET</title>
2017-10-27 16:37:28 +01:00
<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>
2018-12-22 20:16:42 +00:00
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">SpotifyAPI.Web <b class="caret"></b></a>
2017-10-27 16:37:28 +01:00
<ul class="dropdown-menu">
<li >
<a href="../gettingstarted/">Getting started</a>
</li>
<li >
<a href="../examples/">Examples</a>
</li>
2018-03-25 18:58:06 +01:00
<li >
<a href="../proxy/">Proxy</a>
</li>
2017-10-27 16:37:28 +01:00
<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>
2018-01-15 22:33:15 +00:00
<li >
<a href="../personalization/">- Personalization</a>
</li>
2017-10-27 16:37:28 +01:00
<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>
2018-12-22 20:16:42 +00:00
<li class="active">
<a href="./">SpotifyAPI.Web.Auth</a>
2017-10-27 16:37:28 +01:00
</li>
</ul>
<!-- Search, Navigation and Repo links -->
<ul class="nav navbar-nav navbar-right">
<li >
2018-12-22 20:16:42 +00:00
<a rel="next" href="../util/">
2017-10-27 16:37:28 +01:00
<i class="fa fa-arrow-left"></i> Previous
</a>
</li>
2018-12-22 20:16:42 +00:00
<li class="disabled">
<a rel="prev" >
2017-10-27 16:37:28 +01:00
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>
2018-12-22 20:16:42 +00:00
<li><a href="#notes">Notes</a></li>
2017-10-27 16:37:28 +01:00
<li><a href="#implicitgrantauth">ImplicitGrantAuth</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>
2018-12-22 20:16:42 +00:00
<p>Before you can use the Web API full functional, you need the user to authenticate your Application.
2017-10-27 16:37:28 +01:00
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>
2018-12-22 20:16:42 +00:00
<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>
2017-10-27 16:37:28 +01:00
<hr />
2018-12-22 20:16:42 +00:00
<p>After you created your Application, you will have following important values:</p>
2017-10-27 16:37:28 +01:00
<blockquote>
2018-12-22 20:16:42 +00:00
<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>
2017-10-27 16:37:28 +01:00
</blockquote>
<p>Now you can start with the User-authentication, Spotify provides 3 ways:</p>
<ul>
<li>
2018-12-22 20:16:42 +00:00
<p><a href="../../SpotifyWebAPI/auth#implicitgrantauth">ImplicitGrantAuth</a></p>
2017-10-27 16:37:28 +01:00
</li>
<li>
2018-12-22 20:16:42 +00:00
<p><a href="../../SpotifyWebAPI/auth#autorizationcodeauth">AutorizationCodeAuth</a></p>
2017-10-27 16:37:28 +01:00
</li>
<li>
2018-12-22 20:16:42 +00:00
<p><a href="../../SpotifyWebAPI/auth#clientcredentialsauth">ClientCredentialsAuth</a></p>
2017-10-27 16:37:28 +01:00
</li>
</ul>
2018-12-22 20:16:42 +00:00
<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>
2017-10-27 16:37:28 +01:00
<p>Overview:
<img alt="Overview" src="http://i.imgur.com/uf3ahTl.png" /></p>
2018-12-22 20:16:42 +00:00
<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>
2017-10-27 16:37:28 +01:00
<h2 id="implicitgrantauth">ImplicitGrantAuth</h2>
2018-12-22 20:16:42 +00:00
<p>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, make sure the redirect URI is in your spotify 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)
2017-10-27 16:37:28 +01:00
{
2018-12-22 20:16:42 +00:00
ImplicitGrantAuth auth =
new ImplicitGrantAuth(_clientId, &quot;http://localhost:4002&quot;, &quot;http://localhost:4002&quot;, Scope.UserReadPrivate);
auth.AuthReceived += async (sender, payload) =&gt;
2017-10-27 16:37:28 +01:00
{
2018-12-22 20:16:42 +00:00
auth.Stop(); // `sender` is also the auth instance
SpotifyWebAPI api = new SpotifyWebAPI() {TokenType = payload.TokenType, AccessToken = payload.AccessToken};
// Do requests with API client
2017-10-27 16:37:28 +01:00
};
2018-12-22 20:16:42 +00:00
auth.Start(); // Starts an internal HTTP Server
auth.OpenBrowser();
2017-10-27 16:37:28 +01:00
}
</code></pre>
<h2 id="autorizationcodeauth">AutorizationCodeAuth</h2>
2018-12-22 20:16:42 +00:00
<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.
2017-10-27 16:37:28 +01:00
A good thing about this method: You can always refresh your token, without having the user to auth it again</p>
2018-12-22 20:16:42 +00:00
<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)
2017-10-27 16:37:28 +01:00
{
2018-12-22 20:16:42 +00:00
AuthorizationCodeAuth auth =
new AuthorizationCodeAuth(_clientId, _secretId, &quot;http://localhost:4002&quot;, &quot;http://localhost:4002&quot;,
Scope.PlaylistReadPrivate | Scope.PlaylistReadCollaborative);
auth.AuthReceived += async (sender, payload) =&gt;
2017-10-27 16:37:28 +01:00
{
2018-12-22 20:16:42 +00:00
auth.Stop();
Token token = await auth.ExchangeCode(payload.Code);
SpotifyWebAPI api = new SpotifyWebAPI() {TokenType = token.TokenType, AccessToken = token.AccessToken};
// Do requests with API client
2017-10-27 16:37:28 +01:00
};
2018-12-22 20:16:42 +00:00
auth.Start(); // Starts an internal HTTP Server
auth.OpenBrowser();
2017-10-27 16:37:28 +01:00
}
</code></pre>
<h2 id="clientcredentialsauth">ClientCredentialsAuth</h2>
2018-12-22 20:16:42 +00:00
<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.
2017-10-27 16:37:28 +01:00
<strong>NOTE:</strong> You will only be able to query non-user-related information e.g search for a Track.</p>
2018-12-22 20:16:42 +00:00
<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>
2017-10-27 16:37:28 +01:00
</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>