android 手机号实现登录功能

先看看效果

image.png

我的这个登录功能是手机号和密码都已经在后台数据库有存储的，所以是直接登录。
重点有三个：
1、账号密码的存储，实现自动登录；
2、网络通信；
3、密码一定要Md5加密之后再传输

先把布局放上来

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/bg_login"
android:orientation="vertical"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="@dimen/item_height_normal"
android:layout_marginLeft="@dimen/margin_large"
android:layout_marginRight="@dimen/margin_large"
android:layout_marginTop="@dimen/dp_300">

    <ImageView
        android:id="@+id/img_account"
        android:layout_width="@dimen/dp_19"
        android:layout_height="@dimen/dp_20"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="@dimen/margin_tiny"
        android:layout_marginLeft="@dimen/margin_tiny"
        android:scaleType="fitXY"
        android:src="@drawable/ic_login_account"/>

    <EditText
        android:id="@+id/et_account"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_gravity="center"
        android:layout_marginBottom="@dimen/margin_tiny"
        android:layout_marginLeft="@dimen/margin_normal"
        android:layout_toRightOf="@+id/img_account"
        android:background="@null"
        android:hint="@string/account"
        android:maxLines="1"
        android:textColor="@android:color/black"
        android:textColorHint="@color/tv_gray_deep"
        android:textSize="@dimen/text_size_normal"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="@dimen/line_height"
        android:layout_alignParentBottom="true"
        android:layout_marginLeft="@dimen/margin_normal"
        android:layout_toRightOf="@+id/img_account"
        android:background="@color/line_new"/>
</RelativeLayout>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="@dimen/item_height_normal"
    android:layout_marginLeft="@dimen/margin_large"
    android:layout_marginRight="@dimen/margin_large">

    <ImageView
        android:id="@+id/img_pw"
        android:layout_width="@dimen/dp_18"
        android:layout_height="@dimen/dp_20"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="@dimen/margin_tiny"
        android:layout_marginLeft="@dimen/margin_tiny"
        android:scaleType="fitXY"
        android:src="@drawable/ic_login_pw"/>

    <EditText
        android:id="@+id/et_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_gravity="center"
        android:layout_marginBottom="@dimen/margin_tiny"
        android:layout_marginLeft="@dimen/margin_normal"
        android:layout_toRightOf="@+id/img_pw"
        android:background="@null"
        android:hint="@string/password"
        android:inputType="textPassword"
        android:maxLines="1"
        android:textColor="@android:color/black"
        android:textColorHint="@color/tv_gray_deep"
        android:textSize="@dimen/text_size_normal"/>
    <ImageView
        android:id="@+id/iv_see_password"
        android:layout_width="@dimen/image_width_litter"
        android:layout_height="@dimen/image_height_litter"
        android:src="@drawable/image_password_bg"
        android:layout_centerVertical="true"
        android:layout_alignParentRight="true"
        android:scaleType="fitXY"
        />
    <View
        android:layout_width="match_parent"
        android:layout_height="@dimen/line_height"
        android:layout_alignParentBottom="true"
        android:layout_marginLeft="@dimen/margin_normal"
        android:layout_toRightOf="@+id/img_pw"
        android:background="@color/line_new"/>
</RelativeLayout>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="@dimen/margin_large"
    android:layout_marginRight="@dimen/margin_large"
    android:layout_marginTop="@dimen/margin_small"
    android:paddingBottom="@dimen/margin_small"
    android:paddingTop="@dimen/margin_small"
    android:orientation="horizontal"
    android:gravity="center"
    >
    <CheckBox
        android:id="@+id/checkBox_login"
        android:padding="@dimen/dp_10"
        android:textSize="@dimen/text_size_normal"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:text="@string/check_login"
        android:textColor="@color/top_bar_normal_bg" android:checked="false"/>
    <CheckBox
        android:id="@+id/checkBox_password"
        android:padding="@dimen/dp_10"
        android:textSize="@dimen/text_size_normal"
        android:layout_gravity="right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/check_password"
        android:textColor="@color/top_bar_normal_bg" android:checked="false"/>

