Spotify.NET/SpotifyWebAPI/auth/index.html
2017-10-27 15:37:28 +00:00

366 lines
14 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>Authentication - 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 active">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">SpotifyWebAPI <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 class="active">
<a href="./">Authentication</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="../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 >
<a href="../../SpotifyLocalAPI/">SpotifyLocalAPI</a>
</li>
</ul>
<!-- Search, Navigation and Repo links -->
<ul class="nav navbar-nav navbar-right">
<li >
<a rel="next" href="../examples/">
<i class="fa fa-arrow-left"></i> Previous
</a>
</li>
<li >
<a rel="prev" href="../albums/">
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="#implicitgrantauth">ImplicitGrantAuth</a></li>
<li><a href="#autorizationcodeauth">AutorizationCodeAuth</a></li>
<li><a href="#clientcredentialsauth">ClientCredentialsAuth</a></li>
<li class="main "><a href="#scopes">Scopes</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.<br />
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, you need to create a 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<br />
<strong>Client_Secret</strong> Never use this in one of your client-side apps!! Keep it secret!<br />
<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:</p>
<ul>
<li>
<p><a href="../../SpotifyWebAPI/auth#implicitgrantauth">ImplicitGrantAuth</a> (<strong>Recommended</strong>, no server-side code needed) </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>
<p><strong>Note:</strong> I would recommend a little PHP Script, which will exchange the Keys using AutorizationCodeAuth.
When using ImplicitGrantAuth, another user could abuse the "localhost" RedirectUri by creating a "fake"-app which uses your ClientId.</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/web-api/authorization-guide/#implicit_grant_flow">here</a></p>
<p>For this kind of authentication, there is also a <code>WebAPIFactory</code>, it's easier to use and uses an async method:</p>
<pre><code>static async void Main(string[] args)
{
WebAPIFactory webApiFactory = new WebAPIFactory(
&quot;http://localhost&quot;,
8000,
&quot;XXXXXXXXXXXXXXXX&quot;,
Scope.UserReadPrivate,
TimeSpan.FromSeconds(20)
);
try
{
//This will open the user's browser and returns once
//the user is authorized.
_spotify = await webApiFactory.GetWebApi();
}
catch (Exception ex)
{
MessageBox.Show(ex.Message);
}
if (_spotify == null)
return;
}
</code></pre>
<p>The old way:</p>
<pre><code>static ImplicitGrantAuth auth;
static void Main(string[] args)
{
//Create the auth object
auth = new ImplicitGrantAuth()
{
//Your client Id
ClientId = &quot;XXXXXXXXXXXXXXXX&quot;,
//Set this to localhost if you want to use the built-in HTTP Server
RedirectUri = &quot;http://localhost&quot;,
//How many permissions we need?
Scope = Scope.UserReadPrivate,
};
//Start the internal http server
auth.StartHttpServer();
//When we got our response
auth.OnResponseReceivedEvent += auth_OnResponseReceivedEvent;
//Start
auth.DoAuth();
}
static void auth_OnResponseReceivedEvent(Token token, string state, string error)
{
var spotify = new SpotifyWebApiClass()
{
TokenType = token.TokenType,
AccessToken = token.AccessToken
};
//We can now make calls with the token object
//stop the http server
auth.StopHttpServer();
}
</code></pre>
<h2 id="autorizationcodeauth">AutorizationCodeAuth</h2>
<p>This way is <strong>not recommended</strong> and requires server-side code to run securely.<br />
With this approach, you first get a code which you need to trade against the access-token.<br />
In this exchange you need to provide your Client-Secret and because of that it's not recommended.<br />
(But you can e.g exchange to codes via a PHP Script)<br />
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/web-api/authorization-guide/#authorization_code_flow">here</a></p>
<pre><code>static AutorizationCodeAuth auth;
static void Main(string[] args)
{
//Create the auth object
auth = new AutorizationCodeAuth()
{
//Your client Id
ClientId = &quot;XXXXXXXXXXXXXXX&quot;,
//Set this to localhost if you want to use the built-in HTTP Server
RedirectUri = &quot;http://localhost&quot;,
//How many permissions we need?
Scope = Scope.UserReadPrivate,
};
//This will be called, if the user cancled/accept the auth-request
auth.OnResponseReceivedEvent += auth_OnResponseReceivedEvent;
//a local HTTP Server will be started (Needed for the response)
auth.StartHttpServer();
//This will open the spotify auth-page. The user can decline/accept the request
auth.DoAuth();
Thread.Sleep(60000);
auth.StopHttpServer();
Console.WriteLine(&quot;Too long, didnt respond, exiting now...&quot;);
}
private static void auth_OnResponseReceivedEvent(AutorizationCodeAuthResponse response)
{
//NEVER DO THIS! You would need to provide the ClientSecret.
//You would need to do it e.g via a PHP-Script.
Token token = auth.ExchangeAuthCode(response.Code, &quot;XXXXXXXXXXX&quot;);
var spotify = new SpotifyWebApiClass()
{
TokenType = token.TokenType,
AccessToken = token.AccessToken
};
//With the token object, you can now make API calls
//Stop the HTTP Server, done.
auth.StopHttpServer();
}
</code></pre>
<h2 id="clientcredentialsauth">ClientCredentialsAuth</h2>
<p>This way is <strong>not recommended</strong> and requires server-side code to run securely.<br />
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.<br />
If you want to use it securely, you would need to do it all server-side.<br />
<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/web-api/authorization-guide/#client_credentials_flow">here</a></p>
<pre><code>static ClientCredentialsAuth auth;
static void Main(string[] args)
{
//Create the auth object
auth = new ClientCredentialsAuth()
{
//Your client Id
ClientId = &quot;XXXXXXXXXXXXXXX&quot;,
//Your client secret UNSECURE!!
ClientSecret = &quot;XXXXXXXXXXXX&quot;,
//How many permissions we need?
Scope = Scope.UserReadPrivate,
};
//With this token object, we now can make calls
Token token = auth.DoAuth();
var spotify = new SpotifyWebApiClass()
{
TokenType = token.TokenType,
AccessToken = token.AccessToken,
UseAuth = false
};
}
</code></pre>
<h1 id="scopes">Scopes</h1></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>