在 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<void>(
      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,
        );
      },
    ));
  }
    原文作者:HugoPresents
    原文地址: https://www.jianshu.com/p/a0ce8f9b4c42
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