威尼斯人线上娱乐

js和laravel完毕微信授权登入,VueJs单页应用完成微信网页授权及微信共享成效示例

11 8月 , 2019  

在laravel框架我们使用安正超的package

在laravel框架我们选用安正超的package

在实际上开销中,无论是做PC端、WebApp端照旧微信公众号等项指标门类的时候,或多或少都会涉嫌到微信相关的开支,近日厂家项目须要落到实处微信网页授权,并获得微信用户中央消息的功能及微信分享的功效,以后到底实现了,但开荒进度中相遇一些个坑。废话十分的少说了,起初正题。

注:此项是微信徒人号支付,请在往下看前边,先完结网页微信授权登录功效,具体参看笔者简书的另一篇小说:js和laravel完毕微信授权登入,VueJs单页应用完成微信网页授权及微信共享成效示例。//www.jb51.net/article/117004.htm

网址:

网址:https://easywechat.org/

描述点

1.张开app/config/wechat.php,配置微信支付参数:

有特地的对准laravel的安装包,请参见如下网站:

有特意的针对laravel的安装包,请参见如下网站:
https://github.com/overtrue/laravel-wechat

  1. 微信相关支出文化精晓
  2. 怎么完成微信相关成效当地质度量试
  3. 微信网页授权
  4. 微信分享
  /*
   * 微信支付
   */
   'payment' => [
     'merchant_id'    => env('WECHAT_PAYMENT_MERCHANT_ID', 'your-mch-id'),//商家号ID,请将其放在.env文件中
     'key'        => env('WECHAT_PAYMENT_KEY', 'key-for-signature'),//商家支付key,请将其放在.env文件中
     'cert_path'     => env('WECHAT_PAYMENT_CERT_PATH', storage_path('app/public/apiclient_cert.pem')), //微信支付证书apiclient_cert.pem的绝对路径,我放在storage/app/public/下
     'key_path'      => env('WECHAT_PAYMENT_KEY_PATH', storage_path('app/public/apiclient_key.pem')),   //微信支付证书apiclient_key.pem的绝对路径,我放在storage/app/public/下径
     // 'device_info'   => env('WECHAT_PAYMENT_DEVICE_INFO', ''),
     // 'sub_app_id'   => env('WECHAT_PAYMENT_SUB_APP_ID', ''),
     // 'sub_merchant_id' => env('WECHAT_PAYMENT_SUB_MERCHANT_ID', ''),
     // ...
   ],

上面包车型地铁话说具体的设置:

下边包车型大巴话说现实的装置:

微信相关支付文化领会

上述参数,请遵照自身的处境安顿,请勿直接拷贝代码!

1.安装package

  1. 安装package
  1. 微信大伙儿号的appId,AppSecret
    1. 当我们报了名八个微信民众号后,便可见拿走贰个appId(各样微信大伙儿号唯有一个,多少个微教徒人号独一的标志)和appSecret(能够开始展览重新初始化),那四个音信是张开微信公众号支付至关重要的,因为微信公众号中差相当少具有作用的开销都与那三个消息有关。
  2. 微信公众号中IP白名单
    1. 在开荒微信大伙儿功效的时候,须求大家增添IP白名单,那样以便能够收获到access_token,关于access_token的牵线请看这里
  3. 网页授权域名以及JS接口安全域名
    1. 网页授权域名:在大家的施用中要求微信用户张开登入、获取微信用户中央新闻的时候,要求安装这几个域名
    2. JS接口安全域名:在我们的利用中须要达成微信分享等职能,须求设置这几个域名。

2.安插微信支付和回调路由

composer require overtrue/wechat

怎么样达成微信相关作用本地质衡量试

//以下路由我放在api.php路由里,如果你放在web.php路由,请自行调整!
Route::middleware('api')->post('wxpay','BillsController@wxpay');
Route::middleware('api')->post('wx_notify','BillsController@wxnotify');

2.在app/config/app.php 中注册 ServiceProvider

composer require overtrue/wechat

相持比很多少人都对那个主题素材相比感兴趣,因为在进展关联到微教徒人号中功效开拓的时候,暗许情形下大家是无法打开本地质衡量试的,也正是说测量检验都亟待将代码进行布局才测量检验,但那拾贰分不便利大家的测量试验开荒,其实举办地面测验开辟很轻便,只需求大家有叁个域名就能够了,然后将大家地方的ip映射到那几个域名上,就足以本地质度量试了。上面作者就说说本人是如何做地方测量检验的.

3.在相应的调整器里创造wxpay的方法

Overtrue\LaravelWechat\ServiceProvider::class,

