Vue单页应用结合后台做第三方登录[微信扫一扫登录授权登录](一)

前言

在之前的mvc开发中,相信大家都也能很熟练的做出结合微信登录qq登录等的第三方登录,今天我这主要说一下前后端分离模式中的第三方登录流程

在说微信登录之前我首先跟大家说一下微信的access_token 在微信中access_token是有俩种的,大家一定要分别仔细,一个是网页授权获取到的access_token,这个token是一次性的,只能获取到一个微信用户信息,是与微信用户一对一的关系,而另外一个基础access_token是专门请求获取token接口拿到的,这个有效期是7200s,大家一定要区分开这俩个token.在今天所说的微信登录中

我首先用一幅图说明一下大致流程(扫一扫登录和微信内授权登录流程大致一样)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

网站应用微信登录开发指南

微信文档:

https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419316505&token=f4f77621bb28701905b55092c32eab02b718d258&lang=zh_CN

扫一扫登录,大致流程我图中已经给出来了,其实这只是一个流程,并不是最简单的,只要你明白了,你也可以有你自己的流程

前端跳转到微信扫一扫界面

第三方使用网站应用授权登录前请注意已获取相应网页授权作用域(scope=snsapi_login),则可以通过在PC端打开以下链接:
https://open.weixin.qq.com/connect/qrconnect?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
若提示“该链接无法访问”,请检查参数是否填写错误,如redirect_uri的域名与审核时填写的授权域名不一致或scope不为snsapi_login。

在回调的url中,我们可以拿到code,然后把这个code给前端,让前端拿着code去请求我们登录接口,然后成功直接返回登录信息前端直接保存即可

 

微信支付 :curl出错,错误码:60两个问题的解决办法

如下是运行微信支付测试代码时出错代码:

Warning: curl_setopt() expects parameter 2 to be long, string given in D:\wwwroot\weixinpaytest\pay\WxPay.JsApiPay.php on line 99

Fatal error: Uncaught exception ‘WxPayException‘ with message ‘curl出错,错误码:60‘ in D:\wwwroot\weixinpaytest\lib\WxPay.Api.php:564 Stack trace: #0 D:\wwwroot\weixinpaytest\lib\WxPay.Api.php(62):

