Flutter与H5同步登录态之cookie、channel方式

本文使用的是Flutter官方的webview_flutter组件,对Flutter与h5同步登录态的两种方式介绍。

一、使用cookie的方式

H5代码如下,通过document.cookie获取cookie。

  <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>Flutter向H5传递数据-通过URL</title>
</head>
<body>
    <button id="btn" style="font-size: 2.5em">获取数据</button>
    <button id="btnGetCookie" style="font-size: 2.5em">获取cookie</button>
    <div id="resultTxt" style="font-size: 2.5em"></button>
        <script type="text/javascript">
            //获取cookie
            var btnGetCookie = document.getElementById("btnGetCookie");
            btnGetCookie.addEventListener('click', function () {
                var cookie = document.cookie;
                document.getElementById('resultTxt').innerHTML = '获取到的cookie:' + cookie;
            }, false)
            //获取URL中的数据
            var btn = document.getElementById("btn");
            btn.addEventListener('click', function () {
                //通过URL向H5传递数据
                const params = new URLSearchParams(window.location.search);
                var name = params.get('name');
                document.getElementById('resultTxt').innerHTML = '从URL中获取到的数据:' + name;
            }, false)
        </script>
</body>
</html>

Flutter代码如下,设置cookie的值,用于在H5获取。

  ///设置cookie
  void _onSetCookie(BuildContext context) async {
    //可以连续设置多次cookie
    await cookieManager.setCookie(const WebViewCookie(
      name: 'token', //cookie的名字
      value: 'asssdddfff', //cookie的值
      domain: 'cwq.com', //指定给对应的域名设置cookie
      path: '/', //域名下的路径,可以缺省,若设置一个具体的path,那么只有这个path下的网址才可以获取到设置的cookie
    ));
    //也可在Flutter中获取cookie
    final Object cookies =
        await controller.runJavaScriptReturningResult('document.cookie');
    debugPrint(cookies.toString());
  }

一、通Channel的方式

H5代码,

<script type="text/javascript">
     var btn = document.getElementById("btn");
     btn.addEventListener('click', function () {
     //通过注册的getLoginInfo channel向flutter发送消息
     getLoginInfo.postMessage("");
    }, false)
   function cwqCallJs(msg) {
        document.getElementById('resultTxt').innerHTML = 'Flutter传递过来的登录信息:' + msg;
   }
</script>

Flutter代码,通过addJavaScriptChannel添加Channel监听,并通过runJavaScript返回给H5

controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..addJavaScriptChannel('getLoginInfo',
          onMessageReceived: (JavaScriptMessage message) {
        //获取到H5需要登录信息的调用
        var info = {'token': "qwwejdsfd", 'uid': "3233"};
        var infoString = json.encode(info);
        controller.runJavaScript("cwqCallJs('$infoString')"); //将登录信息传递个H5
      });
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容