Web流行框架SSM+Shiro+Bootstrap+Jquery项目实践之快速登陆

 今天我因为工作上的事情太多,忙到晚上8点才有时间来做这个项目。由于时间有限,我就只做个快速登陆的功能。谈到快速登陆很多人都不陌生,日常的社交账号大多都可以作为凭证来帮助我们快速登陆一些网站、app、游戏等,对于用户来说很方便,而对于服务提供商来说无疑增加了很多潜在的用户红利。现在我就来着手开发这个功能。

 首先在login.jsp中添加一段写好的html(在form标签外部插入):

<div class="social-auth-links" style="margin-bottom: 0px;">
				<div class="row">
					<div class="col-xs-5">
						<div class="text-left" style="margin-top: 5px;">快速登录</div>
					</div>
					<div class="col-xs-7">
						<div class="text-right">
							<!--<a class="btn btn-social-icon btn-primary"><i class="fa fa-qq"></i></a>
                        <a class="btn btn-social-icon btn-success"><i class="fa fa-wechat"></i></a>
                        <a class="btn btn-social-icon btn-warning"><i class="fa fa-weibo"></i></a>
                        <a class="btn btn-social-icon btn-info"><i class="fa fa-github"></i></a>-->
						</div>
					</div>
				</div>
				<!-- /.social-auth-links -->
			</div>

 上面我注释掉了一些内容,那是快速登陆的图标,接下来解开一个,比如<a class="btn btn-social-icon btn-primary"><i class="fa fa-qq"></i>,来看下效果:


 咱们很明显的发现,登陆页面右下角多了一个QQ的图标,这是fa-qq样式的效果,当然这里也可以换成好看的图标样式,我们先不讨论,就用默认的。我现在点击它,是没有任何效果的,好了,该在后台添加一个服务来帮助我们实现快速登陆的功能了。这里要用到QQ OAuth-api,如何申请appid和appkey请参考http://wiki.connect.qq.com/,我这里已经申请好了,先写




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章