</LinearLayout>
<Button
    android:id="@+id/btn_login"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="@dimen/margin_large"
    android:layout_marginRight="@dimen/margin_large"
    android:layout_marginTop="@dimen/margin_huge"
    android:paddingBottom="@dimen/margin_small"
    android:paddingTop="@dimen/margin_small"
    android:text="@string/login"
    android:background="@drawable/btn_orange_selector"
    android:textColor="@android:color/white"
    android:textSize="@dimen/text_size_normal"/>

</LinearLayout>

进入正题，同理，先上源码，再解释关键的一些地方

public class LoginByPhone extends AppCompatActivity implements View.OnClickListener,CompoundButton.OnCheckedChangeListener{

private EditText etPhone;
private EditText etPassword;
private Button btn_login;
private CheckBox checkBox_password;
private CheckBox checkBox_login;
private ImageView iv_see_password;


@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_login_first);
    initView();
    initEvent();
    initData();
}

private void initEvent() {
    btn_login.setOnClickListener(this);
    checkBox_password.setOnCheckedChangeListener(this);
    checkBox_login.setOnCheckedChangeListener(this);
    iv_see_password.setOnClickListener(this);
}

private void initView() {
    etPassword = (EditText) findViewById(R.id.et_password);
    etPhone = (EditText) findViewById(R.id.et_account);
    checkBox_password = (CheckBox) findViewById(R.id.checkBox_password);
    checkBox_login = (CheckBox) findViewById(R.id.checkBox_login);
    iv_see_password = (ImageView) findViewById(R.id.iv_see_password);
    btn_login = findViewById(R.id.btn_login);
}

/**
 * 登录
 */
private void login(){
    Log.i("etPhone",etPhone.getText().toString());
    if(TextUtils.isEmpty(etPhone.getText().toString() )){
        Toast.makeText(LoginByPhone.this,R.string.phone_num_can_not_be_empty,Toast.LENGTH_LONG).show();
        return;
    }
    if(TextUtils.isEmpty(etPassword.getText())){
        Toast.makeText(LoginByPhone.this,R.string.password_can_not_be_empty,Toast.LENGTH_LONG).show();
        return;
    }
    final ProgressDialog pd = ProgressDialog.show(LoginByPhone.this,getResources().getString(R.string.connecting),getResources().getString(R.string.connecting_to_server));

    Thread loginRunnable = new Thread(){
        @Override
        public void run() {
            super.run();
            setLoginBtnClickable(false);
            new baichuang.callmonitor.Net.Login(etPhone.getText().toString(), Md5.md5(etPassword.getText().toString()),new baichuang.callmonitor.Net.Login.SuccessCallback(){
                @Override
                public void onSuccess(String token){
                    Config.cachedToken(LoginByPhone.this,token);
                    Config.cachedPhoneNum(LoginByPhone.this,etPhone.getText().toString());
                    pd.dismiss();

                    loadCheckBoxState();//记录下当前用户记住密码和自动登录的状态;
                    Intent i = new Intent(LoginByPhone.this,Call_Monitor.class);
                    i.putExtra(Config.KEY_TOKEN,token);
                    i.putExtra(Config.KEY_PHONE_NUM, etPhone.getText().toString());
                    startActivity(i);
                    finish();
                }
            }, new Login.FailCallback(){
                @Override
                public void onFail(){
                    setLoginBtnClickable(true);  //这里解放登录按钮，设置为可以点击
                    pd.dismiss();
                    Toast.makeText(LoginByPhone.this,R.string.fail_to_login,Toast.LENGTH_LONG).show();
                }
            });

        }
    };
    loginRunnable.start();
}

/**
 * 保存用户选择“记住密码”和“自动登陆”的状态
 */