2.在app/config/app.php 中注册 ServiceProvider

因为购买域名须求张开备案操作之类的,比较费心,所以一般第三方平台就可以让大家获得贰个域名。作者是在natpp(ngrok)这些网址上登记的

 /**
  * 这是我自己项目的内部代码示例,具体根据自己的业务逻辑调整,切不可直接拷贝!
  */
  public function wxpay(Request $request)
  {
    //本实例传递的参数为user_id 和 broadcast_id,具体
    if($request->has('user_id') && $request->has('broadcast_id')){
      $out_trade_no = md5(Carbon::now().str_random(8));
      $user_id = $request->get('user_id');
      $broadcast_id = $request->get('broadcast_id');
      $num = $request->get('num');
      $flag = $request->get('flag');

      $openid = $this->user->getOpenid($user_id);
      $broadcast = $this->broadcast->getById($broadcast_id);
      $speaker_id = $broadcast->speaker_id;
      $body = $broadcast->title;
      $detail = '';
      $paid_at = null;

      $status = 'pre_paid';
      $amount = ($broadcast->price)*$num;

      $attributes = [
        'trade_type'    => 'JSAPI', // JSAPI,NATIVE,APP...
        'body'       => $body, 
        'detail'      => $detail,
        'out_trade_no'   => $out_trade_no,
        'total_fee'    => $amount, // 单位:分
        'notify_url'    => $_ENV['APP_URL'].'/api/wx_notify', // 支付结果通知网址,如果不设置则会使用配置里的默认地址
        'openid'      => $openid, // trade_type=JSAPI,此参数必传,用户在商户appid下的唯一标识,
        // ...
      ];

      $order = new Order($attributes);
      $result = $this->wechat->payment->prepare($order);
      if ($result->return_code == 'SUCCESS' && $result->result_code == 'SUCCESS'){
        //创建预订单
        $param = [
          'out_trade_no'=>$out_trade_no,
          'user_id'=>$user_id,
          'broadcast_id'=>$broadcast_id,
          'speaker_id'=>$speaker_id,
          'body'=>$body,
          'detail'=>$detail,
          'paid_at'=>$paid_at,
          'amount'=>$amount,
          'flag'=>$flag,
          'status'=>$status,
          'num'=>$num
        ];
        $this->bill->store($param);
        //返回
        $prepayId = $result->prepay_id;
        $config = $this->wechat->payment->configForPayment($prepayId,false);

        return response()->json($config);
      }
    }

  }

3.创建布局文件

Overtrue\LaravelWechat\ServiceProvider::class,

自个儿是花了五元钱购买了三个月的隧道,因为无偿的有一点点可相信,毕竟是无需付费的,哈哈。

4.在对应的调控器里增添回调wxnotify方法

复制代码 代码如下:

3.创立布局文件

威尼斯人线上娱乐 1

   /**
   * 这是我自己项目的内部代码示例,具体根据自己的业务逻辑调整,切不可直接拷贝!
   */
  public function wxnotify()
  {
    $response = $this->wechat->payment->handleNotify(function($notify, $successful){
      $order = $this->bill->getBillByOrderno($notify->out_trade_no);//查询订单($notify->out_trade_no);
      if (!$order) { // 如果订单不存在
        return 'Order not exist.'; // 告诉微信,我已经处理完了,订单没找到,别再通知我了
      }
      // 如果订单存在
      // 检查订单是否已经更新过支付状态
      if ($order->paid_at) { // 假设订单字段“支付时间”不为空代表已经支付
        return true; // 已经支付成功了就不再更新了
      }
      // 用户是否支付成功
      if ($successful) {
        // 不是已经支付状态则修改为已经支付状态
        $order->paid_at = Carbon::now(); // 更新支付时间为当前时间
        $order->status = 'paid';
      } else { // 用户支付失败
        $order->status = 'paid_fail';
      }
      $order->save(); // 保存订单
      return true; // 返回处理完成
    });
    return $response; 
  }

php artisan vendor:publish
–provider=”Overtrue\LaravelWechat\ServiceProvider”

php artisan vendor:publish --provider="Overtrue\LaravelWechat\ServiceProvider"

注意,大家无法直接采取那几个隧道,因为这么些隧道是三级域名,无法用于微信支付,须要绑定一个二级域名或自己作主域名

5.vue.js中methods的艺术代码参照他事他说加以考察

请修改应用根目录下的 config/wechat.php 中对应的项即可

请修改应用根目录下的 config/wechat.php 中对应的项就可以

