Use the okhttp framework to implement user login including verification code and maintain session operation (Part 1)

1. What problem does this article solve and what can we learn?

I am working on a hospital affairs system project recently, so I will record the process of learning new knowledge. This article is about the login operation. I originally thought that the login process was a relatively simple thing, but after a deeper understanding, it is still difficult:

1. To obtain the verification code photo during the login process, use the HTTP get operation. To pass the parameters to the server, you need to use post.

2. The above get and post operations can be implemented using many current network frameworks, such as volley, but after obtaining the verification code photo, a session must be maintained. Therefore, after consulting the information, it is more convenient and quick to use the okhttp framework to build this project.

Let's first learn how to use okhttp: http://blog.csdn.net/itachi85/article/details/51190687

There is also a quick start to load photos using okhttp:

http://blog.csdn.net/bo543937071/article/details/53380651

2. Q: What are sessions and cookies?

Simply put, cookie is the session ID of the client, and session is the session ID of the server. Based on this ID number, you can query the content of your session.

(To learn more about cookies and sessions, click here)

http://blog.csdn.net/androidxiaogang/article/details/51925388

In this project, we need to obtain the verification code photo. Because each time you refresh the verification code URL, a different verification code photo will appear, so you need to save the verification code session, otherwise how can others know which verification code you have a "session" with. First, the photo:

As shown in the figure, it is divided into four steps, which is easier to understand with text:

1. The client sends a request for a verification code photo, and brings back the photo and a jsessionid field that is stored in the user's cookie.

2. We take out the session from the cookie header, and then pack the parameters and send it along with the session so that the server knows who sent it.

The four steps and two points of summary make it easier to understand with the code.

3. Analyze some important codes and then paste all the codes

Let's take a look at the data given to us by the backend. There is url_randCodeImage used to send a get request to obtain photos, and url_login used to post data. These are the data we want to package and send:

And our xml interface

First, we get our verification code photo and load the picture asynchronously

 //Send a request to get the verification code photo
 private void ChangeImage() {
        Request request = new Request.Builder()
                .url(App.url_randCodeImage)
 .build();
        Call call = okHttpClient.newCall(request);
        call.enqueue(new Callback() {
 @Override
 public void onFailure(Call call, IOException e) {
                Log.i( "info_callFailure" ,e.toString());
 } 
  
 @Override
 public void onResponse(Call call, Response response) throws IOException {
                byte[] byte_image = response.body().bytes(); 
  
  
 //Update the UI through the handler
                Message message = handler.obtainMessage();
                message.obj = byte_image;
                message.what = SUCCESS;
                Log.i( "info_handler" , "handler" );
                handler.sendMessage(message); 
  
 //Operation of getting session, session is placed in the cookie header, and after being taken out, it contains ";", after being taken out, it is the following s (that is, jsesseionid)
                Headers headers = response.headers();
                Log.d( "info_headers" , "header " + headers);
                List<String> cookies = headers. values ​​( "Set-Cookie" );
                String session = cookies.get(0);
                Log.d( "info_cookies" , "onResponse-size: " + cookies); 
  
                s = session.substring (0, session.indexOf( ";" ));
                Log.i( "info_s" , "session is :" + s); 
  
 }
 });
 } 
  
 // Load the image asynchronously
 public Handler handler = new Handler(){
 @Override
 public void handleMessage(Message msg) {
            switch (msg.what){
 // Load the network successfully to update the UI and process the obtained image resources
 case SUCCESS:
 //Get the byte array through message
                    byte[] Picture = (byte[]) msg.obj;
 //Use the BitmapFactory factory to convert the byte array into a bitmap
                    Bitmap bitmap = BitmapFactory.decodeByteArray(Picture, 0, Picture.length);
 //Set the picture through imageview
                    img_identy.setImageBitmap(bitmap); 
  
 break;
 //Logic code executed when loading network fails
 case FALL:
 Toast.makeText(MainActivity.this, "There is a problem with the network" , Toast.LENGTH_SHORT).show();
 break;
 }
 }
 };

After getting the photos and session, we package and send the data:

 private void LoginServer() {
 Log.i( "info_Login" , "Known session:" +s);
        OkHttpClient client = new OkHttpClient();
        FormBody body = new FormBody.Builder()
                . add ( "userName" ,et_username.getText().toString())
                . add ( "password" ,et_code.getText().toString())
                . add ( "randCode" ,et_identy.getText().toString())
                . add ( "langCode" , "zh-cn" )
 .build();
        Request request = new Request.Builder()
                .addHeader( "cookie" ,s)
                .url(App.url_login)
 .post(body)
 .build();
        Call call2 = okHttpClient.newCall(request);
        call2.enqueue(new Callback() {
 @Override
 public void onFailure(Call call, IOException e) {
                Log.i( "info_call2fail" ,e.toString());
 } 
  
 @Override
 public void onResponse(Call call, Response response) throws IOException {
                if(response.isSuccessful()){
                    Log.i( "info_call2success" ,response.body().string());
 }
                Headers headers = response.headers();
                Log.i( "info_respons.headers" ,headers+ "" ); 
  
 }
 });
 }

***Let's take a look at the information logged out after we successfully logged in

*** Here is our full code, I hope it will be helpful to those who don’t understand the process:

Continue