private void loadCheckBoxState() {
    loadCheckBoxState(checkBox_password, checkBox_login);
}

/**
 * 保存按钮的状态值
 */
public void loadCheckBoxState(CheckBox checkBox_password, CheckBox checkBox_login) {

    //获取SharedPreferences对象，使用自定义类的方法来获取对象
    SharedPreferencesUtils helper = new SharedPreferencesUtils(this, "setting");

    //如果设置自动登录
    if (checkBox_login.isChecked()) {
        //创建记住密码和自动登录是都选择,保存密码数据
        helper.putValues(
                new SharedPreferencesUtils.ContentValue("remenberPassword", true),
                new SharedPreferencesUtils.ContentValue("autoLogin", true),
                new SharedPreferencesUtils.ContentValue("password", Base64Utils.encryptBASE64(getPassword())));

    } else if (!checkBox_password.isChecked()) { //如果没有保存密码，那么自动登录也是不选的
        //创建记住密码和自动登录是默认不选,密码为空
        helper.putValues(
                new SharedPreferencesUtils.ContentValue("remenberPassword", false),
                new SharedPreferencesUtils.ContentValue("autoLogin", false),
                new SharedPreferencesUtils.ContentValue("password", ""));
    } else if (checkBox_password.isChecked()) {   //如果保存密码，没有自动登录
        //创建记住密码为选中和自动登录是默认不选,保存密码数据
        helper.putValues(
                new SharedPreferencesUtils.ContentValue("remenberPassword", true),
                new SharedPreferencesUtils.ContentValue("autoLogin", false),
                new SharedPreferencesUtils.ContentValue("password", Base64Utils.encryptBASE64(getPassword())));
    }
}

/**
 * 是否可以点击登录按钮
 *
 * @param clickable
 */
public void setLoginBtnClickable(boolean clickable) {
    btn_login.setClickable(clickable);
}
/**
 * 获取密码
 */
public String getPassword() {
    return etPassword.getText().toString().trim();//去掉空格
}



private void initData() {
    //判断用户第一次登陆
    if (firstLogin()) {
        checkBox_password.setChecked(false);//取消记住密码的复选框
        checkBox_login.setChecked(false);//取消自动登录的复选框
    }
    //判断是否记住密码
    if (remenberPassword()) {
        checkBox_password.setChecked(true);//勾选记住密码
        setTextNameAndPassword();//把密码和账号输入到输入框中
    } else {
        setTextName();//把用户账号放到输入账号的输入框中
    }

    //判断是否自动登录
    if (autoLogin()) {
        checkBox_login.setChecked(true);
        login();//去登录就可以
    }
}

/**
 * 设置数据到输入框中
 */
public void setTextName() {
    etPhone.setText("" + getLocalName());
}

/**
 * 把本地保存的数据设置数据到输入框中
 */
public void setTextNameAndPassword() {
    etPhone.setText("" + getLocalName());
    etPassword.setText("" + getLocalPassword());
}


/**
 * 获得保存在本地的用户名
 */
public String getLocalName() {
    //获取SharedPreferences对象，使用自定义类的方法来获取对象
    SharedPreferencesUtils helper = new SharedPreferencesUtils(this, "setting");
    String name = helper.getString("name");
    return name;
}

/**
 * 获得保存在本地的密码
 */
public String getLocalPassword() {
    //获取SharedPreferences对象，使用自定义类的方法来获取对象
    SharedPreferencesUtils helper = new SharedPreferencesUtils(this, "setting");
    String password = helper.getString("password");
    return Base64Utils.decryptBASE64(password);   //解码一下
}


/**
 * 判断是否是第一次登陆
 */
