網站實現微信登錄之嵌入二維碼——基於yii2開發的描述

之前寫了一篇yii2獲取登錄前的頁面url地址的文章，然后發現自己對於網站實現微信掃碼登錄功能的實現不是很熟悉，所以，我會寫2-3篇的文章來描述下一個站點如何實現微信掃碼登錄的功能，來復習下微信掃碼登錄網站的基本開發過程和需要注意的地方。這是第一篇，主要是描述如何在自己的登錄頁面內嵌入登錄二維碼。按照微信開放平台開發者文檔網站應用微信登錄開發指南中的一步一步來即可。

1，要掃碼登錄首先要有碼

先看看文檔中給提供的嵌入二維碼的示例代碼：

需要先引入微信提供的js文件

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

然后提供一個存放二維碼的容器，比如下面的div，下面實例化js對象是要用到這個容器。

<div id="wx_login"></div>

然后實例化下面的js對象：

        <script type="text/javascript">
            var obj = new WxLogin({
                id:"wx_login",
                appid: "appid",
                scope: "snsapi_login",
                redirect_uri: "http%3A%2F%2Fwww.yourhost.com%2Fcallback",
                state: "state",
                style: "",
                href: "https://www.yourhost.com/css/qr-style.css"
            });
        </script>

2，解釋下實例化對象時傳遞的參數

appid是微信開放平台下你申請的網站應用的唯一的AppID；

scope是應用授權作用域，網頁應用目前僅填寫snsapi_login即可；

redirect_uri是重定向地址，需要進行UrlEncode，上面的例子中可以看到url地址被編碼了。

state用於保持請求和回調的狀態，授權請求后原樣帶回給第三方。該參數可用於防止csrf攻擊（跨站請求偽造攻擊），建議第三方帶上該參數，可設置為簡單的隨機數加session進行校驗，比如：

// 生成隨機串，防CSRF攻擊
$state = md5(uniqid(rand(), true));
$session = Yii::$app->session;
$session->set('wx_state', $state);

然后上面實例化js對象時，state的值就可以這么給：

state: <?= $state ?>

然后在后台就可以從session中取出wx_state和微信授權后帶回的state做比較，從而防止跨站偽造url攻擊：

    public function actionCallback($code, $state)
    {
            // 獲取並校驗前台存儲的隨機串
            $session = Yii::$app->session;
            if ($state != $session->get('wx_state')) {
                exit();
            }
            $session->remove('wx_state');
     // ......

style提供二維碼"black"、"white"可選，二維碼上下的文字描述的顏色，默認為黑色文字描述。

href自定義樣式css文件的鏈接，如果你覺得微信默認生成的二維碼大小（或其他樣式）不合適，你可以自己寫一個css文件，然后把這個文件的鏈接放到這里。這里需要注意下，這里的鏈接最好以https開頭，否則會遇到blocked:mixed-content錯誤，而導致樣式不起作用。這是因為，微信生成了如下的iframe:

<iframe src="https://open.weixin.qq.com/connect/qrconnect?appid=appid&amp;scope=snsapi_login&amp;redirect_uri=http%3A%2F%2Fwww.yourhost.com%2Fcallback&amp;state=5440b73839647d4790af5fb856870326&amp;login_type=jssdk&amp;href=http://www.yourhost.com/css/qr-style.css" frameborder="0" scrolling="no" width="300px" height="400px"></iframe>

它生成的這個頁面地址內容是https的。

上面的參數：state、style、href不是必需的。 

以上過程最終會生成這么個東西。。。。。。。。

哈哈，去各大網站（比如京東商城），點擊下微信登錄的鏈接就可以看到效果了。