Hello,I’m Shendi

Baidu can't search the relevant content , There is no relevant content on the official website , Ask the big guys in the group to get the answer , Here is a record of

Problem description

When logging in, you need to use the graphic verification code provided by the back end , Backend pass Session Save verification code information

Flutter Provides a way to load network pictures , But there is no way to save SessionId, So change your mind , use dio Read picture data stream , Get SessionId, Re render to component

solve

About dio obtain SessionId The method can refer to this article
https://shendi.blog.csdn.net/article/details/122510279

The code to get the picture byte stream is as follows

LoginData {
    
	var cookie;
	Map<String, String> session = {
    
		"name" : "",
		"value" : "",
		"domain" : "shendi"
	};
}
var loginData = LoginData();

Future<Uint8List> getVCCode() async {
    
	dio.options.followRedirects = false;
    dio.options.validateStatus = (status) {
    
      return status! < 500;
    };
    //  Here are the settings Cookie,Cookie Contained in the SessionId
    if (loginData.cookie != null) dio.options.headers["Cookie"] = loginData.cookie;

	Response resp = await dio.get(
      " Verification code address " + Random().nextInt(100).toString(),
      options: Options(responseType: ResponseType.stream).timeout(const Duration(seconds: 3)));

	//  If there is  set-cookie  Get save 
	if (resp.headers["set-cookie"] != null) {
    
		var cookie = resp.headers["set-cookie"].toString();
		cookie = cookie.substring(1, cookie.length - 1);
		loginData.cookie = cookie;
		
		//  Set up session structure ,  at present COOKIE The content is  JSESSIONID=xxx; Path=/; HttpOnly
		int len = cookie.indexOf('=');
		loginData.session["name"] = cookie.substring(0, len);
		cookie = cookie.substring(len);
		len = cookie.indexOf(';');
		loginData.session["value"] = cookie.substring(1, len);
		cookie = cookie.substring(len+1);
    }

	final stream = await (resp.data as ResponseBody).stream.toList();
	final result = BytesBuilder();
	for (Uint8List subList in stream) {
    
		result.add(subList);
	}

	return result.takeBytes();
}

Because of the use of dio, The obtained return is Future<Uint8List>, We need to get Uint8List, You need to use state management , Please refer to the official website
https://book.flutterchina.club/chapter2/state_manage.html

Here I directly post my login page code , For reference

///  Landing page 
class Login extends StatelessWidget {
    
  const Login({
    Key? key}) : super(key: key);

  final appTitle = " Sign in  - Shendi";

  @override
  Widget build(BuildContext context) {
    

    return MaterialApp(
      title: appTitle,
      home: const LoginPage(),
    );
  }
}

///  The login page 
class LoginPage extends StatefulWidget {
    
  const LoginPage({
    Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    
    return LoginPageState();
  }

}

///  Login status 
class LoginPageState extends State<LoginPage> {
    
  var account = TextEditingController();
  var pwd = TextEditingController();
  var code = TextEditingController();

  var codeImg;

  @override
  void initState() {
    
    super.initState();

    //  Initialization captcha 
    flushVCCode();

    eventBus.on<VCCodeFlush>().listen((event) {
    
      flushVCCode();
    });
  }

  ///  Refresh verification code 
  flushVCCode() async {
    
    var data = await http.getVCCode();
    setState(() {
    
      codeImg = Image.memory(data);
    });
  }

  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text(const Login().appTitle),
        ),
        body: Padding(
        padding: const EdgeInsets.all(20),
        child: ListView(
          children: [
            TextFormField(
              controller: account,
              decoration: const InputDecoration(
                  labelText: " account number ",
                  hintText: " Please enter your account number "
              ),
            ),
            TextField(
              controller: pwd,
              decoration: const InputDecoration(
                  labelText: " password ",
                  hintText: " Please input a password "
              ),
            ),
            Row(
              children: [
                Expanded(child: TextFormField(
                  controller: code,
                  decoration: const InputDecoration(
                      labelText: " Verification Code ",
                      hintText: " Please enter the verification code "
                  ),
                )),
                GestureDetector(
                  child: codeImg ?? Container(),
                  onTap: () {
    
                    flushVCCode();
                  },
                )
              ],
            ),
            Padding(
              padding: const EdgeInsets.fromLTRB(0, 22, 0, 0),
              child: ElevatedButton(
                  onPressed: () async {
    
                    var msg;
                    if (pwd.text == "") msg = " Please fill in the password ！";
                    if (account.text == "") msg = " Please fill in the account number ！";
                    if (code.text == "") msg = " Please enter the verification code ！";

                    if (msg != null) {
    
                      Fluttertoast.showToast(
                          msg: msg,
                          toastLength: Toast.LENGTH_SHORT,
                          gravity: ToastGravity.TOP,
                          timeInSecForIosWeb: 1,
                          fontSize: 16.0
                      );
                      return;
                    }

                    bool isLogin = await http.login(account.text, pwd.text, code.text);
                    if (isLogin) {
    
                      //  Login successful , Go to the main page 
                      runApp(const RoomList());
                    }
                  },
                  child: const Text(" Sign in ")
              ),
            )
          ],
        ),
      )
    );
  }

}

END