微信第三方二維碼掃描登錄

微信二維碼掃描登錄

    最近做了微信二維碼掃描登錄的工作。實則非常簡單。
    其實就是各種接口互相調用，收取參數跳頁的過程。不過不熟練
的情況下，會比較麻煩，無從下手。從查閱開發文檔到工作的完成，現
在總結以下步驟。

原理步驟

1,展示微信用戶需要掃描的二維碼
2,微信用戶掃碼，以及確認登錄(分兩種情況，一種已經註冊，另一種沒有註冊)
3,通過確認登錄的過程，驗證密匙，接受數據，處理數據(可分辨出是否註冊)
    1>用戶已註冊:
        查詢用戶詳細信息，然後加入session直接登錄
    2>用戶未註冊:
        將接收到的用戶詳細信息插入數據表,存如session,直接登
        錄 ( 注意:意義不大，通常是跳到用戶微信綁定頁面，獲取
        用戶電話號碼等詳細信息 ) 

        附帶激活頁面:（綁定手機等）
            如果跳到了激活頁面，輸入用戶信息，提交註冊即可。

準備工作

在微信開放平臺(open.weixin.qq.com)申請appid和appsecret.

代碼實現

1，展示二維碼

    有兩種方式可供選擇:
    1，點擊微信登錄，跳頁展示二維碼。
        配合自己申請的參數跳如下鏈接即可：
            https://open.weixin.qq.com/connect/qrconnect?
            appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&
            scope=SCOPE&state=STATE#wechat_redirect

        參數              是否必須        說明
        -------------------------------------------------------------------------------
        appid               是           應用唯一標識(申請)
        -------------------------------------------------------------------------------
        redirect_uri        是           請使用urlEncode對鏈接進行處理(用戶確認後需要跳的頁面url
                                        需要使用url_encode編碼)
        -------------------------------------------------------------------------------
        response_type       是           填code即可
        -------------------------------------------------------------------------------
        scope               是           寫snsapi_login即可
        -------------------------------------------------------------------------------
        state               否           自定義密匙，防攻擊。用
                                        該參數可用於防止csrf攻擊（跨站請求僞造攻擊）
                                        ，建議第三方帶上該參數，可設置爲
                                        簡單的隨機數加session進行校驗
        -------------------------------------------------------------------------------

    2，把需要掃描的二維碼直接展示在登錄頁 
        html頁面中操作:
            1,引入html頁面:
            <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
            2,html下面加入這段js對象    
            <script type="text/javascript">
                var obj = new WxLogin({
                          id:"login_container", 
                          appid: "", 
                          scope: "", 
                          redirect_uri: "",
                          state: "",
                          style: "",//樣式
                          href: ""  //樣式    樣式查閱開發文檔即可
                        });
            </script>
            3，需要展示二維碼的地方加入如下標籤(注意id和js對象的id要一致)
            <div class="login_fast" id="login_container">

2，掃描二維碼及處理

        跳到redirect_uri網址,帶上code和state參數。如果用戶不允許登錄，只帶state參數。
        這裏只討論用戶允許登錄的情況下。
        ---------------------------------------------------------------------
        1，根據code，以及申請的appid，secret來獲取access_token
        例如:
            https://api.weixin.qq.com/sns/oauth2/access_token?
            appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
        刷新access_token
        例如：
            https://api.weixin.qq.com/sns/oauth2/refresh_token?
            appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN
        注意：
        access_token 爲用戶授權第三方應用發起接口調用的憑證（相當於用戶登錄態），存儲
        在客戶端
        ---------------------------------------------------------------------
        2，獲取用戶個人信息
        http請求方式: GET
        https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID

3，代碼示例

<?php
    session_start();
    //檢查state參數，如果不同，禁止頁面向下執行
    if($local_state != $_GET['state']){ 
        return false;
        exit('state有誤');
    }
    //獲取access_token
    $appid = "appid";
    $secret = "secret";
    $code = $_GET['code'];
    $url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=".$appid."&secret=".$secret."&code=".$code."&grant_type=authorization_code";
    $ch = curl_init();
    $timeout = 0;
    curl_setopt ($ch, CURLOPT_URL, $url);
    curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($ch,  CURLOPT_USERAGENT , "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1)");
    curl_setopt ($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
    $res = curl_exec($ch);
    curl_close($ch);
    //get_object_vars()獲取$object對象中的屬性，組成一個數組
    $array=get_object_vars(json_decode($res));
    //獲取用戶信息利用open_id和access_token
    $access_token=$array['access_token'];
    //授權用戶唯一標識
    $openid=$array['openid'];
    $url="https://api.weixin.qq.com/sns/userinfo?access_token=".$access_token."&openid=".$openid;
    $ch = curl_init();
    $timeout = 0;
    curl_setopt ($ch, CURLOPT_URL, $url);
    curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
        curl_setopt($ch,  CURLOPT_USERAGENT , "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1)");
    curl_setopt ($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
    $res = curl_exec($ch);
    curl_close($ch);
    $callback_data= json_decode($res);
    $array=get_object_vars($callback_data);

    /*獲取到用戶信息就可以進行查詢用戶的註冊信息
    以及獲得如何跳頁，如何處理等等
    */