dart - Flutter:如何在get请求返回html的地方验证api-6ren

dart - Flutter:如何在get请求返回html的地方验证api

转载作者：IT王子更新时间：2023-10-29 07:04:58

我正在尝试在 Flutter 中制作一个使用 Spotify API 的应用程序。我特别需要使用 Spotify Web Api，因为它是唯一允许访问用户私有(private)播放列表的 API。

我正在尝试为身份验证编写代码，但是当我发送 GET 请求时，我得到了 HTML 作为返回。

这是我使用的代码:

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);
}

这是返回的内容:

<!DOCTYPE html>
<html lang="en" dir="ltr" ng-app="accounts" ng-csp ng-strict-di>
<head>
  <meta charset="utf-8">
  <title ng-bind="(&#39;loginTitle&#39; | localize) + &#39; - Spotify&#39;">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

我不知道该怎么办。我应该弄清楚如何打开浏览器并显示此 html 吗？我四处搜索，一些资源说在浏览器中打开 uri 而不是发出 GET 请求，但这只是在 Spotify 的网站上显示错误页面。

我不知道该做什么；任何帮助将不胜感激!

最佳答案

您可以将此代码用于 Spotify API。它还可以用于其他 API 调用。这里使用了 flutter_web_auth 0.1.2 包。

void authenticate() async {
  // Present the dialog to the user
  final result = await FlutterWebAuth.authenticate(
    url:
        "https://accounts.spotify.com/authorize?client_id=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx&redirect_uri=yourname:/&scope=user-read-currently-playing&response_type=token&state=123",
    callbackUrlScheme: "yourname",
  );

// Extract token from resulting url
  final token = Uri.parse(result);
  String at = token.fragment;
  at = "http://website/index.html?$at"; // Just for easy persing
  var accesstoken = Uri.parse(at).queryParameters['access_token'];
  print('token');
  print(accesstoken);
}

添加到AndroidManifest.xml android\app\src\main

                 ...
        </activity>
        <activity android:name="com.linusu.flutter_web_auth.CallbackActivity" >
            <intent-filter android:label="flutter_web_auth">
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data android:scheme="yourname" />
            </intent-filter>
            </activity>
    </application>
</manifest>

关于dart - Flutter:如何在get请求返回html的地方验证api，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53992126/