微信网页扫码登录的实现

链接：https://www.cnblogs.com/jiangjunli/p/7436110.html
注意事件：用户按确定后，如何获取用户信息到页面上；（以laravel为例）
步骤1：在后获取用户uid后用Cookie保存起来，并且带uid返回上一页面,如：

 public function weixindenglu(){

      $redirect_uri="http://www.5201314xf.com/index/codeinfo";
      $redirect_uri=urlencode($redirect_uri);//该回调需要url编码
      $appID="wx9f42591d9b70388f";
      $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 response()->json($result); //返回页面
    }

    public function codeinfo(){

        $code = $_GET["code"];

        $appid = "wx9f42591d9b70388f";
        $secret = "82e68a2c42cd2eb80950365304644c09";
        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);

            $user = DB::table('third_users')->where('wxUnionId',$infoArray['unionid'])->first();
            if($user){
             $userid= $user['userId'];
             
            }
            else{

              $data['userName']=$infoArray['nickname'];
              $data['userPhoto']=$infoArray['headimgurl'];
              $data['createTime']=date('Y-m-d H:i:s',time());
              if($infoArray['sex']==1){
                $data['userSex']=1;
              }
              else{
                $data['userSex']=0;
              }
              $insert_user= DB::table('users')->insert($data);

              $user_id= DB::table('users')->where('userName',$infoArray['nickname'])->first();
              $where['userId']=$user_id['userId'];
              $where['wxUnionId']=$infoArray['unionid'];
              $where['createTime']=date('Y-m-d H:i:s',time());
              $insert_third_user= DB::table('third_users')->insert($where);
              $userid=$where['userId'];
            }

            
            Cookie::queue('uid', $userid, 60);//保存uid

            
            return back()->with('userid',$userid);//带数据uid返回
        }


    }

步骤2：前端获取返回的uid，把它放在input里面；如：

   <input type="hidden" class="uid" value="{{session('userid')}}">

步骤3：判断class="uid"是否含有uid

  //微信登陆
         var uid=$('.uid').val();
         console.log(uid);
         if(uid!=""){
          $.ajax({

                   url:"/index/weixinlogin",
                   dataType:"json",
                   data:{_token:_csrf,uid:uid},
                   type:"POST",
                  
                    success:function(res){
                      
                        var html='';
                            if(res){
                             html+='<div class="denglu_img">';
                             html+='<img src="'+res['userPhoto']+'"/>';
                             html+='</div>';
                             html+='<div class="username">';
                             html+=res['userName'];
                             html+='</div>';
                  
                            }
                            
                            
                            $('.logins').empty(); 
                             
                            $(".logins").html(html);
                            
                         },
                  
                    })

           var loginnames=$('.loginname').val();
     console.log(loginnames);
       if(loginnames==""){
       $('.theme-popover-mask').fadeIn(100);
      
          $('.zhuce').slideDown(200);
       }



         }

步骤4：后台访问：

 public function weixinlogin(){
      $uid=$_POST['uid'];
      $result= DB::table('users')->where('userId',$uid)->first();
      if($result){
        return $result;
      }
    }

步骤5：用一个异步判断是否登陆：

      //检测是否登陆
          $.ajax({

                   url:"/index/like",
                   dataType:"json",
                   data:{_token:_csrf},
                   type:"POST",
                    async : false,
                    cache : false,
                    success:function(res){
                      console.log(res);
                        var messages='';
                            if(res.length==0){
                               messages+='<div class="denglu">';
                               messages+='<a class="theme-login" style="color:#fff;" href="javascript:void();">登录</a>';
                               messages+='</div>';
                              
                            }else{
                              
                            $('.uid').val(res['userId']);
                            $('.loginname').val(res['loginName']);
                            }
                            
                            
                            $('.logins').empty(); 
                             
                            $(".logins").html(messages);
                            
                        },
                       
                    })

大概步骤已经完成，注意：微信扫描登陆操作要在公共页面去操作