31.4. 自定义Web认证页面

[注意] 注意

此功能仅20120824以后版本支持

进入Web认证->认证页面标签,勾选下面的使用自定义上传的认证页面:

使用自定义上传的认证页面

图 31.8. 使用自定义上传的认证页面


接着点击“这里”进入上传页面,将自定义的网页和图片都放在同一文件夹中压缩成ZIP/TAR/TGZ 格式,然后浏览找到该文件,勾选上传后是否自动解压缩后点击“上传”按钮

上传自定义页面

图 31.9. 上传自定义页面


[重要] 重要

这里上传的网页名必须为webauth.htm路由上才能读出(手机版的页面命名为webauth_mobile.htm),将所有网页元素都放在同一目录下压缩。

所有文件都在压缩包根目录

图 31.10. 所有文件都在压缩包根目录


接下来用户Web认证就可以用新的页面打开了,如果需要页面预览,也需要在路由内网网关指向路由才能实现

认证页面

图 31.11. 认证页面


也有不经过用户名密码自动认证跳转的认证方式,将此模板按上述方式上传后,需要在用户帐号管理中加入一个用户名密码为hs的特殊帐号,添加大数量级的允许同时登录数:

添加特殊帐号

图 31.12. 添加特殊帐号


客户端打开会有两次页面跳转,打开任意一个网页会弹出如下页面:

第一次跳转

图 31.13. 第一次跳转


点击“开始免费之旅”进行第二次跳转:

第二次跳转

图 31.14. 第二次跳转


点击“开始上网”后即可通过认证正常上网。

[注意] 注意

手机版本的认证页面会和PC版的认证页面的界面效果略微不同,功能上还是一致的。手机建议用UC、QQ、九天等浏览器

如果需要自行设计模板请注意以下几点:

下面这段代码是配置自动登录时所需的:



$.ajax({
		type: 'POST',
		url: '/api/webauth',
		data: "username=hs&passwd=hs&action=login",    
		dataType: 'json',
		success: function(data) {
		         $("#btn_login").attr("disabled", "");
	             $("#msg").html(data.msg);
 
							if (data.ret == 1 && from != ''){
								var url = '';
 
								if (data.redir == undefined){
									url = decodeURIComponent(from);	
								}else{
									if (data.redir.match(/\?/)){
										url = data.redir + '&from='+from;	
									}else{
										url = data.redir + '?from='+from;	
									}	
								}
								window.location = url;
							}
							
						}
					});
					return false;
				});
			});