WxPayApi::postXmlCurl(‘<xml><appid><![…‘, ‘https://api.mch…‘, false, 6) #1 D:\wwwroot\weixinpaytest\pay\jsapi.php(36):

WxPayApi::unifiedOrder(Object(WxPayUnifiedOrder)) #2 {main} thrown in D:\wwwroot\weixinpaytest\lib\WxPay.Api.php on line 564

 

第一个问题,这个问题完全是微信团队的问题,给出的example就是错的:

Warning: curl_setopt() expects parameter 2 to be long, string given in D:\wwwroot\weixinpaytest\pay\WxPay.JsApiPay.php on line 99

找到WxPay.JsApiPay.php文件的99行,curl_setopt($ch, CURLOP_TIMEOUT, 30);
微信团队example代码里少了一个“T”,正确代码应该是 curl_setopt($ch, CURLOPT_TIMEOUT, 30);

这样,这一个问题就解决了。

下面说第二个问题:

Fatal error: Uncaught exception ‘WxPayException‘ with message ‘curl出错,错误码:60‘ in D:\wwwroot\weixinpaytest\lib\WxPay.Api.php:564 Stack trace: #0D:\wwwroot\weixinpaytest\lib\WxPay.Api.php(62):
WxPayApi::postXmlCurl(‘<xml><appid><![…‘, ‘https://api.mch…‘, false, 6) #1 D:\wwwroot\weixinpaytest\pay\jsapi.php(36):
WxPayApi::unifiedOrder(Object(WxPayUnifiedOrder)) #2 {main} thrown in D:\wwwroot\weixinpaytest\lib\WxPay.Api.php on line 564

这个错误通过修改文件WxPay.Api.php 解决,具体如下:

第537行

curl_setopt($ch,CURLOPT_SSL_VERIFYPEER,TRUE);
curl_setopt($ch,CURLOPT_SSL_VERIFYHOST,2);//严格校验

to

curl_setopt($ch,CURLOPT_SSL_VERIFYPEER,FALSE);
curl_setopt($ch,CURLOPT_SSL_VERIFYHOST,FALSE);//严格校验

这样,这两个问题就解决了!祝你好运!

以上就是对微信支付出现问题的资料整理,后续继续补充相关资料谢谢大家对本站的支持!

PHP解析微信支付结果返回的xml示例代码

先上代码:

$input = file_get_contents('php://input');
if (!empty($input) && empty($_GET['out_trade_no'])) {
 $obj = simplexml_load_string($input, 'SimpleXMLElement', LIBXML_NOCDATA);
 $data = json_decode(json_encode($obj), true);
 //根据$data处理自己所要的逻辑
}

$data具体参数看微信文档,最常用的是:out_trade_no(商户订单号)、transaction_id(微信交易号)、result_code(交易状态)

交易状态如果是success记得处理完逻辑后返回一个success,不然微信会认为你的处理未完成而继续向服务器发送请求

[微信公众平台开发]网页授权获取用户信息thinkphp示例代码

开头要说明一下,微信公众号获取授权有俩种方式,一种是使用AppID和AppSecret获取的access_token,一种是OAuth2.0授权中产生的access_token,

第一种是用户关注以及回复消息的时候,均可以获得用户的OpenID,然后通过AppSecret即可获取access_token,另外一种就是本文中要说到的。

–>通过OAuth2.0方式弹出授权页面获得用户基本信息:

1.在公众号后台设置回调域名

2.拼接请求构造代码,跳转至微信的用户授权页:看代码注释

protected function checkValid(){
   //检测用户是否已经授权登录
   if(empty(session('user'))){
      //没有的话跳转授权登录方法
      return $this->wx_login();
   }
   $this->UserId=session('user')['userid'];
   $this->UserOpenid=session('user')['useropenid'];
   $this->UserName=session('user')['username'];
   $this->UserHeadimg=session('user')['userheadpic'];
}


//微信用户授权登录
public function wx_login(){
   $appid = "xxxxxxxxxx";
   $url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='.$appid.'&redirect_uri=http://xxx.com/user/index/wx_callback.html&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect';
   header("Location:".$url);
}

代码中的xxx.com就是第一步中设置的回调域名

在微信的用户授权页,如果用户选择了“同意授权”,则微信重新回跳的到用户设置的回跳地址时,会附带上code参数。

3.在回跳url中,首先从请求中取得code,然后根据code进一步换取openid和access_token,然后就可以根据openid和access_token调用微信的相关接口查询用户信息了。

//微信回调地址
public function wx_callback(){
   $appid = "xxxxxx";
   $secret = "xxxxxxx";
   $code = $_GET["code"];
   $get_token_url = 'https://api.weixin.qq.com/sns/oauth2/access_token?appid='.$appid.'&secret='.$secret.'&code='.$code.'&grant_type=authorization_code';
   //换取spenid和access_token
   $ch = curl_init();
   curl_setopt($ch,CURLOPT_URL,$get_token_url);
   curl_setopt($ch,CURLOPT_HEADER,0);
   curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1 );
   curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 10);
   $res = curl_exec($ch);
   curl_close($ch);
   $json_obj = json_decode($res,true);
   //这里做token缓存

   //根据openid和access_token查询用户信息
   $access_token = $json_obj['access_token'];
   $openid = $json_obj['openid'];
   //获取用户信息接口
   $get_user_info_url = 'https://api.weixin.qq.com/sns/userinfo?access_token='.$access_token.'&openid='.$openid.'&lang=zh_CN';

   $ch = curl_init();
   curl_setopt($ch,CURLOPT_URL,$get_user_info_url);
   curl_setopt($ch,CURLOPT_HEADER,0);
   curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1 );
   curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 10);
   $res = curl_exec($ch);
   curl_close($ch);

   //解析json
   $user_obj = json_decode($res,true);
   //获得用户信息后  判断是否记录过
   $data['useropenid']=$user_obj['openid'];
   $data['username']=$user_obj['nickname'];
   $data['userheadpic']=$user_obj['headimgurl'];

   $user_data=db('user')->where('useropenid',$user_obj['openid'])->field('userid,useropenid,username,userheadpic')->find();

   if($user_data){
      //说明登录过  修改信息 存储session
      db('user')->where('userid',$user_data['userid'])->update($data);
      session('user',$user_data);
   }else{
      //未登录  先登记信息
      $data['usercreatetime']=time();
      $id=db('user')->insertGetId($data);
      $data['userid']=$id;
      session('user',$data);
   }

   //跳转回首页
   return $this->redirect('/user/index');

以上代码只是个基本例子,具体还待优化,仅供参考。