黄聪：微信网页扫码登陆的实现

时间 2019-11-05

标签微信网页登陆实现栏目 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);

　　　　 } 
}

　　其实写完代码以后就会知道整个流程大概是怎么样的，本质上就是多个微信接口的配合调用，OK，记录Over!