生成ASP.NET網(wǎng)站驗(yàn)證碼教學(xué)案例探討

謝彬彬

[摘? ? ? ? ? ?要]? ASP.NET動態(tài)網(wǎng)站開發(fā)是一門綜合性很強(qiáng)的實(shí)踐課程，其中圖片驗(yàn)證碼技術(shù)是該課程的重難點(diǎn)之一。針對中職學(xué)校學(xué)生的學(xué)習(xí)基礎(chǔ)相對較為薄弱，通過任務(wù)驅(qū)動，使學(xué)生逐步深入，掌握如何調(diào)用預(yù)定義類生成驗(yàn)證碼并在網(wǎng)頁中插入生成的驗(yàn)證碼圖片。從而降低學(xué)習(xí)難度，為中職學(xué)校Asp.net動態(tài)網(wǎng)站開發(fā)的教學(xué)提供一種思路。

[關(guān)? ? 鍵? ?詞]? ASP.NET;驗(yàn)證碼;教學(xué)案例;任務(wù)驅(qū)動

[中圖分類號]? G712? ? ? ? ? ? ? ?[文獻(xiàn)標(biāo)志碼]? A? ? ? ? ? ? ? ? ? ? ? [文章編號]? 2096-0603（2019）28-0099-03

ASP.NET動態(tài)網(wǎng)站開發(fā)課程是我校軟件與信息服務(wù)專業(yè)的職業(yè)能力核心課程，該課程是對學(xué)生之前學(xué)習(xí)的C#程序設(shè)計、數(shù)據(jù)庫設(shè)計基礎(chǔ)、網(wǎng)頁設(shè)計等課程的綜合應(yīng)用，是一門綜合性、實(shí)踐性和難度都較高的課程。該課程主要包含的內(nèi)容有服務(wù)器控件、內(nèi)置服務(wù)器對象的使用、ADO.NET操作數(shù)據(jù)庫等技術(shù)。

圖片驗(yàn)證碼是一串為了防止惡意程序進(jìn)行暴力破解密碼等關(guān)鍵信息，由服務(wù)器端按一定算法生成的數(shù)字或字符，并將該驗(yàn)證碼生成一幅圖片，再對圖片進(jìn)行干擾處理[1]。驗(yàn)證碼是動態(tài)網(wǎng)站開發(fā)中廣泛使用且非常重要的一種安全技術(shù)，因此也是本課程的重點(diǎn)與難點(diǎn)之一。

本文的教學(xué)案例針對中職學(xué)生的學(xué)習(xí)基礎(chǔ)相對較為薄弱，通過任務(wù)驅(qū)動設(shè)置了三個課堂任務(wù)，使學(xué)生逐步深入，掌握如何調(diào)用預(yù)定義類生成驗(yàn)證碼并在網(wǎng)頁中插入生成的驗(yàn)證碼圖片，從而降低了學(xué)習(xí)難度，為中職ASP.NET動態(tài)網(wǎng)站開發(fā)的教學(xué)提供了一種思路。

一、教學(xué)案例設(shè)計思想

在教學(xué)案例的設(shè)計上，以“任務(wù)驅(qū)動式”、學(xué)生自主協(xié)作探究學(xué)習(xí)來進(jìn)行設(shè)計。

1.教學(xué)過程逐漸深入，結(jié)合中職學(xué)生的實(shí)際情況，讓學(xué)生在實(shí)踐中掌握所學(xué)知識的同時，通過小組討論問題，培養(yǎng)學(xué)生獨(dú)立分析問題、解決問題的能力。

2.由教師根據(jù)學(xué)習(xí)任務(wù)先進(jìn)行講解與引導(dǎo)教學(xué)，通過任務(wù)驅(qū)動，讓學(xué)生分組進(jìn)行程序開發(fā)，通過學(xué)生自主協(xié)作探究體會影響驗(yàn)證碼被破解的因素，同時認(rèn)識到在實(shí)際開發(fā)中需要考慮安全與用戶體驗(yàn)相結(jié)合[2]。

3.根據(jù)中職學(xué)生的學(xué)習(xí)基礎(chǔ)，提供常見的驗(yàn)證碼核心類代碼，體會調(diào)用代碼生成驗(yàn)證碼的過程，避免直接開發(fā)驗(yàn)證碼，從而降低學(xué)習(xí)的難度。

4.學(xué)生評價上，通過網(wǎng)頁實(shí)時顯示學(xué)生生成的驗(yàn)證碼圖片，采用直觀方式來顯示程序的執(zhí)行效果，能夠及時評估學(xué)生完成的情況，使師生得到及時反饋。

二、教學(xué)重點(diǎn)與難點(diǎn)

本案例中的教學(xué)重點(diǎn)是讓學(xué)生掌握如何調(diào)用驗(yàn)證碼核心類生成驗(yàn)證碼。