当绑定完域名之后,在该地大家须求将地面ip进行映射穿透操作。

   wechatpay(){
    var param = {
     'user_id':this.getStorage(),
     'broadcast_id':this.id,
     'num':1,
     'flag':'buy',
    }
    this.$http.post(this.GLOBAL.apiUrl+'/wxpay',param).then((response) => {
     WeixinJSBridge.invoke(
      'getBrandWCPayRequest', response.data,
      function(res){
       if(res.err_msg == "get_brand_wcpay_request:ok" ) {
        # 回调成功后跳转
        # router.push({name: 'Room',params:{id:this.id}});
       }
      }
     );
    })
   },

4.增加外观到 config/app.php 中的 aliases 部分:

4.加多外观到 config/app.php 中的 aliases 部分:

windows下开发dos窗口,输入 natapp -authtoken 你的隧道的authtoken

6.微信大伙儿平台配置

'wechat' => Overtrue\LaravelWechat\Facade::class,
'wechat' => Overtrue\LaravelWechat\Facade::class,

威尼斯人线上娱乐 2

1) 在“民众账号设置”—“JS接口安全域名”设置中填入前端域名

5.增加路由

威尼斯人线上娱乐 ,5.增添路由

将你在下边安装的二级域名增多到上述说的网页授权域名以及JS接口安全域名

2)
在“微信支付”—“开垦配置”页面中,民众账号支付下填写“支付授权目录”,注意的是,此授权url为前端支付开关所在页面包车型地铁url

Route::any('/wechat', 'WechatController@serve');//控制器请按自己的实际情况填写
Route::any('/wechat', 'WechatController@serve');//控制器请按自己的实际情况填写

威尼斯人线上娱乐 3

7.接下来你就足以测量试验了

特别注意:因为laravel自带token验证,提出使用laravel-cors化解跨域难题,具体安装见github地址:

极度注意:因为laravel自带token验证,提议使用laravel-cors消除跨域难题,具体安装见github地址:https://github.com/barryvdh/laravel-cors

接下去便得以开始展览地面测量试验了.最后说一下,开采进程中下载微信开采工具进行调和也是不利的选用,下载地址

如上正是本文的全部内容,希望对大家的求学抱有匡助,也希望大家多多补助脚本之家。

6.调控器增多如下代码:

6.调节器增添如下代码:

微信网页授权

您只怕感兴趣的小说:

  • Vue仿支付宝支出功用
  • vue.js
    微信支付前端代码分享
  • vue达成键盘输入支付密码效能
  /**
   * 处理微信的请求消息
   *
   * @return string
   */
  public function serve()
  {
    $wechat = app('wechat');
    $wechat->server->setMessageHandler(function($message){
      return "欢迎关注 overtrue!";
    });

    return $wechat->server->serve();
  }
    /**
     * 处理微信的请求消息
     *
     * @return string
     */
    public function serve()
    {
        $wechat = app('wechat');
        $wechat->server->setMessageHandler(function($message){
            return "欢迎关注 overtrue!";
        });

        return $wechat->server->serve();
    }

微信网页授权的目标根本是落到实处三方站点微信的记名、获取微信用户音信等

7.布置好了路由和调控器,就拿走了微信授权所需的U索罗德L,此时开荒微教徒人平台,在“开采—基本配备”页面,点击“修改配置”开关,获得:

7.安顿好了路由和调控器,就收获了微信授权所需的URL,此时开发微信公众平台,在“开荒—基本配备”页面,点击“修改配置”开关,获得:

兑现微信网页授权获取微信用户的主导消息

威尼斯人线上娱乐 4

威尼斯人线上娱乐 5

先决断当前浏览器是还是不是微信内置浏览器,微信网页授权api:

修改配置页面

修改配置页面

  isweixin() {
     const ua = window.navigator.userAgent.toLowerCase();
     if(ua.match(/MicroMessenger/i) == 'micromessenger'){
       return true;
     } else {
       return false;
     }
   },

1) 将刚才的UWranglerL填入UENVISIONL输入框内

  1. 将刚刚的U奇骏L填入UTiggoL输入框内

1 第一步:用户同意授权,获取code

2) token可自定义

  1. token可自定义
  2. EncodingAESKey 可随心所欲生成
  3. 音信加密用安全情势

2 第二步:通过code换取网页授权access_token

3) EncodingAESKey 可轻便生成

8.在.env文件中安顿以下参数

3 第三步:刷新access_token(假诺供给)

4) 消息加密用安全情势

