PHP實(shí)現(xiàn)微信掃碼登錄功能的兩種方式總結(jié)
微信掃碼登錄目前有兩種方式:
1:在微信作用域執(zhí)行 ,就是條一個(gè)新頁面
前端點(diǎn)擊一個(gè)按鈕,請(qǐng)求后端接口條微信作用域
后端php代碼如下:
$redirect_uri="http://你的微信開放平臺(tái)綁定域名下處理掃碼事件的方法"; $redirect_uri=urlencode($redirect_uri);//該回調(diào)需要url編碼 $appID="你的appid"; $scope="snsapi_login";//寫死,微信暫時(shí)只支持這個(gè)值 //準(zhǔn)備向微信發(fā)請(qǐng)求 $url = "https://open.weixin.qq.com/connect/qrconnect?appid=" . $appID."&redirect_uri=".$redirect_uri ."&response_type=code&scope=".$scope."&state=STATE#wechat_redirect"; //請(qǐng)求返回的結(jié)果(實(shí)際上是個(gè)html的字符串) $result = file_get_contents($url); //替換圖片的src才能顯示二維碼 $result = str_replace("/connect/qrcode/", "https://open.weixin.qq.com/connect/qrcode/", $result); return $result; //返回頁面
最終跳轉(zhuǎn)頁面如下:
2:內(nèi)嵌js,在當(dāng)前頁面顯示登錄二維碼
第一種操作實(shí)現(xiàn)起來比較簡(jiǎn)單,但是個(gè)人感覺用戶體驗(yàn)稍微差一點(diǎn)。
最好還是在當(dāng)前頁面就是顯示微信登錄的二維碼,直接掃描就好。
微信也為我們提供了這種方式。
(1):引入js
<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/jquery.min.js"></script> <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
(2):html部分
<div id="wx_login_container"></div>
(3):js示例
<script> $(document).ready(function() { var obj = new WxLogin({ self_redirect: true, id:"wx_login_container", appid: "appid", scope: "snsapi_login", redirect_uri: "回調(diào)地址",//這里的回調(diào)地址可以寫后端的接口,也可以寫前端的頁面地址,我這里寫的是前端的頁面地址 state: "", style: "black", href: "", //https://某個(gè)域名下的css文件 }); }); // 將方法掛載到window主鏈上 // 從iframe中獲取到回調(diào)函數(shù)中獲取的微信返回的code window.jumpTop = function(code){ console.log(code); var data = { code: code }; console.log(data); self.axios .post("/index.php/xxx/wxlogin_notice", data) .then(result => { if(result.data.code > 0) { Message.success(result.data.msg); if(result.data.type == 0) {// 跳學(xué)生首頁 self.$router.push("/manager/student/reportList"); } else if(result.data.type == 1 || result.data.type == 9) {// 跳選擇身份頁 self.$router.push("/manager/teacher/index"); } } }) .catch(err => {});//*/ }; </script>
注意其中href里指向的css文件必須放在https協(xié)議下才能引用的到,大體上不需改變默認(rèn)樣式,浪費(fèi)腦細(xì)胞,可以針對(duì)div 來改變二維碼的大小和位置,里邊是內(nèi)嵌一個(gè)iframe
整理的實(shí)現(xiàn)邏輯如下圖所示:
微信的二維碼嵌入在一個(gè)iframe中,微信掃碼成功,手機(jī)點(diǎn)擊確定后,回調(diào)地址接收到微信給我們的參數(shù)code,這里微信使用的是get傳參,因此我們只需要在回調(diào)地址的頁面中獲取當(dāng)前頁面的URL中的code參數(shù)傳給上一層(父級(jí)),上一層接收到code參數(shù)再請(qǐng)求后端接口執(zhí)行登錄邏輯即可。
回調(diào)地址:
https://www.xxx.xxx/lims/web/wechat/login.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" rel="external nofollow" > <link rel="external nofollow" rel="Shortcut Icon"> </head> <body style="color: rgb(55, 55, 55);"> <div style=""> <div class="main impowerBox"> <div class="loginPanel normalPanel"> <div>微信登錄</div> <div class="waiting panelContent"> <div> <img class="qrcode lightBorder" src="./img.jpg "> </div> <div> <div class="status status_succ js_status js_wx_after_scan" style="display: block;" id="wx_after_scan"> <i class="status_icon icon38_msg succ"></i> <div> <h4>掃描成功</h4> <p>請(qǐng)?jiān)谖⑿胖悬c(diǎn)擊確認(rèn)即可登錄</p> </div> </div> </div> </div> </div> </div> </div> <script src="https://www.mools.net/lims/web/common/common.js"></script> <script> if (parent) { // 將從url中解析出來的參數(shù)傳到iframe的父級(jí)(調(diào)用父級(jí)方法) parent.jumpTop(ml.get("code")); } </script> </body> </html>
PHP回調(diào)代碼:(上邊的兩種掃碼方式都可用)
/** * @name: 微信掃碼登陸回調(diào)(不跳頁二維碼) * @author: camellia * @date: 2020-12-25 11:47:17 */ public function wxlogin_notice(Request $request) { $code = $request->input("code"); if (!empty($code)) { $jsonResult = ''; if($jsonResult == '') { //通過code獲得 access_token + openid $url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=" . $this->appid . "&secret=" . $this->appsecret . "&code=" . $code . "&grant_type=authorization_code"; $jsonResult = file_get_contents($url); } // 對(duì)象轉(zhuǎn)數(shù)組 $resultArray = json_decode($jsonResult, true); $access_token = $resultArray["access_token"]; $openid = $resultArray["openid"]; //通過access_token + openid 獲得用戶所有信息,結(jié)果全部存儲(chǔ)在$infoArray里,后面再寫自己的代碼邏輯 $infoUrl = "https://api.weixin.qq.com/sns/userinfo?access_token=" . $access_token . "&openid=" . $openid; $infoResult = file_get_contents($infoUrl); $infoArray = json_decode($infoResult, true); // 沒有unionid ,跳官網(wǎng) if (!isset($infoArray['unionid'])) { // echo "<script >alert('登錄失敗,用戶信息錯(cuò)誤!')</script>";die; $result['code'] = -1; $result['msg'] = '登錄失敗,用戶信息錯(cuò)誤!'; return $result; } // 獲取unionid $unionid = $infoArray['unionid']; $userinfo = DB::table('user')->where('unionid', $unionid)->first(); $userinfObj = json_decode(json_encode($userinfo), true); if ($userinfo) { // 存session $request->session()->put('userinfo', $userinfObj); // $session = $this->getSession($request); // var_dump($session);die; // 教師跳頁 if (($userinfo->type == 9) || ($userinfo->type == 1 && $userinfo->islogin == 9)) { // echo "<script> top.location.; </script>";die; $result['code'] = 1; $result['msg'] = '登錄成功'; $result['type'] = $userinfo->type; return $result; } else if ($userinfo->type == 1 && $userinfo->islogin >= 3) { // 學(xué)生跳頁 // echo "<script> top.location.; </script>";die; $result['code'] = 2; $result['msg'] = '登錄成功'; $result['type'] = $userinfo->type; return $result; } else if($userinfo->type == 0) { // echo "<script> top.location.; </script>";die; $result['code'] = 3; $result['msg'] = '登錄成功'; $result['type'] = $userinfo->type; return $result; } else { // 無效用戶跳至官網(wǎng) // echo "<script> top.location.; </script>";die; $result['code'] =-2; $result['msg'] = '用戶身份有誤!'; return $result; } } else { // echo "<script >alert('登錄失敗,用戶信息錯(cuò)誤~')</script>";die; $result['code'] = -3; $result['msg'] = '用戶身份有誤!'; return $result; } } else { // echo "<script >alert('登錄失敗,請(qǐng)重試!')</script>";die; $result['code'] = -4; $result['msg'] = '登錄失敗,請(qǐng)重試!'; return $result; } }
到此這篇關(guān)于PHP實(shí)現(xiàn)微信掃碼登錄功能的兩種方式總結(jié)的文章就介紹到這了,更多相關(guān)PHP微信掃碼登錄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
PHP動(dòng)態(tài)分頁函數(shù),PHP開發(fā)分頁必備啦
PHP動(dòng)態(tài)分頁函數(shù),PHP開發(fā)分頁必備啦。其實(shí)吧,這個(gè)是必用的,不說了,PHP動(dòng)態(tài)分頁函數(shù)還是不錯(cuò),比較簡(jiǎn)單吧2011-11-11PHP精確到毫秒秒殺倒計(jì)時(shí)實(shí)例詳解
這篇文章主要介紹了PHP精確到毫秒秒殺倒計(jì)時(shí)實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03php返回相對(duì)時(shí)間(如:20分鐘前,3天前)的方法
這篇文章主要介紹了php返回相對(duì)時(shí)間的方法,可實(shí)現(xiàn)返回如:20分鐘前、3天前等格式時(shí)間,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04php使用APC實(shí)現(xiàn)實(shí)時(shí)上傳進(jìn)度條功能
這篇文章主要介紹了php使用APC實(shí)現(xiàn)實(shí)時(shí)上傳進(jìn)度條功能,php本身不具備可以帶有實(shí)時(shí)上傳進(jìn)度條功能,但是php提供了一個(gè)apc,它可以與php配置實(shí)現(xiàn)上傳進(jìn)度條,感興趣的小伙伴們可以參考一下2015-10-10PHP中如何調(diào)用webservice的實(shí)例參考
本篇文章介紹了,PHP中如何調(diào)用webservice的實(shí)例參考。需要的朋友參考下2013-04-04PHP基于PDO實(shí)現(xiàn)的SQLite操作類【包含增刪改查及事務(wù)等操作】
這篇文章主要介紹了PHP基于PDO實(shí)現(xiàn)的SQLite操作類,包含增刪改查及事務(wù)等操作實(shí)現(xiàn)技巧與使用方法,需要的朋友可以參考下2017-06-06