The implicit grant flow is carried out on the client side and it does not involve secret keys. Thus, you do not need any server-side code to use it. Access tokens issued are short-lived with no refresh token to extend them when they expire.
The following diagram shows how the Implicit Grant Flow works:
Pre-requisitesThis guide assumes that:
You can find an example app implementing Implicit Grant flow on GitHub in the web-api-examples repository.
Our application must build a GET request to the /authorize endpoint with the following parameters:
token. redirect_uri Required The URI to redirect to after the user grants or denies permission. This URI needs to have been entered in the Redirect URI allowlist that you specified when you registered your application (See the app guide). The value of redirect_uri here must exactly match one of the values you entered when you registered your application, including upper or lowercase, terminating slashes, and such. state Optional, but strongly recommended. The state can be useful for correlating requests and responses. Because your redirect_uri can be guessed, using a state value can increase your assurance that an incoming connection is the result of an authentication request. If you generate a random string or encode the hash of some client state (e.g., a cookie) in this state variable, you can validate the response to additionally ensure that the request and response originated in the same browser. This provides protection against attacks such as cross-site request forgery. See RFC-6749. scope Optional A space-separated list of scopes. show_dialog Optional Whether or not to force the user to approve the app again if they’ve already done so. If false (default), a user who has already approved the application may be automatically redirected to the URI specified by redirect_uri. If true, the user will not be automatically redirected and will have to approve the app again.
The request is typically sent from the browser.
The following JavaScript sample builds the authorization request:
_14
var client_id = 'CLIENT_ID';
_14
var redirect_uri = 'http://127.0.0.1:8888/callback';
_14
var state = generateRandomString(16);
_14
localStorage.setItem(stateKey, state);
_14
var scope = 'user-read-private user-read-email';
_14
var url = 'https://accounts.spotify.com/authorize';
_14
url += '?response_type=token';
_14
url += '&client_id=' + encodeURIComponent(client_id);
_14
url += '&scope=' + encodeURIComponent(scope);
_14
url += '&redirect_uri=' + encodeURIComponent(redirect_uri);
_14
url += '&state=' + encodeURIComponent(state);
Once the request is processed, the user will see the authorization dialog asking to authorize access within the scopes.
The Spotify Accounts service presents details of the scopes for which access is being sought. If the user is not logged in, they are prompted to do so using their Spotify credentials. When the user is logged in, they are asked to authorize access to the resources or actions defined in the scopes.
Finally, the user is redirected back to your specified redirect_uri. After the user accepts, or denies your request, the Spotify OAuth 2.0 server redirects the user back to your redirect_uri. In this example, the redirect address is https://127.0.0.1:8888/callback
If the user grants access, the final URL will contain a hash fragment with the following data encoded as a query string.
Query Parameter Value access_token An access token that can be provided in subsequent calls, for example to Spotify Web API services. token_type Value: "Bearer" expires_in The time period (in seconds) for which the access token is valid. state The value of the state parameter supplied in authorization URI.For example:
_10
https://example.com/callback#access_token=NwAExz...BV3O2Tk&token_type=Bearer&expires_in=3600&state=123
If the user denies access, access token is not included and the final URL includes a query string containing the following parameters:
Query Parameter Value error The reason authorization failed, for example: "access_denied". state The value of the state parameter supplied in the request.For example:
_10
https://example.com/callback?error=access_denied&state=123
Learn how to use an access token to fetch data from the Spotify Web API by reading the access token guide.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4