#微信配置,若不知道WECHAT_TOKEN和WECHAT_AES_KEY请继续往下看
WECHAT_APPID=
WECHAT_SECRET=
WECHAT_TOKEN=
WECHAT_AES_KEY=
#微信支付用
WECHAT_PAYMENT_MERCHANT_ID=
WECHAT_PAYMENT_KEY=

4 第四步:拉取用户音讯(需scope为 snsapi_userinfo)

8.在.env文件中布局以下参数

聊起底一步,填写完毕后交由,微信将会调用此U奥迪Q5L接口来注脚,借使声明成功,就通过布署。

5 附:核实授权凭证(access_token)是还是不是有效

#微信配置,若不知道WECHAT_TOKEN和WECHAT_AES_KEY请继续往下看
WECHAT_APPID=
WECHAT_SECRET=
WECHAT_TOKEN=
WECHAT_AES_KEY=
#微信支付用
WECHAT_PAYMENT_MERCHANT_ID=
WECHAT_PAYMENT_KEY=

在民众平台,还恐怕有一项根本配置,如下:

微信API里面关于那么些都介绍得相比较清楚的,笔者就说说在那一个进度中本身所蒙受的主题材料,以及化解办法

最后一步,填写完结后交付,微信将会调用此U汉兰达L接口来验证,借使评释成功,就因而陈设。

在微信徒人平台“接口权限”—“网页授权”—“网页授权域名”,填上服务器端域名(注:请留神阅读平台上务求,特别注意得是,这里是服务器域名,不是客户端域名!)

在第一步获取code的时候,因为那一个code在五分钟之内只好够利用贰遍,所以必须对这几个code进行缓存起来。不然会产出”errcode”:40163,”errmsg”:”code
been used, hints: [ req_id: nOCEBa0466th12
]”或{“errcode”:40029,”errmsg”:”invalid code”} 错误。

在公众平台,还大概有一项重点铺排,如下:

接下去就能够完毕微信授权登陆的机能了

微信分享

在微信徒人平台“接口权限”—“网页授权”—“网页授权域名”,填上服务器端域名(注:请稳重阅读平台上务求,特别注意得是,这里是服务器域名,不是客户端域名!)

10.在 app/Http/Kernel.php 中加多路由中间件:

微信分享其实用得特别得多,小编就大约说下在vue-cli中怎么引进微信分享的sdk,以及怎么样完成分享效率.

接下去就足以兑现微信授权登入的职能了

protected $routeMiddleware = [
    // ...
    'wechat.oauth' => \Overtrue\LaravelWechat\Middleware\OAuthAuthenticate::class,
];

微信分享APi:

10.在 app/Http/Kernel.php 中增添路由中间件:

10.在路由中增加授权登录的路由

首先引进sdk:

protected $routeMiddleware = [
  // ...
  'wechat.oauth' => \Overtrue\LaravelWechat\Middleware\OAuthAuthenticate::class,
];
Route::group(['middleware' => ['wechat.oauth']], function () {
    Route::get('/auth','UsersController@wechatAuth');
});
npm install weixin-js-sdk --save-dev

10.在路由中加多授权登入的路由

11.在以上路由相应的调节器中增多wechatAuth方法

接下来经过require或然import引进

Route::group(['middleware' => ['wechat.oauth']], function () {
  Route::get('/auth','UsersController@wechatAuth');
});
public function wechatAuth(Request $request)
    {
        $userinfo = session('wechat.oauth_user')->original; // 拿到授权用户资料

        //这里写用户注册到mysql的相关逻辑代码,请自行补充

    }
import wx from 'weixin-js-sdk';

11.在以上路由相应的调控器中增多wechatAuth方法

12.在微信中张开此路由下的url就发掘出现微信认证的分界面,如未成功请自行检查你的配备和代码,有题目可留言。

微信分享中最主要的是获得到签订契约,才具够落实微信的享受

public function wechatAuth(Request $request)
  {
    $userinfo = session('wechat.oauth_user')->original; // 拿到授权用户资料

    //这里写用户注册到mysql的相关逻辑代码,请自行补充

  }

再依照当前的url去得到到所急需的参数来变成签名的求证,参数主要用appId、nonceStr、timestamp、signature,然后经过wx对象的config方法去实行配备验证具名

