实现 新浪 JS SDK 第三方登陆

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{font-size: 100px;}
		</style>
	</head>
		<body>
			<ul class="clearfix">
				 <li>
					 <!-- 不需要后台支持-->
					 <a href='https://graph.qq.com/oauth2.0/authorize?client_id=101485965&response_type=token&scope=all&redirect_uri=https://www.hebaocun.com/h5/login.html'>
						 <span>QQ登录</span>
					 </a>
				 </li>
				 
				 <li>
					<!-- 需要后台支持 -->
					 <!-- <a href="https://open.weibo.cn/oauth2/authorize?client_id=351594369&display=mobile&response_type=code&redirect_uri=https://www.hebaocun.com/h5/login.html">
						 <span>新浪登录</span>
					 </a> -->
					 
					<!-- 不需要后台支持-->
					<a id="sn" href="javascript:">
					 	<span>新浪登录</span>
					</a>
				 </li>
			</ul>
	</body>
	
	<!-- SINA -->
	<script type="text/javascript" src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js?appkey=351594369&forcelogin=true&display=mobile" charset="utf-8"></script>
	<script type="text/javascript">
			document.getElementById('sn').addEventListener('click', function(){
				// 弹出登入窗口
				WB2.login(function() {
					// 验证是否登入成功
					if (WB2.checkLogin()) {
						// api 入口
						WB2.anyWhere(function(W) {
							//获取用户UID
							W.parseCMD('/account/get_uid.json', function(oResult, bStatus){
							   if(bStatus){
									//此uid是唯一id,下次登录通过此id来判断是否已经登陆过了
									var uid = oResult.uid;
									
									//获取用户信息
									W.parseCMD("/users/show.json", 
												function (oResult2, bStatus) {
													var args = {
														openid:oResult2.id,//获取用户openid
														access_token:WB2.oauthData.access_token,//获取用户access_token
														username:oResult2.name,//获取用户名
														userHeadImg:oResult2.profile_image_url,//获取用户微博头像
													}
													alert(JSON.stringify(args));
										
													//向后台发送数据
												},
												{
													uid: uid
												},
												{
													method: 'GET'
												});
							   }
							}, {}, {
							   method : 'get',
							   cache_time : 30
							});
						});
					}
				});
			});
	</script>
	
	<!-- QQ -->
	<script type="text/javascript" src="https://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-callback="true" data-appid="101485965" data-redirecturi="https://www.hebaocun.com/h5/login.html" charset="utf-8"></script>
	<script type="text/javascript">
		//加上setTimeout是为了防止qq回调时,还未初始化完成就调用qq的API
		setTimeout(function() {
			//从页面收集OpenAPI必要的参数。get_user_info不需要输入参数,因此paras中没有参数
			var paras = {};
			//用js SDK调用OpenAPI
			QC.api("get_user_info", paras)
			//指定接口访问成功的接收函数,s为成功返回Response对象
			.success(function(s) {
				//成功回调,通过s.data获取OpenAPI的返回数据
				QC.Login.getMe(function(openId, accessToken) {
					qq_Login(s, openId, accessToken); //对应JS的qq_Login()的方法
				});
			})
			//指定接口访问失败的接收函数,f为失败返回Response对象
			.error(function(f) {
				//失败回调
				alert("使用QQ登录失败");
			});
		}, 200);
	
	
		/**
		  * QQ登录
		  * @param s
		  * @param openId
		  * @param accessToken
		  */
		function qq_Login(s, openId, accessToken) {
			//后台需要的参数
			var params = {
				'openId' : openId,
				'nickName' : s.data.nickname,
				'avatar' : s.data.figureurl_qq_1,
				'sex' : s.data.gender=="男"?1:0
			}
			alert(JSON.stringify(params));
			
			//向后台发送数据
		}
	</script>
</html>


同类文章