详解用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 相关文章推荐
jQuery解决iframe高度自适应代码
Dec 20 Javascript
jquery.validate的使用说明介绍
Nov 12 Javascript
javascript放大镜效果的简单实现
Dec 09 Javascript
JavaScript中的ubound函数使用实例
Nov 04 Javascript
javascript实现3D变换的立体圆圈实例
Aug 06 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
Jan 28 Javascript
Bootstrap网格系统详解
Apr 26 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
Dec 28 Javascript
分享一道关于闭包、bind和this的面试题
Feb 20 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
Nov 06 Javascript
详细分析vue表单数据的绑定
Jul 20 Javascript
vue ant design 封装弹窗表单的使用
Jun 01 Vue.js
妙用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
PHP错误抑制符(@)导致引用传参失败Bug的分析
2011/05/02 PHP
php设计模式之命令模式使用示例
2014/03/02 PHP
php树型类实例
2014/12/05 PHP
php计算税后工资的方法
2015/07/28 PHP
PHP防盗链的基本思想 防盗链的设置方法
2015/09/25 PHP
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
jQuery中add()方法用法实例
2015/01/08 Javascript
JavaScript使用Prototype实现面向对象的方法
2015/04/14 Javascript
jqGrid中文文档之选项设置
2015/12/02 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
2016/07/07 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
2016/09/28 Javascript
深入理解JavaScript 参数按值传递
2017/05/24 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
2018/07/13 Javascript
使用vue.js在页面内组件监听scroll事件的方法
2018/09/11 Javascript
Vue项目引进ElementUI组件的方法
2018/11/11 Javascript
JS求1到任意数之间的所有质数的方法详解
2019/05/20 Javascript
在layui tab控件中载入外部html页面的方法
2019/09/04 Javascript
Python中isnumeric()方法的使用简介
2015/05/19 Python
Python3.5基础之变量、数据结构、条件和循环语句、break与continue语句实例详解
2019/04/26 Python
numpy和pandas中数组的合并、拉直和重塑实例
2019/06/28 Python
深入浅析Python科学计算库Scipy及安装步骤
2019/10/12 Python
Python中filter与lambda的结合使用详解
2019/12/24 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
Boston Proper官网:美国女装品牌
2017/10/30 全球购物
Hawes & Curtis官网:英国经典品牌
2019/07/27 全球购物
德国的各种媒体在线商店:Thalia.de(书籍、电子书、玩具等)
2020/10/08 全球购物
Linux上比较文件的命令都有哪些
2013/09/28 面试题
敏捷开发的主要原则都有哪些
2015/04/26 面试题
大学毕业生自我鉴定
2013/11/05 职场文书
毕业自荐信
2013/12/16 职场文书
工厂仓管员岗位职责
2014/01/01 职场文书
大学辅导员事迹材料
2014/02/05 职场文书
教师批评与自我批评
2014/10/15 职场文书
2015年八一建军节慰问信
2015/03/23 职场文书
道歉情书大全
2015/05/12 职场文书
pytorch常用数据类型所占字节数对照表一览
2021/05/17 Python