在 Flutter 中使用畅言

前阵子参考畅言的 API 文档给 flutter 做了畅言插件：

https://pub.dartlang.org/packages/flutter_changyan 方法的调用上倒还算不麻烦，但是在登录的时候需要搭配 webview 实现，在这里分享下我的思路。

首先 flutter 提供 webview 插件：https://pub.dartlang.org/packages/flutter_webview_plugin 可以控制打开的 url 以及监听 url 的变化，所以登录思路是：

• 先通过畅言插件获取登录 url ->
• 监听 url change 事件 ->
• 调用 webview 打开登录 url 当三方登录成功后会跳会预配置的域名 ->
• url change 时间监听到访问指定 host 截取 url 中的 code 参数 ->
• 关闭 webview
• 用 code 参数调用畅言插件登录功能保存登录成功的 token

下面是关键代码：

void _loginChangyan() {
    final flutterWebviewPlugin = new FlutterWebviewPlugin();
    flutterWebviewPlugin.onUrlChanged.listen((String url) {
      var _uri = Uri.parse(url);
      if (_uri.host == 'yourdomain.com' &&
          _uri.queryParameters['code'] != null) {
        Navigator.of(context).pop();
        FlutterChangyan.login(_uri.queryParameters['code']).then((accessToken) {
          print('login success: $accessToken');
        });
      }
    });
    FlutterChangyan.register('client id', 'client secret', 'callback url');
    var loginUrl = FlutterChangyan.loginUrl();
    Navigator.push(context, new MaterialPageRoute(
      builder: (BuildContext context) {
        return new WebviewScaffold(
          url: loginUrl,
          appBar: new AppBar(
            title: const Text('登录畅言'),
            leading: new IconButton(
              icon: const Icon(Icons.close),
              onPressed: _handleWebViewClose
            )
          ),
          withZoom: true,
          withLocalStorage: true,
        );
      },
    ));
  }