QWebFramewok使用教程之-（三）自定义带验证码的登录页面

框架中自带了一个登录简单的界面Login.aspx，用于快速开发。如果对界面有要求的可以自己定义登录页面风格.

实现的原理很简单，做好页面UI后，后台代码使用框架自带用户登录验证的接口即可。

　　验证接口：QWebFramework.Services.UserServices.GetInstance().CheckedUserLogin(userName, passWordEncrypt, true);

 

以下为演示的代码：

 

　　1.新建立一个登录页面：DemoLogin.aspx，为了方便起见，演示代码为asp.net webform 提交方式，当然可以使用AJAX方式提交，原理都是一样！

　　DemoLogin.aspx 代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DemoLogin.aspx.cs" Inherits="QWebFrameworkDemo.DemoLogin" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
<table width="400" border="0" align="center" cellpadding="5" cellspacing="5">
  <tr>
    <td colspan="2" align="center"><h1>登录演示</h1></td>
  </tr>
  <tr>
    <td width="97">用户名：</td>
    <td width="268">
        <asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>
      </td>
  </tr>
  <tr>
    <td>密码</td>
    <td>
        <asp:TextBox ID="txtPassWord" runat="server" TextMode="Password"></asp:TextBox>
      </td>
  </tr>
    <tr>
    <td>验证码</td>
    <td>
        <asp:TextBox ID="txtImageCode" runat="server"></asp:TextBox>
        <asp:Image ID="imgValidateCode" ImageUrl="~/Anonymous/ValidateCode.ashx" runat="server" />
      </td>
  </tr>
  <tr>
    <td colspan="2" align="center">
        <asp:Label ID="lblMessage" runat="server"></asp:Label>
      </td>
  </tr>
  <tr>
    <td colspan="2" align="center">
        <asp:Button ID="btnLogin" runat="server" Text="登录" onclick="btnLogin_Click" />
      </td>
  </tr>
</table>
    </form>
</body>
</html>

　　2.效果如下图：验证码图片可以自己实现更为高级的方式做验证，也可以不使用验证，主要看业务功能需要

　　3.DemoLogin.aspx.cs 后台代码如下：

　　

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using QWebFramework.ExtendUtils;//常用的扩展方法

namespace QWebFrameworkDemo
{
    public partial class DemoLogin : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void btnLogin_Click(object sender, EventArgs e)
        {
            //获取客户端参数
            string userName = this.txtUserName.Text;
            string password = this.txtPassWord.Text;
            string imgCode = this.txtImageCode.Text;

            //1.先判断验证码是否正确，如果不要验证码可以忽略验证码判断步骤
            if (Session["qwf.demo.imageCode"].ToString().ToLower() == imgCode.ToLower())
            {
                //框架默认用户加密算法为MD5加密.
                string passWordEncrypt = password.StrToMD5();
                
                //关键代码：调用登录框架接口，传入的密码为加密后的字符，方便做自定义加密算法扩展
                bool isLogin = QWebFramework.Services.UserServices.GetInstance().CheckedUserLogin(userName, passWordEncrypt, true);

                if (isLogin)
                {
　　　　　　　　　　　 //登录成功则，调整到系统默认Main.aspx 页面
                    Response.Redirect("Main.aspx", true);
                }
            }
            else
            {
                this.lblMessage.Text = "验证码错误！";
            }
        }


        
    }
}

　　最后一步，配置QWebFramework/Config/Core.config 下的配置文件，修改登录地址

　　

这样一个自定义的登录界面就完成了

 

几点注意事项：

　　1.关于密码的加密算法：系统默认的是32为MD5的小写，也可以自定义算法加密

　　2.本实例的验证码页面为.ashx，并实现了 IRequiresSessionState接口，如果不排除这页面，则系统会自动拦截，因为是公共模块，不需要登录即可访问，为了规范化程序的目录结构，所以存放在Anonymous文件夹，并在系统配置文件排除了不用认证就可以访问的文件或文件夹如下图。具体的拦截方式会在后面讲解

　　

 

posted @ 2016-04-17 12:11  qwebframework  阅读(371)  评论(0)    收藏  举报