前阵子参考畅言的 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,
);
},
));
}