教學(xué)的難點(diǎn)是：

1.理解生成驗(yàn)證碼的底層代碼原理。由于中職學(xué)生的基礎(chǔ)相對薄弱，生成驗(yàn)證碼的底層代碼中涉及GDI、圖片文件操作等，而學(xué)生只有理解其基本原理才能正確使用。

2.如何將生成的驗(yàn)證碼應(yīng)用到實(shí)際網(wǎng)頁開發(fā)中。僅僅調(diào)用底層代碼生成驗(yàn)證碼圖片并不等于整個頁面就開發(fā)好了，還需要結(jié)合具體實(shí)例讓學(xué)生掌握完整的頁面開發(fā)以及其中需要考慮的問題。

三、生成驗(yàn)證碼的核心類介紹

在提供給學(xué)生的生成驗(yàn)證碼VerificationCode類中包含的核心方法：CreateVerificationGraphic（string verificationCode，HttpContext context，int lineCount=25，int pointCount=100）[3]。該方法將生成的包含隨機(jī)數(shù)字的字符串輸出為圖片[4]。參數(shù)VerificationCode是調(diào)用CreateVerificationCode（int length）方法生成的包含隨機(jī)數(shù)字的字符串。參數(shù)context是用戶通過瀏覽器請求數(shù)據(jù)時發(fā)送的請求報文。參數(shù)lineCount是繪制干擾線的數(shù)量，默認(rèn)是25條。參數(shù)pointCount是繪制干擾點(diǎn)的數(shù)量，默認(rèn)是100個。執(zhí)行該方法時，除了將生成的包含隨機(jī)數(shù)字的字符串輸出為圖片外，為了降低驗(yàn)證碼圖片被惡意程序識別的幾率，還需在驗(yàn)證碼圖片上繪制若干隨機(jī)位置的干擾線、干擾點(diǎn)，參考關(guān)鍵代碼片段如圖1所示。

四、具體教學(xué)案例設(shè)計

（一）案例描述

在進(jìn)行驗(yàn)證碼開發(fā)的教學(xué)中，由于學(xué)生首次接觸，且中職學(xué)生的專業(yè)基礎(chǔ)相對薄弱，故要求學(xué)生直接開發(fā)驗(yàn)證碼的難度較大。而且驗(yàn)證碼開發(fā)的技術(shù)本身是屬于比較常見的一種技術(shù)，因此在本案例中將會提供生成驗(yàn)證碼的底層代碼給學(xué)生，學(xué)生重點(diǎn)掌握如何調(diào)用、使用現(xiàn)有的驗(yàn)證碼核心類生成驗(yàn)證碼并應(yīng)用到網(wǎng)頁上。

（二）任務(wù)劃分

本案例將教學(xué)內(nèi)容分解為三個學(xué)習(xí)任務(wù)，讓學(xué)生由淺入深掌握生成驗(yàn)證碼的開發(fā)。

1.任務(wù)1：調(diào)用驗(yàn)證碼核心類生成驗(yàn)證碼圖片

由生活中常見的驗(yàn)證碼圖片引入本課題，教師講解驗(yàn)證碼的基本原理以及生成驗(yàn)證碼VerificationCode類中的核心方法，為了使學(xué)生更好地掌握生成驗(yàn)證碼的基本原理，使用ASP.NET自帶的Random類產(chǎn)生四位數(shù)的隨機(jī)數(shù)，引導(dǎo)學(xué)生根據(jù)微課自主學(xué)習(xí)，將教師提供的VerificationCode類加入項(xiàng)目中，新建一個ASP.NET一般處理程序，嘗試調(diào)用VerificationCode類中的核心方法生成驗(yàn)證碼圖片。右圖是參考代碼。

在對學(xué)生完成本學(xué)習(xí)任務(wù)的評價上，要求學(xué)生將生成的驗(yàn)證碼圖片保存并提交到FTP的指定路徑下，由教師端制作的網(wǎng)頁實(shí)時讀取并顯示學(xué)生生成的驗(yàn)證碼圖片，如圖2所示。教師可以結(jié)合學(xué)生完成的情況進(jìn)行評價、講解，學(xué)生的學(xué)習(xí)結(jié)果也可以馬上得到及時的反饋。

課堂討論環(huán)節(jié)：學(xué)生完成上述學(xué)習(xí)任務(wù)后，引導(dǎo)學(xué)生思考：使用ASP.NET自帶的Random類產(chǎn)生隨機(jī)數(shù)驗(yàn)證碼有什么局限性？影響驗(yàn)證碼被破解的因素有哪些？

2.任務(wù)2：探究影響驗(yàn)證碼被破解的因素

