详解用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删除字符串中重复字符方法
Mar 09 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
Sep 04 Javascript
浅析JS运动
Dec 28 Javascript
js判断数组key是否存在(不用循环)的简单实例
Aug 03 Javascript
bootstrap PrintThis打印插件使用详解
Feb 20 Javascript
整理关于Bootstrap排版的慕课笔记
Mar 29 Javascript
jQuery加密密码到cookie的实现代码
Apr 18 jQuery
详解express + mock让前后台并行开发
Jun 06 Javascript
React 组件间的通信示例
Jun 14 Javascript
axios的拦截请求与响应方法
Aug 11 Javascript
jQuery层叠选择器用法实例分析
Jun 28 jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
妙用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适配器模式(Adapter)
2014/11/25 PHP
CI框架实现cookie登陆的方法详解
2016/05/18 PHP
php处理带有中文URL的方法
2016/07/11 PHP
php计算多个集合的笛卡尔积实例详解
2017/02/16 PHP
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
2011/03/03 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
Js保留小数点的4种效果实现代码分享
2014/04/12 Javascript
jQuery实现选项卡切换效果简单演示
2015/12/09 Javascript
浅谈React 属性和状态的一些总结
2016/11/21 Javascript
微信小程序 配置文件详细介绍
2016/12/14 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
利用vue.js插入dom节点的方法
2017/03/15 Javascript
Vue.js数据绑定之data属性
2017/07/07 Javascript
详解webpack babel的配置
2018/01/09 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
2018/09/04 Javascript
js实现计算器功能
2020/08/10 Javascript
关于ES6尾调用优化的使用
2020/09/11 Javascript
Python3爬虫学习入门教程
2018/12/11 Python
详解Python中的正斜杠与反斜杠
2019/08/09 Python
django admin 添加自定义链接方式
2020/03/11 Python
django的403/404/500错误自定义页面的配置方式
2020/05/21 Python
k-means 聚类算法与Python实现代码
2020/06/01 Python
快速了解Python开发环境Spyder
2020/06/29 Python
Python使用内置函数setattr设置对象的属性值
2020/10/16 Python
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
2020/11/16 HTML / CSS
canvas实现图片马赛克的示例代码
2018/03/26 HTML / CSS
Amara美国站:英国高端家居礼品网站,世界各地的奢侈家具品牌
2017/07/26 全球购物
Chinti & Parker官网:奢华羊绒女装和创新针织设计
2021/01/01 全球购物
某公司面试题
2012/03/05 面试题
外贸业务员岗位职责
2013/11/24 职场文书
物业管理毕业生的自我评价
2014/02/17 职场文书
美术毕业生求职信
2014/02/25 职场文书
校外活动方案
2014/08/28 职场文书
车贷收入证明范本
2014/09/14 职场文书
欠条范文
2015/07/03 职场文书
Java Spring Boot 正确读取配置文件中的属性的值
2022/04/20 Java/Android