网站实现微信登录之嵌入二维码——基于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不是必需的。 

以上过程最终会生成这么个东西。。。。。。。。

哈哈，去各大网站（比如京东商城），点击下微信登录的链接就可以看到效果了。