提前將學(xué)生分成若干組使用不同的參數(shù)調(diào)用CreateVerificationGraphic方法生成驗(yàn)證碼，每組參數(shù)生成3張驗(yàn)證碼，通過微信掃一掃翻譯的方式“破解”驗(yàn)證碼，分別記錄下人眼識別、微信翻譯識別的驗(yàn)證碼，最后通過探究嘗試寫出自己認(rèn)為最合適的參數(shù)，以直觀的方式探究影響驗(yàn)證碼被破解的因素。

第一組參數(shù)：即任務(wù)1中使用默認(rèn)參數(shù)生成的驗(yàn)證碼圖片，繪制干擾線的數(shù)量為25，繪制干擾點(diǎn)的數(shù)量為100，如圖3所示。

第二組參數(shù)：繪制干擾線的數(shù)量為0，繪制干擾點(diǎn)的數(shù)量為0，即沒有干擾線、干擾點(diǎn)，如圖4所示。

第三組參數(shù)：繪制干擾線的數(shù)量為50，繪制干擾點(diǎn)的數(shù)量為200，如圖5所示。

第四組參數(shù)：繪制干擾線的數(shù)量為100，繪制干擾點(diǎn)的數(shù)量為400，如圖6所示。

通過完成這項(xiàng)任務(wù)，加深學(xué)生對如何調(diào)用生成驗(yàn)證碼底層代碼的理解，體會從哪些角度去提高驗(yàn)證碼的安全性，了解驗(yàn)證碼的生成需要根據(jù)實(shí)際情況兼顧安全性與用戶體驗(yàn)。

課堂討論環(huán)節(jié)：學(xué)生完成上述學(xué)習(xí)任務(wù)后，引導(dǎo)學(xué)生思考：如何將驗(yàn)證碼圖片加入網(wǎng)頁中？

3.任務(wù)3：將驗(yàn)證碼圖片加入網(wǎng)頁中

通過完成前面兩個任務(wù)，學(xué)生掌握了通過調(diào)用預(yù)定義類生成驗(yàn)證碼。接著，由教師提供一個登錄頁面的素材，引導(dǎo)學(xué)生將前端頁面整合進(jìn)項(xiàng)目中。在前端頁面中，將驗(yàn)證碼位置處的Image控件的ImageUrl設(shè)置為上述的一般處理程序即可，效果如圖7所示。通過完成這個任務(wù)，使學(xué)生掌握如何將驗(yàn)證碼圖片插入到網(wǎng)頁當(dāng)中。

擴(kuò)展任務(wù)：在驗(yàn)證碼旁邊添加“看不清？換一張”的鏈接，實(shí)現(xiàn)點(diǎn)擊鏈接在不刷新頁面的情況下重新加載驗(yàn)證碼。結(jié)合實(shí)際中常見的功能，通過擴(kuò)展任務(wù)引導(dǎo)學(xué)有余力的學(xué)生進(jìn)一步思考延伸開發(fā)有實(shí)際應(yīng)用意義的切換驗(yàn)證碼圖片功能。

通過完成上述三個任務(wù)，學(xué)生基本掌握了如何調(diào)用預(yù)定義類生成驗(yàn)證碼圖片，通過自主探究了解到影響驗(yàn)證碼破解的因素，掌握了如何在網(wǎng)頁中插入生成的驗(yàn)證碼圖片。

五、結(jié)束語

本案例通過任務(wù)驅(qū)動設(shè)置了三個課堂任務(wù)，使學(xué)生逐步深入，掌握如何調(diào)用預(yù)定義類生成驗(yàn)證碼并在網(wǎng)頁中插入生成的驗(yàn)證碼圖片。本案例為中職學(xué)校ASP.NET動態(tài)網(wǎng)站開發(fā)課程教學(xué)提供了一種思路，例如對于ADO.NET操作數(shù)據(jù)庫中SqlHelper類的使用，考慮到中職學(xué)生的基礎(chǔ)，也可以結(jié)合一些案例讓學(xué)生從中學(xué)會如何調(diào)用已有封裝好的類來實(shí)現(xiàn)功能，從而降低學(xué)習(xí)難度，使學(xué)生更容易上手。

參考文獻(xiàn)：

[1]韓玉民.驗(yàn)證碼技術(shù)研究及基于ASP.NET的實(shí)現(xiàn)[J].現(xiàn)代計算機(jī)（專業(yè)版），2009（8）.

[2]翁佩純，馬慧，張遠(yuǎn)海.以“任務(wù)驅(qū)動”的《面向?qū)ο蟪绦蛟O(shè)計》教學(xué)案例設(shè)計[J].現(xiàn)代計算機(jī)（專業(yè)版），2016（14）：50-54.

[3]panzemin1234.ASP.NET MVC實(shí)現(xiàn)網(wǎng)站驗(yàn)證碼功能[EB/OL].http：//blog.sina.com.cn/s/blog_5738dc350100lxns.html，2010-10-27.

[4]國家863中部軟件孵化器.ASP.NET從入門到精通[M].北京：人民郵電出版社，2015.

◎編輯 張 俐