private boolean firstLogin() {
    //获取SharedPreferences对象，使用自定义类的方法来获取对象
    SharedPreferencesUtils helper = new SharedPreferencesUtils(this, "setting");
    boolean first = helper.getBoolean("first", true);
    if (first) {
        //创建一个ContentVa对象（自定义的）设置不是第一次登录，,并创建记住密码和自动登录是默认不选，创建账号和密码为空
        helper.putValues(new SharedPreferencesUtils.ContentValue("first", false),
                new SharedPreferencesUtils.ContentValue("remenberPassword", false),
                new SharedPreferencesUtils.ContentValue("autoLogin", false),
                new SharedPreferencesUtils.ContentValue("name", ""),
                new SharedPreferencesUtils.ContentValue("password", ""));
        return true;
    }
    return false;
}
/**
 * 判断是否自动登录
 */
private boolean autoLogin() {
    //获取SharedPreferences对象，使用自定义类的方法来获取对象
    SharedPreferencesUtils helper = new SharedPreferencesUtils(this, "setting");
    boolean autoLogin = helper.getBoolean("autoLogin", false);
    return autoLogin;
}

/**
 * 判断是否记住密码
 */
private boolean remenberPassword() {
    //获取SharedPreferences对象，使用自定义类的方法来获取对象
    SharedPreferencesUtils helper = new SharedPreferencesUtils(this, "setting");
    boolean remenberPassword = helper.getBoolean("remenberPassword", false);
    return remenberPassword;
}

@Override
public void onClick(View view) {
    switch (view.getId()) {
        case R.id.btn_login:
            loadUserName();    //无论如何保存一下用户名
            login(); //登陆
            break;
        case R.id.iv_see_password:
            setPasswordVisibility();    //改变图片并设置输入框的文本可见或不可见
            break;

    }
}

/**
 * 保存用户账号
 */
public void loadUserName() {
    if (!getAccount().equals("") || !getAccount().equals("请输入登录账号")) {
        SharedPreferencesUtils helper = new SharedPreferencesUtils(this, "setting");
        helper.putValues(new SharedPreferencesUtils.ContentValue("name", getAccount()));
    }
}


/**
 * 设置密码可见和不可见的相互转换
 */
private void setPasswordVisibility() {
    if (iv_see_password.isSelected()) {
        iv_see_password.setSelected(false);
        //密码不可见
        etPassword.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);
    } else {
        iv_see_password.setSelected(true);
        //密码可见
        etPassword.setInputType(InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);
    }
}

/**
 * 获取账号
 */
public String getAccount() {
    return etPhone.getText().toString().trim();//去掉空格
}


@Override
public void onCheckedChanged(CompoundButton compoundButton, boolean isChecked) {
    if (compoundButton == checkBox_password) {  //记住密码选框发生改变时
        if (!isChecked) {   //如果取消“记住密码”，那么同样取消自动登陆
            checkBox_login.setChecked(false);
        }
    } else if (compoundButton == checkBox_login) {   //自动登陆选框发生改变时
        if (isChecked) {   //如果选择“自动登录”，那么同样选中“记住密码”
            checkBox_password.setChecked(true);
        }
    }
}

}

基本的initView()，initData()就不啰嗦了。
先看login()这个函数
/**
* 登录
*/

