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

和公衆号開發不通用，還需要重新注冊一個微信開放平台的賬戶！但是我不想搞這麼麻煩，能不能就單純的通過微信公衆号開發實作這個功能！

我就是因為這個問題困擾了幾個小時，一直搜尋怎麼實作掃碼登入，零零散散的資料我給湊湊。

先說大概的業務流程

生成一個帶随機數的二維碼，掃碼接收這個随機數，把這個随機數插入使用者資訊中，前端頁面監控查詢這個随機數有沒有被插進去，插在誰那裡，查到被插進去了，說明已經掃碼成功！

前端界面

打開頁面

$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 '歡迎回來，老夥計!';

			}

}
           

效果圖

你好，我是勤勤學長。如果文章對你有幫助，請點個贊。

QQ微信同号 318692996