網站實現微信登錄之嵌入二維碼——基於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進行校驗，比如：

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

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

state: <?= $state ?>

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

1     public function actionCallback($code, $state)
2     {
3             // 獲取並校驗前臺存儲的隨機串
4             $session = Yii::$app->session;
5             if ($state != $session->get('wx_state')) {
6                 exit();
7             }
8             $session->remove('wx_state');
9      // ......

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不是必需的。 

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

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