private void login(){
    Log.i("etPhone",etPhone.getText().toString());
    if(TextUtils.isEmpty(etPhone.getText().toString() )){
        Toast.makeText(LoginByPhone.this,R.string.phone_num_can_not_be_empty,Toast.LENGTH_LONG).show();
        return;
    }
    if(TextUtils.isEmpty(etPassword.getText())){
        Toast.makeText(LoginByPhone.this,R.string.password_can_not_be_empty,Toast.LENGTH_LONG).show();
        return;
    }
    final ProgressDialog pd =     ProgressDialog.show(LoginByPhone.this,getResources().getString(R.string.connecting),getResources().getString(R.string.connecting_to_server));

    Thread loginRunnable = new Thread(){
        @Override
        public void run() {
            super.run();
            setLoginBtnClickable(false);
            new baichuang.callmonitor.Net.Login(etPhone.getText().toString(), Md5.md5(etPassword.getText().toString()),new baichuang.callmonitor.Net.Login.SuccessCallback(){
                @Override
                public void onSuccess(String token){
                    Config.cachedToken(LoginByPhone.this,token);
                    Config.cachedPhoneNum(LoginByPhone.this,etPhone.getText().toString());
                    pd.dismiss();

                    loadCheckBoxState();//记录下当前用户记住密码和自动登录的状态;
                    Intent i = new Intent(LoginByPhone.this,Call_Monitor.class);
                    i.putExtra(Config.KEY_TOKEN,token);
                    i.putExtra(Config.KEY_PHONE_NUM, etPhone.getText().toString());
                    startActivity(i);
                    finish();
                }
            }, new Login.FailCallback(){
                @Override
                public void onFail(){
                    setLoginBtnClickable(true);  //这里解放登录按钮，设置为可以点击
                    pd.dismiss();
                    Toast.makeText(LoginByPhone.this,R.string.fail_to_login,Toast.LENGTH_LONG).show();
                }
            });

        }
    };
    loginRunnable.start();
}

ProgressDialog可设可不设，但是考虑到有些人的网络情况不好，所以给用户点友好体验还是蛮重要的。所以还是加上吧。
new一个Thread()，在其中实现网络请求将用户名和密码传输给后台并获取结果。
这个网络封装类用的是HttpUrlConnection，自己写一个NetConnection封装好基本网络请求，这样之后关于字符串和json的网络请求就不用每次都这样重新写了。

public class NetConnection {

private static String TAG="netConnection: ";

public NetConnection(final String url,final HttpMethod method,final SuccessCallback successCallback,final FailCallback failCallback,final String...kvs ){

    new AsyncTask<Void, Void, String>(){
        @Override
        protected String doInBackground(Void... voids) {

            StringBuffer paramsStr = new StringBuffer();

            for (int i = 0; i <kvs.length ; i+=2) {
                paramsStr.append(kvs[i]).append("=").append(kvs[i+1]).append("&");
            }

            try{
                HttpURLConnection uc;

                switch (method){
                    case POST:
                        uc = (HttpURLConnection)new URL(url).openConnection();
                        System.out.println(uc);
                        // 显示开启请求体
                        uc.setDoInput(true);
                        uc.setDoOutput(true);

                        BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(uc.getOutputStream(), Config.CHARSET));
                        bw.write(paramsStr.toString());
                        bw.flush();
                        bw.close();
                        break;
                    default:
                        uc = (HttpURLConnection) new URL(url+"?"+ paramsStr.toString()).openConnection();
                        break;
                }

                BufferedReader br = new BufferedReader(new InputStreamReader(uc.getInputStream(),Config.CHARSET));

                if(uc.getResponseCode() == 200){
                    String line = null;
                    StringBuffer result = new StringBuffer();
                    while((line=br.readLine())!=null){
                        result.append(line);
                    }
                    return result.toString();
                } else if( uc.getResponseCode() == 404){
                    Log.i(TAG,"404访问服务器失败");
                } else if( uc.getResponseCode() == 500 ){
                    Log.i(TAG,"500服务器拒绝访问");
                }

            } catch (MalformedURLException e){
                e.printStackTrace();
            } catch (IOException e){
                e.printStackTrace();
            }
            return null;
        }

        @Override
        protected void onPostExecute(String result) {

            if (result!= null) {
                successCallback.onSuccess(result);
            } else {
                if(failCallback!=null){
                    failCallback.onFail();
                }
            }

            super.onPostExecute(result);
        }

    }.execute();
}

public static interface SuccessCallback{
    void onSuccess(String result);
}

public static interface FailCallback{
    void onFail();
}

}
两个接口记得写哦。
Login网络请求类如下

