技術文章 » php怎麼實現微信掃碼登入

php怎麼實現微信掃碼登入

2021-09-23 16:00:13

php實現微信掃碼登入的方法：1、通過js範例化一個物件；2、在html中定義一個div幷包含二維條碼；3、在$(document).ready()內進行範例化即可。

本文操作環境：windows10系統、php 7、thinkpad t480電腦。

微信已經成為我們日常生活中必不可少的一部分，為了讓更多的使用者更加方便地使用微信及相關產品，微信掃一掃功能越來越普遍。那麼如果我們要自己實現這個功能該如何做呢？

再給出具體的實現程式碼之前，我們先來分析下微信掃碼登入的流程。

首先我們必須要把二維條碼放在頁面上顯示出來，二維條碼是有失效時間以及失效狀態的，一旦你掃過一次二維條碼或者在某段時間內沒有掃描頁面上的二維條碼，那麼這個二維條碼也就失效了。微信官網給我們提供了兩種方式來顯示二維條碼，一種是後臺發請求返回一個新的頁面，另一種是前端js範例化二維條碼內嵌在自己的頁面上。很顯然第一種方式比較簡單方便，但是在實際的專案中兩種方式都會使用到，既然如此我們就把這兩種方式都說明一下。

1、後臺發請求獲取微信返回的掃碼頁面

$redirect_uri="http://你的微信開放平臺繫結域名下處理掃碼事件的方法";
$redirect_uri=urlencode($redirect_uri);//該回撥需要url編碼
$appID="你的appid";
$scope="snsapi_login";//寫死，微信暫時只支援這個值
//準備向微信發請求
$url = "https://open.weixin.qq.com/connect/qrconnect?appid=" . $appID."&redirect_uri=".$redirect_uri."&response_type=code&scope=".$scope."&state=STATE#wechat_redirect";
//請求返回的結果(實際上是個html的字串)
$result = file_get_contents($url);
//替換圖片的src才能顯示二維條碼
$result = str_replace("/connect/qrcode/", "https://open.weixin.qq.com/connect/qrcode/", $result);
return $result; //返回頁面

這樣子就會返回一個這樣的頁面，掃描後呼叫$redirect_uri

da6c1c1e556dde4df850c8d04c1f556.png

2、內嵌JS顯示：

這裡就是通過js端範例化一個物件即可，首先在<head>標籤內新增如下js檔案，

<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>

其次在html中定義一個div包含二維條碼，

<div id="login_container"></div>

最後在$(document).ready()內進行範例化：　

$(document).ready(function()
{
    var obj = new WxLogin
    ({
        id:"login_container",//div的id
        appid: "你的appid",
        scope: "snsapi_login",//寫死
        redirect_uri:encodeURI("你的處理掃碼事件的方法") ,
        state: "",
        style: "black",//二維條碼黑白風格        
        href: "https://某個域名下的css檔案"
    });
});

注意其中href裡指向的css檔案必須放在https協定下才能參照的到，不然頁面上就是預設樣式（顯示上是一個比較大的二維條碼，你無法調節二維條碼的大小，位置，太痛苦了）。最後部分頁面大概長成這樣，這裡的二維條碼大概只有140px：

506b24882f9692bf80fb87e653e9421.png

好了，二維條碼出現在頁面上了，接下來我們就要大概的講講掃碼的邏輯了,整個流程大概分為5步：

5600c4fb5c927be8d3ff7166b022591.png

走完這五步你就拿到掃碼使用者的所有資訊了，之後再寫上自己需要的的程式碼邏輯即可(如重定向或者登陸)，在程式碼裡的表現形式如下：

//回撥
public function codeinfo()
{
        $code = $_GET["code"];
        $appid = "你的appid";
        $secret = "你的secret";
        if (!empty($code))  //有code
        {
            //通過code獲得 access_token + openid
           $url="https://api.weixin.qq.com/sns/oauth2/access_token?appid=" . $appid
            . "&secret=" . $secret . "&code=" . $code . "&grant_type=authorization_code";
            $jsonResult = file_get_contents($url);
            $resultArray = json_decode($jsonResult, true);
            $access_token = $resultArray["access_token"];
            $openid = $resultArray["openid"];

            //通過access_token + openid 獲得使用者所有資訊,結果全部儲存在$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);
　　　　 } }

相信大家在寫完上面的程式碼之後已經對掃一掃登入的流程很清楚了，其實本質上就是多個微信介面的配合呼叫而已。

推薦學習：

以上就是php怎麼實現微信掃碼登入的詳細內容，更多請關注TW511.COM其它相關文章！