天天看点

thinkphp5使用easywechat 实现微信扫码登录解析

建议先看这个https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419318590&token=&lang=

这个就是easywechat提到的开放平台网页登录 授权 URL https://www.easywechat.com/docs/master/official-account/oauth

和公众号开发不通用,还需要重新注册一个微信开放平台的账户!但是我不想搞这么麻烦,能不能就单纯的通过微信公众号开发实现这个功能!

我就是因为这个问题困扰了几个小时,一直搜索怎么实现扫码登录,零零散散的资料我给凑凑。

先说大概的业务流程

生成一个带随机数的二维码,扫码接收这个随机数,把这个随机数插入用户信息中,前端页面监控查询这个随机数有没有被插进去,插在谁那里,查到被插进去了,说明已经扫码成功!

前端界面

thinkphp5使用easywechat 实现微信扫码登录解析

打开页面

$timestamp = time().mt_rand(100000,999999);
        $qrcodeUrl = action("index/index/qrcodeUrl",$timestamp);//传递一个随机数过去
        $this->assign('timestamp', $timestamp);
        $this->assign('qrcodeUrl', $qrcodeUrl);
        //
        return $this->fetch('login');
           

二维码来源于

$config = config('wechat_config');
        $app = Factory::officialAccount($config);
        $result = $app->qrcode->temporary($timestamp, 600);
        $qrcodeUrl = $app->qrcode->url($result['ticket']);
        return $qrcodeUrl;
           

前端监控js

<script>
	// 检查是否完成
	function loadmsg() {
	$.ajax({
	type: "POST",
	dataType: "json",
	url: "{:url('checkLogin')}",
	timeout: 10000, //ajax请求超时时间10s
	data: {rand: "{$timestamp}"}, //post数据
	success: function (data, textStatus) {
	//从服务器得到数据,显示数据并继续查询
		data = eval('('+data+')');

	if (data.code == 0) {

	layer.msg('扫码成功,正在跳转中...', {icon: 16,shade: 5,time: 15000});
	var url = "{:url('index/index')}";
	setTimeout(window.location.href=url, 1000);



	}else{
	setTimeout("loadmsg()", 3000);
	}
	},
	//Ajax请求超时,继续查询
	error: function (XMLHttpRequest, textStatus, errorThrown) {
	if (textStatus == "timeout") {
	setTimeout("loadmsg()", 1000);
	} else { //异常
	setTimeout("loadmsg()", 3000);
	}
	}
	});
	}
	window.onload = loadmsg();</script>
           

监控页面

$rand = input('post.rand');

       $res= db('xz_jiexi')->where('rand', $rand)->find();

       if($res){
           $data['code']='0';
           $data['msg']='扫码成功!';
           cookie('real_name', $res['openId']);
           cookie('nickname', $res['getNickname']);
           cookie('headimgurl', $res['getAvatar']);
       }else{
           $data['code']='1';
           $data['msg']='尚未扫码!';

       }


        return json_encode($data);
           

后端接收,这一部分看这里https://www.easywechat.com/docs/master/official-account/server

switch ($message['MsgType']) {
        case 'event':
            if($message['Event']=='SCAN'){
//扫码事件

                $user = $app->user->get($openId);

                $sqlArr['rand']=$message['EventKey'];//随机数
                $sqlArr['getNickname']=$user['nickname'];// 对应微信的 nickname
                $sqlArr['getAvatar']=$user['headimgurl'];// 头像网址
			    $user_info = Jiexi::where('openId',$openId)->find();
			    if(empty($user_info)){
                    $sqlArr['create_time']=date('Y-m-d H:i:s',time());
                    $sqlArr['openId']=$openId;

                    Jiexi::insert($sqlArr);
			        return '你好呀,新朋友!';
                }

                $user_info = Jiexi::where('openId',$openId)->update($sqlArr);
                return '欢迎回来,老伙计!';

			}

}
           

效果图

thinkphp5使用easywechat 实现微信扫码登录解析

你好,我是勤勤学长。如果文章对你有帮助,请点个赞。

QQ微信同号 318692996