public class Login {
public Login(String phone, String password, final SuccessCallback successCallback, final FailCallback failCallback){
new NetConnection(Config.SVERVICE_URL, HttpMethod.POST, new NetConnection.SuccessCallback() {
@Override
public void onSuccess(String result) {
try {
JSONObject obj = new JSONObject(result);
switch (obj.getInt(Config.KEY_STATUS)){
case Config.RESULT_STATUS_SUCCESS:
System.out.println(successCallback);
if(successCallback!=null){
successCallback.onSuccess(obj.getString(Config.KEY_TOKEN));
}
break;
default:
if(failCallback!=null){
failCallback.onFail();
}
break;
}

            } catch (JSONException e) {
                e.printStackTrace();
                if(failCallback!=null){
                    failCallback.onFail();
                }
            }
        }
    }, new NetConnection.FailCallback() {
        @Override
        public void onFail() {
            if(failCallback!=null){
                failCallback.onFail();
            }
        }
    },Config.PHONE_NUM,phone,Config.PASS_WORD,password);
}

public static interface SuccessCallback{
    void onSuccess(String token);
}

public static interface FailCallback{
    void onFail();
}

}
这样其实登录基本功能就好了。其他的都是关于记住密码啊之类的了。
本地保存密码用到的是SharedPreferences, 我自己封装的如下：

public class SharedPreferencesUtils {
//定义一个SharePreference对象
SharedPreferences sharedPreferences;
//定义一个上下文对象

//创建SharePreference对象时要上下文和存储的模式
//通过构造方法传入一个上下文
public SharedPreferencesUtils(Context context, String fileName) {
    //实例化SharePreference对象，使用的是get方法，而不是new创建
    //第一个参数是文件的名字
    //第二个参数是存储的模式，一般都是使用私有方式：Context.MODE_PRIVATE
    sharedPreferences = context.getSharedPreferences(fileName, Context.MODE_PRIVATE);
}

/**
 * 存储数据
 * 这里要对存储的数据进行判断在存储
 * 只能存储简单的几种数据
 * 这里使用的是自定义的ContentValue类，来进行对多个数据的处理
 */
//创建一个内部类使用，里面有key和value这两个值
public static class ContentValue {
    String key;
    Object value;

    //通过构造方法来传入key和value
    public ContentValue(String key, Object value) {
        this.key = key;
        this.value = value;
    }
}

//一次可以传入多个ContentValue对象的值
public void putValues(ContentValue... contentValues) {
    //获取SharePreference对象的编辑对象，才能进行数据的存储
    SharedPreferences.Editor editor = sharedPreferences.edit();
    //数据分类和存储
    for (ContentValue contentValue : contentValues) {
        //如果是字符型类型
        if (contentValue.value instanceof String) {
            editor.putString(contentValue.key, contentValue.value.toString()).commit();
        }
        //如果是int类型
        if (contentValue.value instanceof Integer) {
            editor.putInt(contentValue.key, Integer.parseInt(contentValue.value.toString())).commit();
        }
        //如果是Long类型
        if (contentValue.value instanceof Long) {
            editor.putLong(contentValue.key, Long.parseLong(contentValue.value.toString())).commit();
        }
        //如果是布尔类型
        if (contentValue.value instanceof Boolean) {
            editor.putBoolean(contentValue.key, Boolean.parseBoolean(contentValue.value.toString())).commit();
        }

    }
}


//获取数据的方法
public String getString(String key) {
    return sharedPreferences.getString(key, null);
}

public boolean getBoolean(String key, Boolean b) {
    return sharedPreferences.getBoolean(key, b);
}

public int getInt(String key) {
    return sharedPreferences.getInt(key, -1);
}

public long getLong(String key) {
    return sharedPreferences.getLong(key, -1);
}

//清除当前文件的所有的数据
public void clear() {
    sharedPreferences.edit().clear().commit();
}

}

其他好像没啥可讲的了，都在代码中。大家有想要了解的，可以私我。

服务器端：
controllers/android/login.js