微信網頁掃碼登陸的實現

時間 2019-11-25

標籤微信網頁登陸實現欄目 HTML 简体版

原文原文鏈接

爲了讓用戶登陸網站的門檻更低，微信掃一掃登陸變得愈來愈普遍，因此最近加緊趕製的項目中有用到這個功能，此篇文字的出發點基於微信開放平臺已經配置好域名（80端口）而且認證成功得到app_id和secret並有權限調用微信的接口。好了，就先談一談微信掃碼登陸的整個流程吧。css

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

　　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，json

　　2.內嵌JS顯示：api

　　這裏就是經過js端實例化一個對象便可，首先在<head>標籤內添加以下js文件，微信

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

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

<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步：url

　　走完這五步你就拿到掃碼用戶的全部信息了，以後再寫上本身須要的的代碼邏輯便可(如重定向或者登錄)，在代碼裏的表現形式以下：

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