第三方登录

方案一:

// http://test.demo.lkj.com/search/page/index
<!DOCTYPE>
<html>
	<head>
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	    <title>博客首页</title>
	    <script src="http://y0.ifengimg.com/base/jQuery/jquery-1.9.1.min.js"></script>
	</head>
	<body>
		<style type="text/css">
			.hide{
				display: none;
			}
		</style>
		<button id="login-qq">登录QQ</button>
		<div class="user-info hide">
			hello<span class="user-name"></span>
		</div>
		<script type="text/javascript">
		    window.name='index';
		    function parseParams(str) {
		        var obj = {};
		        if(!str) { return obj; }
		        str.replace(/([^&=?#]*)=([^&=?#]*)/g, function (src, $1, $2) {
		            obj[$1] = $2;
		        });
		        return obj;
		    }
		    var parseParamsObj = parseParams(window.location.href);

		    $('#login-qq').on('click',function(){
		        window.open('http://demo.lkj.com/user/page/qq?forward=http://test.demo.lkj.com/search/page/index', 'popup_loginqq', 'toolbar=no, titlebar=no, top=100px, left=100px, location=no, ' + 'directories=no, status=no, menubar=no,' + ' copyhistory=yes, width=650, height=450');
		    });
		    if (parseParamsObj.code) {
		    	var passport = parseParamsObj.code;
		    	// 拿着passport请求用户登录信息
		    	$.ajax({
		            url: '/login',
		            type: 'post',
		            data: {
		            	qqcode: passport
		            },
		            success: function (ret) {
		            	// 判断是否登录并渲染登录页面
	    		  		// var ret = {
				    	// 	uid: 'testman',
				    	// 	value: '金秀贤'
				    	// };
		            	if (ret && ret.uid) {
		            		// 显示登录用户信息
		            		$('.user-info').find('.user-name').html(ret.value);
		            		$('.user-info').show();
		            		$('#login-qq').hide();
		            	}
		            	else {
		            		// 未登录,显示注册信息
		            	}
		            },
		            error: function (e) {

		            }
		        });
		    }
		</script>
	</body>
</html>

// http://demo.lkj.com/user/page/qq
<!DOCTYPE>
<html>
	<head>
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	    <title>QQ登录页面</title>
	    <script src="http://y0.ifengimg.com/base/jQuery/jquery-1.9.1.min.js"></script>
	</head>
	<body>
		<button id="login-qq">登录QQ</button>
		<script type="text/javascript">
			window.name="qq";
			function parseParams(str) {
		        var obj = {};
		        if(!str) { return obj; }
		        str.replace(/([^&=?#]*)=([^&=?#]*)/g, function (src, $1, $2) {
		            obj[$1] = $2;
		        });
		        return obj;
		    }
		    $('#login-qq').on('click',function(){
		        var parseParamsObj = parseParams(window.location.href);
				window.opener.location.href = parseParamsObj.forward + '?code=passport';
				window.close();
		    });
		</script>
	</body>
</html>

图如下:
1
2
分析:
在原页面地址后加了多余的参数且需要多次,继续改进

方案二:

// http://test.demo.lkj.com/search/page/index
<!DOCTYPE>
<html>
	<head>
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	    <title>博客首页</title>
	    <script src="http://y0.ifengimg.com/base/jQuery/jquery-1.9.1.min.js"></script>
	</head>
	<body>
		<style type="text/css">
			.hide{
				display: none;
			}
		</style>
		<div class="user-info hide">
			hello<span class="user-name"></span>
		</div>
		<iframe src="http://test.demo.lkj.com/search/page/login" allowtransparency="true" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" width="300" height="300" id="login-iframe" class=""></iframe>

		<script type="text/javascript">
			window.name = 'index';
			function getUserInfo () {
				if (!$.cookie.get('loginCode')) {
					return;
				}
				$.ajax({
		            url: '/login',
		            type: 'get',
		            success: function (ret) {
		            	// 判断是否登录并渲染登录页面
	    		  		// var ret = {
				    	// 	uid: 'testman',
				    	// 	value: '金秀贤'
				    	// };
		            	if (ret && ret.uid) {
		            		// 显示登录用户信息
		            		$('.user-info').find('.user-name').html(ret.value);
		            		$('.user-info').show();
		            		$('#login-iframe').hide();
		            	}
		            	else {
		            		// 未登录,显示注册信息
		            	}
		            },
		            error: function (e) {
		            	$('#login-iframe').attr('src','http://test.demo.lkj.com/search/page/login');
		            }
		        });
			}
			function loginCheck () {
				if ($.cookie.get('loginCode')) {
					getUserInfo();
				}
				else {
					$('#login-iframe').show();
					var siframe = document.getElementById('login-iframe');
					siframe.onload = siframe.onreadystatechange = function (e) {
						this.readyState && this.readyState != 'complete' || setTimeout(function(){
							getUserInfo();
						},500);
					};
				}
			}
			loginCheck();
		</script>
	</body>
</html>

// http://test.demo.lkj.com/search/page/login
<!DOCTYPE>
<html>
	<head>
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	    <title>博客登录页面</title>
	    <script src="http://y0.ifengimg.com/base/jQuery/jquery-1.9.1.min.js"></script>
	</head>
	<body>
		<style type="text/css">
			.hide{
				display: none;
			}
		</style>
		<button id="third-login-qq" class="hide">登录第三方QQ</button>
		
		<script type="text/javascript">
		    window.name='login';
		    function parseParams(str) {
		        var obj = {};
		        if(!str) { return obj; }
		        str.replace(/([^&=?#]*)=([^&=?#]*)/g, function (src, $1, $2) {
		            obj[$1] = $2;
		        });
		        return obj;
		    }
		    var parseParamsObj = parseParams(window.location.href);
		    if (parseParamsObj.code) {
		    	var passport = parseParamsObj.code;
		    	$.cookie.set('loginCode', passport, {expires: 1000* 60 * 2});
		    	if (window.opener && window.opener.location) {
	                window.opener.location.reload();
	            }
		    	window.close();
		    }
		    else {
		    	$('#third-login-qq').show();
		    	$('#third-login-qq').on('click',function(){
			        window.open('http://demo.lkj.com/user/page/qq?forward=http://test.demo.lkj.com/search/page/login', 'popup_loginqq', 'toolbar=no, titlebar=no, top=100px, left=100px, location=no, ' + 'directories=no, status=no, menubar=no,' + ' copyhistory=yes, width=650, height=450');
			    });
		    }
		</script>
	</body>
</html>

// http://demo.lkj.com/user/page/qq
<!DOCTYPE>
<html>
	<head>
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	    <title>QQ登录页面</title>
	    <script src="http://y0.ifengimg.com/base/jQuery/jquery-1.9.1.min.js"></script>
	</head>
	<body>
		<button id="login-qq">登录QQ</button>
		<script type="text/javascript">
			window.name="qq";
			function parseParams(str) {
		        var obj = {};
		        if(!str) { return obj; }
		        str.replace(/([^&=?#]*)=([^&=?#]*)/g, function (src, $1, $2) {
		            obj[$1] = $2;
		        });
		        return obj;
		    }
		    $('#login-qq').on('click',function(){
		        var parseParamsObj = parseParams(window.location.href);
				window.location.href = parseParamsObj.forward + '?code=passport';
		    });
		</script>
	</body>
</html>

图如下:
3
4
分析:
利用cookie完成第三方登录

此条目发表在JavaScript分类目录。将固定链接加入收藏夹。

发表评论

电子邮件地址不会被公开。 必填项已用*标注