详解用vue.js和laravel实现微信授权登陆


Posted in Javascript onJune 23, 2017

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

网址:https://easywechat.org/

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

下面来说说具体的安装:

1.安装package

composer require overtrue/wechat

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

Overtrue\LaravelWechat\ServiceProvider::class,

3.创建配置文件

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

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

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

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

5.添加路由

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

特别注意:因为laravel自带token验证,建议使用laravel-cors解决跨域问题,具体安装见github地址:https://github.com/barryvdh/laravel-cors

6.控制器添加如下代码:

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

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

7.配置好了路由和控制器,就得到了微信授权所需的URL,此时打开微信公众平台,在“开发—基本配置”页面,点击“修改配置”按钮,得到:

详解用vue.js和laravel实现微信授权登陆

修改配置页面

1) 将刚才的URL填入URL输入框内

2) token可自定义

3) EncodingAESKey 可随机生成

4) 消息加密用安全模式

8.在.env文件中配置以下参数

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

最后一步,填写完成后提交,微信将会调用此URL接口来验证,如果验证成功,就通过配置。

在公众平台,还有一项重要配置,如下:

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

接下来就可以实现微信授权登陆的功能了

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

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

10.在路由中添加授权登陆的路由

Route::group(['middleware' => ['wechat.oauth']], function () {
  Route::get('/auth','UsersController@wechatAuth');
});

11.在以上路由相应的控制器中添加wechatAuth方法

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

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

  }

12.在微信中打开此路由下的url就发现出现微信认证的界面,如未成功请自行检查你的配置和代码。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS创建优美的页面滑动块效果 - Glider.js
Sep 27 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
Feb 01 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
Apr 24 Javascript
div失去焦点事件实现思路
Apr 22 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
May 20 Javascript
对new functionName()定义一个函数的理解
May 22 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 Javascript
AngularJS开发教程之控制器之间的通信方法分析
Dec 25 Javascript
vue loadmore 组件滑动加载更多源码解析
Jul 19 Javascript
Vue中使用clipboard实现复制功能
Sep 05 Javascript
turn.js异步加载实现翻书效果
Jul 25 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
Jun 05 Javascript
妙用Angularjs实现表格按指定列排序
Jun 23 #Javascript
VUE中v-model和v-for指令详解
Jun 23 #Javascript
JavaScript正则表达式简单实用实例
Jun 23 #Javascript
js中的事件委托或是事件代理使用详解
Jun 23 #Javascript
JS判断非空至少输入两个字符的简单实现方法
Jun 23 #Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
Jun 23 #Javascript
微信小程序组件 marquee实例详解
Jun 23 #Javascript
You might like
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/03/02 无线电
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
nodejs的require模块(文件模块/核心模块)及路径介绍
2013/01/14 NodeJs
jQuery使用动态渲染表单功能完成ajax文件下载
2013/01/15 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
2013/04/22 Javascript
原生js做的手风琴效果的导航菜单
2013/11/08 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
2013/12/19 Javascript
将HTML格式的String转化为HTMLElement的实现方法
2014/08/07 Javascript
javascript常用经典算法实例详解
2015/11/25 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
2017/02/18 Javascript
Vue ElementUI之Form表单验证遇到的问题
2017/08/21 Javascript
Vue下的国际化处理方法
2017/12/18 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
2018/01/10 Javascript
详解vue-meta如何让你更优雅的管理头部标签
2018/01/18 Javascript
vue.js select下拉框绑定和取值方法
2018/03/03 Javascript
vue里input根据value改变背景色的实例
2018/09/29 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
2019/02/26 Javascript
javascript/jquery实现点击触发事件的方法分析
2019/11/11 jQuery
webpack proxy 使用(代理的使用)
2020/01/10 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
2020/02/01 jQuery
jQuery+ajax实现文件上传功能
2020/12/22 jQuery
从零学Python之入门(三)序列
2014/05/25 Python
Python简单实现子网掩码转换的方法
2016/04/13 Python
Python工厂函数用法实例分析
2018/05/14 Python
python dataframe常见操作方法:实现取行、列、切片、统计特征值
2018/06/09 Python
解析Python的缩进规则的使用
2019/01/16 Python
使用TensorFlow-Slim进行图像分类的实现
2019/12/31 Python
python如何支持并发方法详解
2020/07/25 Python
CSS3中伪元素::before和::after的用法示例
2017/09/18 HTML / CSS
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
素质拓展感言
2014/01/29 职场文书
建议书的格式
2014/05/12 职场文书
社区志愿者培训方案
2014/06/10 职场文书
应届大专生自荐书
2014/06/16 职场文书
Mysql 8.x 创建用户以及授予权限的操作记录
2022/04/18 MySQL