PHP實(shí)現(xiàn)微信掃碼登錄功能的兩種方式總結(jié)

更新時(shí)間：2022年08月23日 10:15:12 作者：camellia

這篇文章主要為大家介紹了利用PHP實(shí)現(xiàn)微信掃碼登錄功能的兩種方式，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)有一定借鑒價(jià)值，需要的可以參考一下

微信掃碼登錄目前有兩種方式：

1：在微信作用域執(zhí)行，就是條一個(gè)新頁面

前端點(diǎn)擊一個(gè)按鈕，請求后端接口條微信作用域

后端php代碼如下：

$redirect_uri="http://你的微信開放平臺綁定域名下處理掃碼事件的方法";
$redirect_uri=urlencode($redirect_uri);//該回調(diào)需要url編碼
$appID="你的appid";
$scope="snsapi_login";//寫死，微信暫時(shí)只支持這個(gè)值
//準(zhǔn)備向微信發(fā)請求
$url = "https://open.weixin.qq.com/connect/qrconnect?appid=" . $appID."&redirect_uri=".$redirect_uri
."&response_type=code&scope=".$scope."&state=STATE#wechat_redirect";
//請求返回的結(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)起來比較簡單，但是個(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ì)胞，可以針對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ù)傳給上一層（父級），上一層接收到code參數(shù)再請求后端接口執(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>請?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的父級（調(diào)用父級方法）
            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);
            }
            // 對象轉(zhuǎn)數(shù)組
            $resultArray = json_decode($jsonResult, true);
            $access_token = $resultArray["access_token"];
            $openid = $resultArray["openid"];
            //通過access_token + openid 獲得用戶所有信息,結(jié)果全部存儲在$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('登錄失敗，用戶信息錯誤！')</script>";die;
                $result['code'] = -1;
                $result['msg'] = '登錄失敗，用戶信息錯誤！';
                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('登錄失敗，用戶信息錯誤~')</script>";die;
                $result['code'] = -3;
                $result['msg'] = '用戶身份有誤！';
                return $result;
            }
        } 
        else 
        {
            // echo "<script >alert('登錄失敗，請重試！')</script>";die;
            $result['code'] = -4;
            $result['msg'] = '登錄失敗，請重試！';
            return $result;
        }
    }

到此這篇關(guān)于PHP實(shí)現(xiàn)微信掃碼登錄功能的兩種方式總結(jié)的文章就介紹到這了,更多相關(guān)PHP微信掃碼登錄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: