Flutter：如何验证get请求返回html的api

Question

我正在尝试在 Flutter 中制作一个使用 Spotify API 的应用。我特别需要使用 Spotify Web 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 的网站上显示一个错误页面。

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

Answer 1

您可以将此代码用于 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>

Answer 2

您需要打开浏览器，以便用户可以登录并使用 spotify 进行身份验证，从而允许您的应用访问 spotify API。

此外，您可能需要一个带有端点的 API 供 Spotify 用作其“回调”，这样您就可以处理经过身份验证的用户并获取他们的 AccessToken/RefreshToken 以发出未来的请求。

您的应用将/应该：

• 调用 spotify 进行授权（在应用内打开浏览器）
• 用户登录
• spotify 回调您的 API 端点（然后您可以从 spotify 请求令牌并将它们存储在您的数据库中）
• 在应用浏览器中显示“成功”页面/HTML（这将由您的 api 通过“回调”传递）
• 您现在可以使用令牌向 spotify api 发出请求