12.在微信中展开此路由下的url就意识并发微信认证的分界面,如未得逞请自行检查你的配备和代码。

 wx.config({
     debug: false,
     appId: appId, // 和获取Ticke的必须一样------必填,公众号的唯一标识
     timestamp:timestamp, // 必填,生成签名的时间戳
     nonceStr: nonceStr, // 必填,生成签名的随机串
     signature: signature,// 必填,签名,见附录1
     //需要分享的列表项:发送给朋友,分享到朋友圈,分享到QQ,分享到QQ空间
     jsApiList: [
      'onMenuShareAppMessage','onMenuShareTimeline',
      'onMenuShareQQ','onMenuShareQZone'
     ]
    });


     //处理验证失败的信息
    wx.error(function (res) {
     logUtil.printLog('验证失败返回的信息:',res);
    });
    //处理验证成功的信息
    wx.ready(function () {
    //       alert(window.location.href.split('#')[0]);
     //分享到朋友圈
     wx.onMenuShareTimeline({
      title: _this.newDetailObj.title, // 分享标题
      link: window.location.href.split('#')[0], // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: _this.newDetailObj.thu_image, // 分享图标
      success: function (res) {
       // 用户确认分享后执行的回调函数
       logUtil.printLog("分享到朋友圈成功返回的信息为:",res);
       _this.showMsg("分享成功!")
      },
      cancel: function (res) {
       // 用户取消分享后执行的回调函数
       logUtil.printLog("取消分享到朋友圈返回的信息为:",res);
      }
     });
     //分享给朋友
     wx.onMenuShareAppMessage({
      title: _this.newDetailObj.title, // 分享标题
      desc: _this.desc, // 分享描述
      link: window.location.href.split('#')[0], // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: _this.newDetailObj.thu_image, // 分享图标
      type: '', // 分享类型,music、video或link,不填默认为link
      dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
      success: function (res) {
       // 用户确认分享后执行的回调函数
       logUtil.printLog("分享给朋友成功返回的信息为:",res);
      },
      cancel: function (res) {
       // 用户取消分享后执行的回调函数
       logUtil.printLog("取消分享给朋友返回的信息为:",res);
      }
     });
     //分享到QQ
     wx.onMenuShareQQ({
      title: _this.newDetailObj.title, // 分享标题
      desc: _this.desc, // 分享描述
      link: window.location.href.split('#')[0], // 分享链接
      imgUrl: _this.newDetailObj.thu_image, // 分享图标
      success: function (res) {
       // 用户确认分享后执行的回调函数
       logUtil.printLog("分享到QQ好友成功返回的信息为:",res);
      },
      cancel: function (res) {
       // 用户取消分享后执行的回调函数
       logUtil.printLog("取消分享给QQ好友返回的信息为:",res);
      }
     });

     //分享到QQ空间
     wx.onMenuShareQZone({
      title: _this.newDetailObj.title, // 分享标题
      desc: _this.desc, // 分享描述
      link: window.location.href.split('#')[0], // 分享链接
      imgUrl: _this.newDetailObj.thu_image, // 分享图标
      success: function (res) {
       // 用户确认分享后执行的回调函数
       logUtil.printLog("分享到QQ空间成功返回的信息为:",res);
      },
      cancel: function (res) {
       // 用户取消分享后执行的回调函数
       logUtil.printLog("取消分享到QQ空间返回的信息为:",res);
      }
     });
    });

上述正是本文的全部内容,希望对我们的学习抱有援助,也可望我们多多协理脚本之家。

在那么些进程中出现的荒唐便是:config:invalid
signature,这几个漏洞非常多就表达具名不对,那时候要求静下心来去想想,然后举行割除,笔者最后开掘原来是现阶段的url的一无所能,看了网络海人民广播电视台湾大学都以url需求展开编码,笔者也是那般做的,但平素出现config:invalid
signature

您恐怕感兴趣的稿子:

  • vue 微信授权登陆化解方案
  • 详解Vue微信授权登入前后端分离较为优雅的消除方案
  • VueJs单页应用实现微信网页授权及微信分享作用示例
  • Vue微信项目按需授权登入攻略施行思路详解
  • vue
    做活动端微信公众号采坑经验记录
  • vue移动端微信授权登入插件封装的实例

原来的:

let url = encodeURIComponent(window.location.href.split('#')[0]);

修改后

let url = window.location.href.split('#')[0];

就不易了,最终来探视效果

威尼斯人线上娱乐 6

貌似出现这么些难题,超过二分一都是url的主题材料啊。

以上正是本文的全体内容,希望对我们的就学抱有帮助,也期待我们多多扶助脚本之家。

您或者感兴趣的稿子:

  • vue 微信授权登陆消除方案
  • 详解Vue微信授权登入前后端分离较为优雅的化解方案
  • Vue微信项目按需授权登入战术施行思路详解
  • 详解用vue.js和laravel完结微信授权登入
  • vue
    做运动端微信大伙儿号采坑经验记录
  • vue移动端微信授权登入插件封装的实例


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图