Flutter 中的 OAuth2 身份验证

Question

我无法使用 Flutter 和 OAuth2 进行身份验证。基本上我创建了一个 Flutter 基础项目并添加了 OAuth2 wiki 的 example。

这是来自 Flutter 基础项目的类：

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _login() async {
    final authorizationEndpoint =
    Uri.parse("http://blablablabla/o/token");

    final username = "username";
    final password = "password";

    // Something like this
    final identifier = "mavEZjJgs9d4JwvvXsANZgN5Dz5GFxzfj616752A";
    final secret = "hcAFRwvtGqzhKrMPH2Vqm1vncuZt2YTVfTs6LcdNcnKPdEH3J0T1njIwurryofrvDMnzOvhQDVbaC9Gt5DctciTv3n89s7JSGjpHtzkbEfLpkOT5y6YHN3p6grQlYGd59";

    // Make a request to the authorization endpoint that will produce the fully
    // authenticated Client.
    var client = await oauth2.resourceOwnerPasswordGrant(
        authorizationEndpoint, username, password,
        identifier: identifier, secret: secret);

    // Once you have the client, you can use it just like any other HTTP client.
    var result = await client.read("http://blablabla/api/users/me/");

    // Once we're done with the client, save the credentials file. This will allow
    // us to re-use the credentials and avoid storing the username and password
    // directly.
    new File("~/.myapp/credentials.json")
        .writeAsString(client.credentials.toJson());
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text(
              'You have pushed the button this many times:',
            ),
            new Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: new FloatingActionButton(
//        onPressed: _incrementCounter,
        onPressed: _login,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

我把教程的_incrementCounter方法改成了_login。当我按下按钮（我现在应该登录）时，我得到以下信息：

E/flutter ( 7662): [ERROR:topaz/lib/tonic/logging/dart_error.cc(16)] Unhandled exception:
E/flutter ( 7662): NoSuchMethodError: No top-level method 'base64Encode' declared.
E/flutter ( 7662): Receiver: top-level
E/flutter ( 7662): Tried calling: base64Encode(Uint8Array)
E/flutter ( 7662): #0      NoSuchMethodError._throwNew (dart:core-patch/dart:core/errors_patch.dart:192)
E/flutter ( 7662): #1      basicAuthHeader (package:oauth2/src/utils.dart:14)
E/flutter ( 7662): #2      resourceOwnerPasswordGrant (package:oauth2/src/resource_owner_password_grant.dart:69)
E/flutter ( 7662): <asynchronous suspension>
E/flutter ( 7662): #3      _MyHomePageState._login (file:///home/thisismyuser/AndroidStudioProjects/login/lib/main.dart:79)
E/flutter ( 7662): <asynchronous suspension>
E/flutter ( 7662): #4      _InkResponseState._handleTap (package:flutter/src/material/ink_well.dart:478)
E/flutter ( 7662): #5      _InkResponseState.build.<anonymous closure> (package:flutter/src/material/ink_well.dart:530)
E/flutter ( 7662): #6      GestureRecognizer.invokeCallback (package:flutter/src/gestures/recognizer.dart:102)
E/flutter ( 7662): #7      TapGestureRecognizer._checkUp (package:flutter/src/gestures/tap.dart:161)
E/flutter ( 7662): #8      TapGestureRecognizer.acceptGesture (package:flutter/src/gestures/tap.dart:123)
E/flutter ( 7662): #9      GestureArenaManager.sweep (package:flutter/src/gestures/arena.dart:156)
E/flutter ( 7662): #10     BindingBase&GestureBinding.handleEvent (package:flutter/src/gestures/binding.dart:147)
E/flutter ( 7662): #11     BindingBase&GestureBinding.dispatchEvent (package:flutter/src/gestures/binding.dart:121)
E/flutter ( 7662): #12     BindingBase&GestureBinding._handlePointerEvent (package:flutter/src/gestures/binding.dart:101)
E/flutter ( 7662): #13     BindingBase&GestureBinding._flushPointerEventQueue (package:flutter/src/gestures/binding.dart:64)
E/flutter ( 7662): #14     BindingBase&GestureBinding._handlePointerDataPacket (package:flutter/src/gestures/binding.dart:48)
E/flutter ( 7662): #15     _invoke1 (file:///b/build/slave/Linux_Engine/build/src/flutter/lib/ui/hooks.dart:134)
E/flutter ( 7662): #16     _dispatchPointerDataPacket (file:///b/build/slave/Linux_Engine/build/src/flutter/lib/ui/hooks.dart:91)

提前致谢！

（通过 Postman 我得到了这个漂亮的身份验证）

Answer 1

我的猜测是您使用的是 Dart 1，而 oauth 库依赖于 Dart 2 API（似乎 base64Encode 方法仅在 Dart 2 中添加）。确保您至少使用 Flutter Beta 2，它默认使用 Dart 2。如果您有意使用 Dart 1，则似乎您必须升级。

您可以通过在终端中调用来确保您正在运行最新的 Flutter beta 版本

flutter channel beta
flutter upgrade

对于这些问题，提供flutter doctor 的输出也很有用

Answer 2

使用标准 http 客户端进行 oauth 请求相当简单。看看我在 GitHub 上创建的一个简单的library。特别是，看看Authenticator 类。