用Silverlight自定义控件代替ActiveX安全密码输入框

引语

ActiveX控件已经被广泛的应用在安全输入方面，通过ActiveX控件，开发者可以轻易的通过加密算法取得加密后的字符串，以保证数据传输过程的安全。但是ActiveX控件的拘束性也显而易见 —— 仅IE浏览器提供支持。有一些开发者为了适配更多的浏览器和平台，不得不为每个平台开发相应的程序，极大的增加成本。Silverlight给开发者们提供了一个简单、高效并且几乎通用的途径来实现安全输入功能。通过Silverlight API和JS API，开发者可以轻易的在Silverlight应用和网页间实现交互操作（从有这个想法到实现示例程序花了不到20分钟）；Silverlight作为微软亲儿子，用户只需要安装Silverlight环境，无需额外安装控件；Silverlight对Windows系统和Mac系统提供了相应的Silverlight运行环境，几乎涵盖了绝大部分用户，但Linux平台并未得到支持，曾经有一个Moonlight项目致力于让Silverlight运行在Linux上，后来，他们去研究让C#运行在Android上了。

======================================================================================================

实现示例

设计Silverlight程序

首先，新建一个Silverlight程序，我这里将他命名为SilverX。

然后，新建一个自定义控件用于承载输入框，我这里将它命名为 SXPasswordBox

接下来，打开  SXPasswordBox.xaml，并将代码修改为以下代码。

<UserControl x:Class="SilverX.SXPasswordBox"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="50" d:DesignWidth="400">
    
    <Grid x:Name="LayoutRoot" Background="White">
        <PasswordBox x:Name="_Value"/>
    </Grid>
</UserControl>

然后打开 SXPasswordBox.cs 加入一个方法，并对JS脚本公开

[ScriptableMemberAttribute]//对脚本公开成员
public String GetValue()
{
   //在这里可以添加相应的加密代码，此处直接返回输入框的值。         
   return this._Value.Password;
}

打开Mainpage.xaml将刚刚写的控件拖进来

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:SilverX" x:Class="SilverX.MainPage"
    mc:Ignorable="d"
    d:DesignHeight="50" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">

        <local:SXPasswordBox x:Name="pwdbox"/>

    </Grid>
</UserControl>

打开Mainpage.cs ，注册刚刚拖进来的控件。

public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();

            this.Loaded += (obj, e) =>
            {
                HtmlPage.RegisterScriptableObject("pwdbox", this.pwdbox);
            };
        }
    }

这样，我们就完成了控件设计。

在页面中调用

首先，我们在Silverlight承载网站中打开承载此Silverlight应用的页面(SilverXTestPage.html)，并且加入以下脚本

<script type="text/javascript">
        var control = null;       

        function plugInLoaded(sender, args) {
            control = sender.getHost();//获取宿主
        }

        function getValue() {
            try {
                this.Text1.value= control.Content.pwdbox.GetValue();
            }
            catch (e)
            { alert(e); }
        }
</script>

将Object代码段修改为以下内容：

 <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="400" height="27">
		  <param name="source" value="ClientBin/SilverX.xap"/>
		  <param name="onError" value="onSilverlightError" />
		  <param name="background" value="white" />
		  <param name="minRuntimeVersion" value="5.0.61118.0" />
		  <param name="autoUpgrade" value="true" />
                  <param name="onLoad" value="plugInLoaded"/> <!--这一行是新加的-->
		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=5.0.61118.0" style="text-decoration:none">
 			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="获取 Microsoft Silverlight" style="border-style:none"/>
		  </a>
	    </object>

设计页面，加入一个输入框和一个按钮

<input id="Text1" type="text" />
<input id="Button1" type="button" value="Get" οnclick="getValue();"/><!--点击按钮调用JS函数-->

运行效果：

示例程序下载：SilverX.zip