【微信开发】微信网页扫码登录的实现

官方文档： https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419316505&token=00d2aafc5bc1b9e3d6a3b4bc2f60662aa4ed0fc9&lang=zh_CN

准备资料：在开放平台申请网站应用，需要付费300rmb, 脸上笑嘻嘻，心里。。。

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; //返回页面

点击这个就会出现这个页面

2 第二种模式，内嵌js执行

　　引入js

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

　　html 部分

<div id="wx_login_container"></div>

　　js实例

<script>

$(document).ready(function()
{
    var obj = new WxLogin({
        self_redirect: true,
        id:"wx_login_container", 
        appid: "appid", 
        scope: "snsapi_login", 
        redirect_uri: "回调地址",
        state: "",
        style: "black",
        href: "", //https://某个域名下的css文件
     });
});
</script>

注意其中href里指向的css文件必须放在https协议下才能引用的到，大体上不需改变默认样式，浪费脑细胞，可以针对div 来改变二维码的大小和位置，里边是内嵌一个iframe

效果就是这样的，下边两个手机登陆和立即注册是我自己加上的，不用理会，

php 回调代码：

/**
     * todo: 微信扫码登陆回调
     * author: 依然范儿特西
     * date: 2019-04-27
     */
    public function wxlogin_notice(){

        $code = $_GET["code"];
        $appid = Config::get("config_wechat.open_account.default.app_id");
        $secret = Config::get("config_wechat.open_account.default.app_script");

        if (!empty($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);

            //执行登录,以下代码要根据自己的业务修改逻辑，
            $nickname = $infoArray['nickname'];
            $head_img = $infoArray['headimgurl'];
            $unionid = $infoArray['unionid'];
            $user_modle = model("UserModel");
            $login_result = $user_modle->wxlogin_qrcode($openid,$nickname,$head_img,$unionid);
            if($login_result){
                echo '<script language="javascript">window.top.location.href="/ucenter/user"</script>';
            }   
        } 
    }

建议使用第二种内嵌js ，用户体验比较好！ over

来源：oschina

链接：https://my.oschina.net/u/4345812/blog/3557147

标签

javascript

openid

qrcode

wechat