Flutter: How to authenticate api where the get request returns html
I'm trying to make an app in Flutter that uses the Spotify API. I specifically need to use the Spotify Web Api because it is the only one that allows access to the user's private playlists.
I'm trying to write code for the authentication but when I send the GET request, I get HTML in return.
Here's the code I'm using:
void _auth() async{
final String state = randomAlphaNumeric(20);
final Map<String, String> authQueryParameters = {
"client_id": SPOTIFY_CLIENT_ID,
"response_type": "code",
"redirect_uri": "painless_playlist://callback",
"state": state,
"scope": "playlist-read-private playlist-read-collaborative playlist-modify-private playlist-modify-public user-library-read"
};
Uri uri = new Uri.https(SPOTIFY_ACCOUNT_AUTHORITY, "authorize", authQueryParameters);
print(uri.toString());
HttpClientRequest request = await httpClient.getUrl(uri);
HttpClientResponse response = await request.close();
await response.transform(Utf8Decoder()).listen(print);
}
and this is what is returned:
<!DOCTYPE html>
<html lang="en" dir="ltr" ng-app="accounts" ng-csp ng-strict-di>
<head>
<meta charset="utf-8">
<title ng-bind="('loginTitle' | localize) + ' - Spotify'">Spotify</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<base href="/">
<link rel="icon" href="https://accounts.scdn.co/images/favicon.ace4d8543bbb017893402a1e9d1ac1fa.ico">
<link href="https://accounts.scdn.co/css/index.2298e26e3e5796a7bb68.css" media="screen" rel="stylesheet">
<script async defer
src="https://www.google.com/recaptcha/api.js?render=explicit"
nonce="wLHnpa4sDVHdmLiYTMXAZw=="></script>
<script defer src="https://accounts.scdn.co/js/index.2298e26e3e5796a7bb68.js" sp-bootstrap></script>
<meta ng-non-bindable sp-bootstrap-data='{"country":"US","captchaSiteKey":null,"useCaptcha":false,"BON":["0","0",1206798229]}'>
</head>
<body ng-controller="LoginController">
<div ng-include="template"></div>
</body>
</htm
I don't know what to do with this. Am I supposed to figure out how to open a browser and display this html? I've searched around and some resources say to open the uri in a browser instead of making a GET request, but that just shows an error page on Spotify's site.
I'm pretty lost at what to do; any help would be greatly appreciated!
dart
flutter httprequest spotify asked Dec 31 '18 at 23:31
Evan BelcherEvan Belcher
133
add a comment |
I'm trying to make an app in Flutter that uses the Spotify API. I specifically need to use the Spotify Web Api because it is the only one that allows access to the user's private playlists.
I'm trying to write code for the authentication but when I send the GET request, I get HTML in return.
Here's the code I'm using:
void _auth() async{
final String state = randomAlphaNumeric(20);
final Map<String, String> authQueryParameters = {
"client_id": SPOTIFY_CLIENT_ID,
"response_type": "code",
"redirect_uri": "painless_playlist://callback",
"state": state,
"scope": "playlist-read-private playlist-read-collaborative playlist-modify-private playlist-modify-public user-library-read"
};
Uri uri = new Uri.https(SPOTIFY_ACCOUNT_AUTHORITY, "authorize", authQueryParameters);
print(uri.toString());
HttpClientRequest request = await httpClient.getUrl(uri);
HttpClientResponse response = await request.close();
await response.transform(Utf8Decoder()).listen(print);
}
and this is what is returned:
<!DOCTYPE html>
<html lang="en" dir="ltr" ng-app="accounts" ng-csp ng-strict-di>
<head>
<meta charset="utf-8">
<title ng-bind="('loginTitle' | localize) + ' - Spotify'">Spotify</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<base href="/">
<link rel="icon" href="https://accounts.scdn.co/images/favicon.ace4d8543bbb017893402a1e9d1ac1fa.ico">
<link href="https://accounts.scdn.co/css/index.2298e26e3e5796a7bb68.css" media="screen" rel="stylesheet">
<script async defer
src="https://www.google.com/recaptcha/api.js?render=explicit"
nonce="wLHnpa4sDVHdmLiYTMXAZw=="></script>
<script defer src="https://accounts.scdn.co/js/index.2298e26e3e5796a7bb68.js" sp-bootstrap></script>
<meta ng-non-bindable sp-bootstrap-data='{"country":"US","captchaSiteKey":null,"useCaptcha":false,"BON":["0","0",1206798229]}'>
</head>
<body ng-controller="LoginController">
<div ng-include="template"></div>
</body>
</htm
I don't know what to do with this. Am I supposed to figure out how to open a browser and display this html? I've searched around and some resources say to open the uri in a browser instead of making a GET request, but that just shows an error page on Spotify's site.
I'm pretty lost at what to do; any help would be greatly appreciated!
dart
flutter httprequest spotify asked Dec 31 '18 at 23:31
Evan BelcherEvan Belcher
133
I dont know how to solve your problem exectly but you have to display the HTML so that the user can login with his Spotify account
– knurzl
Jan 2 at 8:05
add a comment |
I'm trying to make an app in Flutter that uses the Spotify API. I specifically need to use the Spotify Web Api because it is the only one that allows access to the user's private playlists.
I'm trying to write code for the authentication but when I send the GET request, I get HTML in return.
Here's the code I'm using:
void _auth() async{
final String state = randomAlphaNumeric(20);
final Map<String, String> authQueryParameters = {
"client_id": SPOTIFY_CLIENT_ID,
"response_type": "code",
"redirect_uri": "painless_playlist://callback",
"state": state,
"scope": "playlist-read-private playlist-read-collaborative playlist-modify-private playlist-modify-public user-library-read"
};
Uri uri = new Uri.https(SPOTIFY_ACCOUNT_AUTHORITY, "authorize", authQueryParameters);
print(uri.toString());
HttpClientRequest request = await httpClient.getUrl(uri);
HttpClientResponse response = await request.close();
await response.transform(Utf8Decoder()).listen(print);
}
and this is what is returned:
<!DOCTYPE html>
<html lang="en" dir="ltr" ng-app="accounts" ng-csp ng-strict-di>
<head>
<meta charset="utf-8">
<title ng-bind="('loginTitle' | localize) + ' - Spotify'">Spotify</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<base href="/">
<link rel="icon" href="https://accounts.scdn.co/images/favicon.ace4d8543bbb017893402a1e9d1ac1fa.ico">
<link href="https://accounts.scdn.co/css/index.2298e26e3e5796a7bb68.css" media="screen" rel="stylesheet">
<script async defer
src="https://www.google.com/recaptcha/api.js?render=explicit"
nonce="wLHnpa4sDVHdmLiYTMXAZw=="></script>
<script defer src="https://accounts.scdn.co/js/index.2298e26e3e5796a7bb68.js" sp-bootstrap></script>
<meta ng-non-bindable sp-bootstrap-data='{"country":"US","captchaSiteKey":null,"useCaptcha":false,"BON":["0","0",1206798229]}'>
</head>
<body ng-controller="LoginController">
<div ng-include="template"></div>
</body>
</htm
I don't know what to do with this. Am I supposed to figure out how to open a browser and display this html? I've searched around and some resources say to open the uri in a browser instead of making a GET request, but that just shows an error page on Spotify's site.
I'm pretty lost at what to do; any help would be greatly appreciated!
dart
flutter httprequest spotify asked Dec 31 '18 at 23:31
Evan BelcherEvan Belcher
133
I'm trying to make an app in Flutter that uses the Spotify API. I specifically need to use the Spotify Web Api because it is the only one that allows access to the user's private playlists.
I'm trying to write code for the authentication but when I send the GET request, I get HTML in return.
Here's the code I'm using:
void _auth() async{
final String state = randomAlphaNumeric(20);
final Map<String, String> authQueryParameters = {
"client_id": SPOTIFY_CLIENT_ID,
"response_type": "code",
"redirect_uri": "painless_playlist://callback",
"state": state,
"scope": "playlist-read-private playlist-read-collaborative playlist-modify-private playlist-modify-public user-library-read"
};
Uri uri = new Uri.https(SPOTIFY_ACCOUNT_AUTHORITY, "authorize", authQueryParameters);
print(uri.toString());
HttpClientRequest request = await httpClient.getUrl(uri);
HttpClientResponse response = await request.close();
await response.transform(Utf8Decoder()).listen(print);
}
and this is what is returned:
<!DOCTYPE html>
<html lang="en" dir="ltr" ng-app="accounts" ng-csp ng-strict-di>
<head>
<meta charset="utf-8">
<title ng-bind="('loginTitle' | localize) + ' - Spotify'">Spotify</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<base href="/">
<link rel="icon" href="https://accounts.scdn.co/images/favicon.ace4d8543bbb017893402a1e9d1ac1fa.ico">
<link href="https://accounts.scdn.co/css/index.2298e26e3e5796a7bb68.css" media="screen" rel="stylesheet">
<script async defer
src="https://www.google.com/recaptcha/api.js?render=explicit"
nonce="wLHnpa4sDVHdmLiYTMXAZw=="></script>
<script defer src="https://accounts.scdn.co/js/index.2298e26e3e5796a7bb68.js" sp-bootstrap></script>
<meta ng-non-bindable sp-bootstrap-data='{"country":"US","captchaSiteKey":null,"useCaptcha":false,"BON":["0","0",1206798229]}'>
</head>
<body ng-controller="LoginController">
<div ng-include="template"></div>
</body>
</htm
I don't know what to do with this. Am I supposed to figure out how to open a browser and display this html? I've searched around and some resources say to open the uri in a browser instead of making a GET request, but that just shows an error page on Spotify's site.
I'm pretty lost at what to do; any help would be greatly appreciated!
dart
flutter httprequest spotify dart
flutter httprequest spotify asked Dec 31 '18 at 23:31
Evan BelcherEvan Belcher
133
asked Dec 31 '18 at 23:31
Evan BelcherEvan Belcher
133
edited Jan 1 at 19:02
Evan Belcher
asked Dec 31 '18 at 23:31
Evan BelcherEvan Belcher
133
asked Dec 31 '18 at 23:31
Evan BelcherEvan Belcher
133
asked Dec 31 '18 at 23:31
Evan BelcherEvan Belcher
133
133
I dont know how to solve your problem exectly but you have to display the HTML so that the user can login with his Spotify account
– knurzl
Jan 2 at 8:05
add a comment |
I dont know how to solve your problem exectly but you have to display the HTML so that the user can login with his Spotify account
– knurzl
Jan 2 at 8:05
I dont know how to solve your problem exectly but you have to display the HTML so that the user can login with his Spotify account
– knurzl
Jan 2 at 8:05
I dont know how to solve your problem exectly but you have to display the HTML so that the user can login with his Spotify account
– knurzl
Jan 2 at 8:05
add a comment |
1 Answer
1
active
oldest
votes
You'll need to pop open a browser so the user can login and authenticate with spotify thus allowing your app to access the spotify API.
In addition you'll probably need an API with an endpoint for Spotify to use as its 'callback' so you can process the authenticated user and get their AccessToken/RefreshToken to make future requests.
Your App will/should:
- call spotify to authorise (open browser in-app)
- user logs in
- spotify calls back to you API endpoint (you can then request the tokens from spotify and store them in your database)
- display a 'success' page/HTML in the app browser (this will be delivered by your api via the 'callback')
- you can now make requests to the spotify api using the tokens
answered Jan 2 at 13:56
scgoughscgough
3,01121632
can't we bypass the need for an API endpoint ? it is basically just a function away in my opinion
– Kaki Master Of Time
Feb 6 at 17:22
I might not know the full picture for flutter but I know that when a user logs in to Spotify they are sent back to a web based url with a code server-side. This code then needs to be exchanged for access/refresh tokens via a call to the Spotify api. Without this you can’t access Spotify on the users behalf. That’s where the web view comes in to play in my above solution.
– scgough
Feb 6 at 20:21
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53992126%2fflutter-how-to-authenticate-api-where-the-get-request-returns-html%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You'll need to pop open a browser so the user can login and authenticate with spotify thus allowing your app to access the spotify API.
In addition you'll probably need an API with an endpoint for Spotify to use as its 'callback' so you can process the authenticated user and get their AccessToken/RefreshToken to make future requests.
Your App will/should:
- call spotify to authorise (open browser in-app)
- user logs in
- spotify calls back to you API endpoint (you can then request the tokens from spotify and store them in your database)
- display a 'success' page/HTML in the app browser (this will be delivered by your api via the 'callback')
- you can now make requests to the spotify api using the tokens
answered Jan 2 at 13:56
scgoughscgough
3,01121632
can't we bypass the need for an API endpoint ? it is basically just a function away in my opinion
– Kaki Master Of Time
Feb 6 at 17:22
I might not know the full picture for flutter but I know that when a user logs in to Spotify they are sent back to a web based url with a code server-side. This code then needs to be exchanged for access/refresh tokens via a call to the Spotify api. Without this you can’t access Spotify on the users behalf. That’s where the web view comes in to play in my above solution.
– scgough
Feb 6 at 20:21
add a comment |
You'll need to pop open a browser so the user can login and authenticate with spotify thus allowing your app to access the spotify API.
In addition you'll probably need an API with an endpoint for Spotify to use as its 'callback' so you can process the authenticated user and get their AccessToken/RefreshToken to make future requests.
Your App will/should:
- call spotify to authorise (open browser in-app)
- user logs in
- spotify calls back to you API endpoint (you can then request the tokens from spotify and store them in your database)
- display a 'success' page/HTML in the app browser (this will be delivered by your api via the 'callback')
- you can now make requests to the spotify api using the tokens
answered Jan 2 at 13:56
scgoughscgough
3,01121632
can't we bypass the need for an API endpoint ? it is basically just a function away in my opinion
– Kaki Master Of Time
Feb 6 at 17:22
I might not know the full picture for flutter but I know that when a user logs in to Spotify they are sent back to a web based url with a code server-side. This code then needs to be exchanged for access/refresh tokens via a call to the Spotify api. Without this you can’t access Spotify on the users behalf. That’s where the web view comes in to play in my above solution.
– scgough
Feb 6 at 20:21
add a comment |
You'll need to pop open a browser so the user can login and authenticate with spotify thus allowing your app to access the spotify API.
In addition you'll probably need an API with an endpoint for Spotify to use as its 'callback' so you can process the authenticated user and get their AccessToken/RefreshToken to make future requests.
Your App will/should:
- call spotify to authorise (open browser in-app)
- user logs in
- spotify calls back to you API endpoint (you can then request the tokens from spotify and store them in your database)
- display a 'success' page/HTML in the app browser (this will be delivered by your api via the 'callback')
- you can now make requests to the spotify api using the tokens
answered Jan 2 at 13:56
scgoughscgough
3,01121632
You'll need to pop open a browser so the user can login and authenticate with spotify thus allowing your app to access the spotify API.
In addition you'll probably need an API with an endpoint for Spotify to use as its 'callback' so you can process the authenticated user and get their AccessToken/RefreshToken to make future requests.
Your App will/should:
- call spotify to authorise (open browser in-app)
- user logs in
- spotify calls back to you API endpoint (you can then request the tokens from spotify and store them in your database)
- display a 'success' page/HTML in the app browser (this will be delivered by your api via the 'callback')
- you can now make requests to the spotify api using the tokens
answered Jan 2 at 13:56
scgoughscgough
3,01121632
answered Jan 2 at 13:56
scgoughscgough
3,01121632
answered Jan 2 at 13:56
scgoughscgough
3,01121632
answered Jan 2 at 13:56
scgoughscgough
3,01121632
3,01121632
can't we bypass the need for an API endpoint ? it is basically just a function away in my opinion
– Kaki Master Of Time
Feb 6 at 17:22
I might not know the full picture for flutter but I know that when a user logs in to Spotify they are sent back to a web based url with a code server-side. This code then needs to be exchanged for access/refresh tokens via a call to the Spotify api. Without this you can’t access Spotify on the users behalf. That’s where the web view comes in to play in my above solution.
– scgough
Feb 6 at 20:21
add a comment |
can't we bypass the need for an API endpoint ? it is basically just a function away in my opinion
– Kaki Master Of Time
Feb 6 at 17:22
I might not know the full picture for flutter but I know that when a user logs in to Spotify they are sent back to a web based url with a code server-side. This code then needs to be exchanged for access/refresh tokens via a call to the Spotify api. Without this you can’t access Spotify on the users behalf. That’s where the web view comes in to play in my above solution.
– scgough
Feb 6 at 20:21
can't we bypass the need for an API endpoint ? it is basically just a function away in my opinion
– Kaki Master Of Time
Feb 6 at 17:22
can't we bypass the need for an API endpoint ? it is basically just a function away in my opinion
– Kaki Master Of Time
Feb 6 at 17:22
I might not know the full picture for flutter but I know that when a user logs in to Spotify they are sent back to a web based url with a code server-side. This code then needs to be exchanged for access/refresh tokens via a call to the Spotify api. Without this you can’t access Spotify on the users behalf. That’s where the web view comes in to play in my above solution.
– scgough
Feb 6 at 20:21
I might not know the full picture for flutter but I know that when a user logs in to Spotify they are sent back to a web based url with a code server-side. This code then needs to be exchanged for access/refresh tokens via a call to the Spotify api. Without this you can’t access Spotify on the users behalf. That’s where the web view comes in to play in my above solution.
– scgough
Feb 6 at 20:21
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53992126%2fflutter-how-to-authenticate-api-where-the-get-request-returns-html%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I dont know how to solve your problem exectly but you have to display the HTML so that the user can login with his Spotify account
– knurzl
Jan 2 at 8:05