微信网页扫码登录实现代码

微信网页扫码登录也不是很难,毕竟微信开发按照官方文档的规则去做就行了,实现“微信网页扫码登录”有两种方法,具体请向下看:

 

官方文档:

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;

 

一、第一种模式,在微信作用域执行

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

 

点击这个就会出现这个页面:微信网页扫码登录

 

二、第二种模式,内嵌js执行

1、引入js

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

 

2、html 部分

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

 

3、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。

 

大体效果就是这样的,下边两个手机登陆和立即注册是我自己加上的,不用理会。微信网页扫码登录

 

4、php回调代码:

/**
     * todo: 微信扫码登陆回调
     * author: 依然范儿特西
     */
    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  ,用户体验比较好。

    A+
发布日期:2019年06月05日 14:33:29  所属分类:微信开发
最后更新时间:2019-06-05 14:35:15
评分: (1 票;平均数5.00 ;最高评分 5 ;用户总数1;总得分 5;百分比100.00)
头像
刷流量、刷人气、刷点击、刷收藏、刷APP关键词服务
刷流量、刷人气、刷点击、刷收藏、刷APP关键词服务
  • ¥ 1.0元
  • 市场价:9.9元
wordpress站群服务 泛解析二级域名 二级目录站群
wordpress站群服务 泛解析二级域名 二级目录站群
  • ¥ 1999.9元
  • 市场价:4800元
SEO顾问服务 中小型网站 单站/最低99.9元 全方位优化
SEO顾问服务 中小型网站 单站/最低99.9元 全方位优化
  • ¥ 99.9元
  • 市场价:5000元
wp discux 帝国 dedecms phpcms等快速建站
wp discux 帝国 dedecms phpcms等快速建站
  • ¥ 99.9元
  • 市场价:499.9元

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: