微信 二維碼 登陸


為了讓用戶登錄網站的門檻更低,微信掃一掃登錄變得越來越廣泛,所以最近加緊趕制的項目中有用到這個功能,此篇文字的出發點基於微信開放平台已經配置好域名(80端口)並且認證成功獲得app_id和secret並有權限調用微信的接口。好了,就先談一談微信掃碼登錄的整個流程吧。

  第一步,我們必須得把二維碼放在頁面上顯示。首先普及一下二維碼是有失效時間以及失效狀態的,一旦你掃過一次二維碼或者在某段時間內沒有掃描頁面上的二維碼,該二維碼就失效了。OK,微信官網給我們提供兩種方式來顯示二維碼:1.后台發請求返回一個新的頁面;2.前端js實例化二維碼內嵌在自己的頁面上,顯然第一種比較適合懶的人(因為微信直接返回一個打包好的頁面啊有木有,都不用各種css調樣式了),不過在項目中兩種都在用,所以就都說明一下。

  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,

 

 

 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:

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

 

 走完這五步你就拿到掃碼用戶的所有信息了,之后再寫上自己需要的的代碼邏輯即可(如重定向或者登陸),在代碼里的表現形式如下:

//回調
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);
     } }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM