mirror of
https://github.com/Sarsoo/Spotify.NET.git
synced 2024-12-24 23:16:28 +00:00
36 lines
21 KiB
HTML
36 lines
21 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width">
|
|
<meta name="generator" content="Docusaurus v2.0.0-alpha.56">
|
|
<title data-react-helmet="true">PKCE | SpotifyAPI-NET</title><meta data-react-helmet="true" name="docsearch:version" content="next"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="PKCE | SpotifyAPI-NET"><meta data-react-helmet="true" name="description" content="The authorization code flow with PKCE is the best option for mobile and desktop applications where it is unsafe to store your client secret. It provides your app with an access token that can be refreshed. For further information about this flow, see IETF RFC-7636."><meta data-react-helmet="true" property="og:description" content="The authorization code flow with PKCE is the best option for mobile and desktop applications where it is unsafe to store your client secret. It provides your app with an access token that can be refreshed. For further information about this flow, see IETF RFC-7636."><meta data-react-helmet="true" property="og:url" content="https://johnnycrazy.github.io/SpotifyAPI-NET/docs/next/pkce"><link data-react-helmet="true" rel="shortcut icon" href="/SpotifyAPI-NET/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://johnnycrazy.github.io/SpotifyAPI-NET/docs/next/pkce"><link rel="stylesheet" href="/SpotifyAPI-NET/styles.8a053330.css">
|
|
<link rel="preload" href="/SpotifyAPI-NET/styles.c98ed224.js" as="script">
|
|
<link rel="preload" href="/SpotifyAPI-NET/runtime~main.5f371241.js" as="script">
|
|
<link rel="preload" href="/SpotifyAPI-NET/main.73459b16.js" as="script">
|
|
<link rel="preload" href="/SpotifyAPI-NET/1.3b60c25a.js" as="script">
|
|
<link rel="preload" href="/SpotifyAPI-NET/2.2bb7aa4d.js" as="script">
|
|
<link rel="preload" href="/SpotifyAPI-NET/3.f4b60483.js" as="script">
|
|
<link rel="preload" href="/SpotifyAPI-NET/1be78505.163494cb.js" as="script">
|
|
<link rel="preload" href="/SpotifyAPI-NET/ad407b76.fbd12313.js" as="script">
|
|
<link rel="preload" href="/SpotifyAPI-NET/e3c15a47.e2d6ad66.js" as="script">
|
|
</head>
|
|
<body>
|
|
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=window.matchMedia("(prefers-color-scheme: dark)"),n=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();null!==n?t(n):e.matches&&t("dark")}()</script><div id="__docusaurus">
|
|
<nav class="navbar navbar--light navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/SpotifyAPI-NET/"><img class="navbar__logo" src="/SpotifyAPI-NET/img/logo.svg" alt="SpotifyAPI-NET"><strong class="navbar__title">SpotifyAPI-NET</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a activeclassname="navbar__link--active" class="navbar__item navbar__link">Docs</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/SpotifyAPI-NET/docs/next/introduction">Latest/Next</a></li><li><a class="dropdown__link" href="/SpotifyAPI-NET/docs/home">5.1.1</a></li></ul></div><a class="navbar__item navbar__link" href="/SpotifyAPI-NET/news">News</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/JohnnyCrazy/SpotifyAPI-NET" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_1gtM"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_keGJ moon_1gwN"></span></div><div class="react-toggle-track-x"><span class="toggle_keGJ sun_3CPA"></span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/SpotifyAPI-NET/"><img class="navbar__logo" src="/SpotifyAPI-NET/img/logo.svg" alt="SpotifyAPI-NET"><strong class="navbar__title">SpotifyAPI-NET</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a activeclassname="navbar__link--active" class="menu__link menu__link--sublist">Docs</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/SpotifyAPI-NET/docs/next/introduction">Latest/Next</a></li><li class="menu__list-item"><a class="menu__link" href="/SpotifyAPI-NET/docs/home">5.1.1</a></li></ul></li><li class="menu__list-item"><a class="menu__link" href="/SpotifyAPI-NET/news">News</a></li><li class="menu__list-item"><a href="https://github.com/JohnnyCrazy/SpotifyAPI-NET" target="_blank" rel="noopener noreferrer" class="menu__link">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_1kjD"><div class="docSidebarContainer_1cYp"><div class="sidebar_1kLs"><div class="menu menu--responsive menu_w2sC"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_2vk4" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">SpotifyAPI-NET</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/SpotifyAPI-NET/docs/next/introduction">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/SpotifyAPI-NET/docs/next/getting_started">Getting Started</a></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!" tabindex="0">Guides</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/SpotifyAPI-NET/docs/next/error_handling">Error Handling</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/SpotifyAPI-NET/docs/next/configuration">Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/SpotifyAPI-NET/docs/next/logging">Logging</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/SpotifyAPI-NET/docs/next/proxy">Proxy</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/SpotifyAPI-NET/docs/next/pagination">Pagination</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/SpotifyAPI-NET/docs/next/retry_handling">Retry Handling</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/SpotifyAPI-NET/docs/next/iplayableitem">IPlayableItem</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/SpotifyAPI-NET/docs/next/unit_testing">Unit Testing</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!" tabindex="0">Authentication Guides</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/SpotifyAPI-NET/docs/next/auth_introduction">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/SpotifyAPI-NET/docs/next/client_credentials">Client Credentials</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/SpotifyAPI-NET/docs/next/implicit_grant">Implicit Grant</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/SpotifyAPI-NET/docs/next/authorization_code">Authorization Code</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/SpotifyAPI-NET/docs/next/pkce">PKCE</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/SpotifyAPI-NET/docs/next/token_swap">Token Swap</a></li></ul></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/SpotifyAPI-NET/docs/next/showcase">Showcase</a></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!" tabindex="0">Examples</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/SpotifyAPI-NET/docs/next/example_asp">ASP.NET</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/SpotifyAPI-NET/docs/next/example_blazor_wasm">Blazor WASM</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/SpotifyAPI-NET/docs/next/example_blazor">Blazor ServerSide</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/SpotifyAPI-NET/docs/next/example_cli_custom_html">CLI - Custom HTML</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/SpotifyAPI-NET/docs/next/example_cli_persistent_config">CLI - Persistent Config</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/SpotifyAPI-NET/docs/next/example_token_swap">Token Swap</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/SpotifyAPI-NET/docs/next/example_uwp">UWP</a></li></ul></li></ul></li></ul></div></div></div><main class="docMainContainer_FFX1"><div class="container padding-vert--lg docItemWrapper_1cc7"><div class="row"><div class="col docItemCol_2GOA"><div class="docItemContainer_2cwg"><article><div><span class="badge badge--secondary">Version: next</span></div><header><h1 class="docTitle_1vWb">PKCE</h1></header><div class="markdown"><blockquote><p>The authorization code flow with PKCE is the best option for mobile and desktop applications where it is unsafe to store your client secret. It provides your app with an access token that can be refreshed. For further information about this flow, see <a href="https://tools.ietf.org/html/rfc7636" target="_blank" rel="noopener noreferrer">IETF RFC-7636</a>.</p></blockquote><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_ZqCz" id="generating-challenge--verifier"></a>Generating Challenge & Verifier<a aria-hidden="true" tabindex="-1" class="hash-link" href="#generating-challenge--verifier" title="Direct link to heading">#</a></h2><p>For every authentication request, a verify code and its challenge code needs to be generated. The class <code>PKCEUtil</code> can be used to generate those, either with random generated or self supplied values:</p><div class="mdxCodeBlock_iHAB"><div class="codeBlockContent_32p_"><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button><div tabindex="0" class="prism-code language-csharp codeBlock_19pQ"><div class="codeBlockLines_2n9r" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">// Generates a secure random verifier of length 100 and its challenge</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">var (verifier, challenge) = PKCEUtil.GenerateCodes();</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
|
|
</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">// Generates a secure random verifier of length 120 and its challenge</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">var (verifier, challenge) = PKCEUtil.GenerateCodes(120);</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
|
|
</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">// Returns the passed string and its challenge (Make sure it's random and long enough)</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">var (verifier, challenge) = PKCEUtil.GenerateCodes("YourSecureRandomString");</span></div></div></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_ZqCz" id="generating-login-uri"></a>Generating Login URI<a aria-hidden="true" tabindex="-1" class="hash-link" href="#generating-login-uri" title="Direct link to heading">#</a></h2><p>Like most auth flows, you'll need to redirect your user to Spotify's servers so they are able to grant access to your application:</p><div class="mdxCodeBlock_iHAB"><div class="codeBlockContent_32p_"><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button><div tabindex="0" class="prism-code language-csharp codeBlock_19pQ"><div class="codeBlockLines_2n9r" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">// Make sure "http://localhost:5000/callback" is in your applications redirect URIs!</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">var loginRequest = new LoginRequest(</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"> new Uri("http://localhost:5000/callback"),</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"> "YourClientId",</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"> LoginRequest.ResponseType.Code</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">)</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">{</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"> CodeChallengeMethod = "S256",</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"> CodeChallenge = challenge,</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"> Scope = new[] { Scopes.PlaylistReadPrivate, Scopes.PlaylistReadCollaborative }</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">};</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">var uri = loginRequest.ToUri();</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">// Redirect user to uri via your favorite web-server or open a local browser window</span></div></div></div></div></div><p>When the user is redirected to the generated uri, they will have to login with thei Spotify account and confirm that your application wants to access their user data. Once confirmed, they will be redirected to <code>http://localhost:5000/callback</code> and a <code>code</code> parameter is attached to the query. The redirect URI can also contain a custom protocol paired with UWP App Custom Protocol handler. This received <code>code</code> has to be exchanged for an <code>access_token</code> and <code>refresh_token</code>:</p><div class="mdxCodeBlock_iHAB"><div class="codeBlockContent_32p_"><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button><div tabindex="0" class="prism-code language-csharp codeBlock_19pQ"><div class="codeBlockLines_2n9r" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">// This method should be called from your web-server when the user visits "http://localhost:5000/callback"</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">public Task GetCallback(string code)</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">{</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"> // Note that we use the verifier calculated above!</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"> var initialResponse = await new OAuthClient().RequestToken(</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"> new PKCETokenRequest("ClientId", code, "http://localhost:5000", verifier)</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"> );</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
|
|
</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"> var spotify = new SpotifyClient(initialResponse.AccessToken);</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"> // Also important for later: response.RefreshToken</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">}</span></div></div></div></div></div><p>With PKCE you can also refresh tokens once they're expired:</p><div class="mdxCodeBlock_iHAB"><div class="codeBlockContent_32p_"><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button><div tabindex="0" class="prism-code language-csharp codeBlock_19pQ"><div class="codeBlockLines_2n9r" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">var newResponse = await new OAuthClient().RequestToken(</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"> new PKCETokenRefreshRequest("ClientId", initialResponse.RefreshToken)</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">);</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
|
|
</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">var spotify = new SpotifyClient(newResponse.AccessToken);</span></div></div></div></div></div><p>If you do not want to take care of manually refreshing tokens, you can use <code>PKCEAuthenticator</code>:</p><div class="mdxCodeBlock_iHAB"><div class="codeBlockContent_32p_"><button type="button" aria-label="Copy code to clipboard" class="copyButton_1BYj">Copy</button><div tabindex="0" class="prism-code language-csharp codeBlock_19pQ"><div class="codeBlockLines_2n9r" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">var authenticator = new PKCEAuthenticator(clientId, initialResponse);</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
|
|
</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">var config = SpotifyClientConfig.CreateDefault()</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"> .WithAuthenticator(authenticator);</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">var spotify = new SpotifyClient(config);</span></div></div></div></div></div></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/JohnnyCrazy/SpotifyAPI-NET/edit/master/SpotifyAPI.Docs/docs/pkce.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col text--right"><em><small>Last updated on <time datetime="2020-11-10T15:44:55.000Z" class="docLastUpdatedAt_1sqk">11/10/2020</time> by <strong>Denis Mtfl</strong></small></em></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/SpotifyAPI-NET/docs/next/authorization_code"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Authorization Code</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/SpotifyAPI-NET/docs/next/token_swap"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Token Swap »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_TbNY"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#generating-challenge--verifier" class="table-of-contents__link">Generating Challenge & Verifier</a></li><li><a href="#generating-login-uri" class="table-of-contents__link">Generating Login URI</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="text--center"><div>Copyright © 2020 Jonas Dellinger. Built with Docusaurus.</div></div></div></footer></div>
|
|
<script src="/SpotifyAPI-NET/styles.c98ed224.js"></script>
|
|
<script src="/SpotifyAPI-NET/runtime~main.5f371241.js"></script>
|
|
<script src="/SpotifyAPI-NET/main.73459b16.js"></script>
|
|
<script src="/SpotifyAPI-NET/1.3b60c25a.js"></script>
|
|
<script src="/SpotifyAPI-NET/2.2bb7aa4d.js"></script>
|
|
<script src="/SpotifyAPI-NET/3.f4b60483.js"></script>
|
|
<script src="/SpotifyAPI-NET/1be78505.163494cb.js"></script>
|
|
<script src="/SpotifyAPI-NET/ad407b76.fbd12313.js"></script>
|
|
<script src="/SpotifyAPI-NET/e3c15a47.e2d6ad66.js"></script>
|
|
</body>
|
|
</html> |