web网站实现qq授权登陆,微信扫码关注登陆

qq授权登陆

在QQ互联注册好你的网站:https://connect.qq.com/

拿到:APP ID 与 APP Key 与  设定好的网站回调域

使用的是 JS_SDK 登陆,这个比较简单,不需要像php需要引入sdk类文件

手册:https://wiki.connect.qq.com/js_sdk%e4%bd%bf%e7%94%a8%e8%af%b4%e6%98%8e

引入js

<script type="text/javascript"  charset="utf-8"  src="http://connect.qq.com/qc_jssdk.js" data-appid="你的appId" data-redirecturi="网站回调域"></script>


<div class="icon iconfont " id="qqLoginBtn" title="QQ登陆"><span class="qq iconfont icon-qq-copy"></span></div>

//qq登陆
if(typeof QC != 'undefined'){
	QC.Login({
	   btnId:"qqLoginBtn"	//插入按钮的节点id
	},function(reqData, opts){
		userinfo = {};
		QC.Login.getMe(function(openId, accessToken){
			//提取信息
			userinfo.openid = openId;
			userinfo.username = reqData.nickname;
			userinfo.headimg = reqData.figureurl_2;
			userinfo.sex = reqData.gender=='男'?1:2;
			userinfo.province = reqData.province;
			userinfo.city = reqData.city;
			//发送
			if(QC.Login.check()){
				$.ajax({
					url:'/index/member/qqlogin',
					type: 'POST',
					data: userinfo,
					success : function(data){
						if(data.sta == 1){
							layer.msg(data.msg,{time:2000},function() {
								var backUrl = getUrlParam('backUrl');
								if(backUrl){
									window.location.replace(backUrl); //返回指定地址
								}else{
									window.location.replace('/index/member.html');//返回会员中心
								}
							});
							$('#loginForm .submit').removeClass('dis').text('登陆成功');
						}else{
							layer.alert(data.msg,{icon:0});
						}
					}
				});
				//退出登陆
				QC.Login.signOut();
			}
		})
	});
	
	//QQ登陆弹窗居中优化
	setTimeout(function(){
		var js = $('#qqLoginBtn a').attr('onclick');
		var l = ($(window).width()-710)/2;
		var t = ($(window).height()-405)/2;
		js = js.replace('height=525,width=585,', 'height=405,width=710,top='+t+', left='+l+',');
		$('#qqLoginBtn a').attr('onclick',js);
	},500);
	
}

 

2.网站回调域 里输出

echo '登陆成功,正在跳转...';
echo '<script type="text/javascript" src="//connect.qq.com/qc_jssdk.js" charset="utf-8" data-callback="true"></script>';

3.后台处理登录逻辑

if(request()->isPost()){
	$post = input('post.','','strip_tags');
	$user =  Db::name('member')->where(['openid'=>$post['openid']])->find();
	
	if($user){
		$this->buildLogin($user);
		return ['sta'=>1,'msg'=>'登陆成功!'];
	}else{
		$ip = request()->ip();
		$addtime = $lasttime = time();
		$user =['ip'=>$ip,'username'=>$post['username'],'headimg'=>$post['headimg'],'openid'=>$post['openid'],'sex'=>$post['sex'],'userType'=>'qq','addtime'=>$addtime,'lasttime'=>$lasttime];
		$user['id'] = Db::name('member')->insertGetId($user);
		$this->buildLogin($user);
		return ['sta'=>1,'msg'=>'注册并登陆成功!'];
	}
}

微信扫码关注登陆

1 服务器配置

设置与开发-》基本配置

image.png

2 获取access_token

//$this->appid   微信appid
//$this->AppSecret  微信AppSecret  

public function get_access_token(){
	$url = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='.$this->appid.'&secret='.$this->AppSecret;
	$res = file_get_contents($url);
	$res=json_decode($res,true);
	return $res['access_token'];
}

3 获取ticket  用于换取微信二维码

官方文档:https://developers.weixin.qq.com/doc/offiaccount/Account_Management/Generating_a_Parametric_QR_Code.html

$option =[
    'expire_seconds'=>604800,
    'action_name'=>'QR_STR_SCENE',
    'action_info'=>[
        'scene'=>['scene_str'=>uniqid()]
    ],
];

//获取微信ticket生成二维码
$res = $this->postUrl('https://api.weixin.qq.com/cgi-bin/qrcode/create?access_token='.$access_token,$option);
$imgsrc = 'https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket='.UrlEncode($res['ticket']);
echo '<img src="'.$imgsrc.'">';
debug($res);



//curl请求
public  function postUrl($url,$data){
    $data = json_encode($data);

    $ch = curl_init(); //初始化CURL句柄 
    curl_setopt($ch, CURLOPT_URL, $url); //设置请求的URL
    curl_setopt ($ch, CURLOPT_HTTPHEADER, array('Content-type:application/json'));
    curl_setopt($ch, CURLOPT_RETURNTRANSFER,1); //设为TRUE把curl_exec()结果转化为字串,而不是直接输出 
    curl_setopt($ch, CURLOPT_CUSTOMREQUEST,"POST"); //设置请求方式
    curl_setopt($ch, CURLOPT_POSTFIELDS, $data);//设置提交的字符串
    $output = curl_exec($ch);
    curl_close($ch);
    return json_decode($output,true);
}

image.png

4 获取用户扫码,微信推送的数据,写入日记查

$xmlData = file_get_contents('php://input');
libxml_disable_entity_loader(true); // 解析该xml字符串,利用simpleXML
$xmlToaArr = simplexml_load_string($xmlData, 'SimpleXMLElement', LIBXML_NOCDATA); //禁止xml实体解析,防止xml注入
$data = json_decode(json_encode($xmlToaArr),true);
Log::record($data,'wxpush');

image.png

5 微信推送的数据,处理网站的罗辑

微信事件开发文档:https://developers.weixin.qq.com/doc/offiaccount/Message_Management/Receiving_event_pushes.html

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,请使用WINRAR解压,如遇到无法解压的请联系管理员!
8. 精力有限,不少源码未能详细测试(解密),不能分辨部分源码是病毒还是误报,所以没有进行任何修改,大家使用前请进行甄别
TP源码网 » web网站实现qq授权登陆,微信扫码关注登陆

提供最优质的资源集合

立即查看 了解详情