详解用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在数组中删除重复的元素自保留一个(两种实现思路)
Aug 22 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
Mar 11 Javascript
js阻止冒泡和默认事件(默认行为)详解
Oct 20 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
Jun 19 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
Jul 19 Javascript
浅谈angular2路由预加载策略
Oct 04 Javascript
angular中ui calendar的一些使用心得(推荐)
Nov 03 Javascript
html中通过JS获取JSON数据并加载的方法
Nov 30 Javascript
使用elementUI实现将图片上传到本地的示例
Sep 04 Javascript
jQuery实现弹出层效果
Dec 10 jQuery
JavaScript回调函数callback用法解析
Jan 14 Javascript
利用 JavaScript 实现并发控制的示例代码
Dec 31 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
PHP中限制IP段访问、禁止IP提交表单的代码
2011/04/23 PHP
PHP explode()函数用法、切分字符串
2012/10/03 PHP
PHP大批量插入数据库的3种方法和速度对比
2014/07/08 PHP
PHP实现在线阅读PDF文件的方法
2015/06/23 PHP
注释PHP和html混合代码的小技巧(分享)
2016/11/03 PHP
用Javascript数组处理多个字符串的连接问题
2009/08/20 Javascript
javascript 跳转代码集合
2009/12/03 Javascript
js 中{},[]中括号,大括号使用详解
2011/05/12 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
2011/07/27 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
2012/02/03 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
2014/05/11 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
2015/11/05 Javascript
jQuery实现带分组数据的Table表头排序实例分析
2015/11/24 Javascript
浅谈JavaScript变量的自动转换和语句
2016/06/12 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
2017/02/21 Javascript
vue router学习之动态路由和嵌套路由详解
2017/09/21 Javascript
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
2018/05/15 NodeJs
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
JS实现随机抽选获奖者
2019/11/07 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
详解javascript void(0)
2020/07/13 Javascript
JavaScript Array.flat()函数用法解析
2020/09/02 Javascript
js实现手表表盘时钟与圆周运动
2020/09/18 Javascript
Python的string模块中的Template类字符串模板用法
2016/06/27 Python
Python实现E-Mail收集插件实例教程
2019/02/06 Python
解决py2exe打包后,总是多显示一个DOS黑色窗口的问题
2019/06/21 Python
在Python中append以及extend返回None的例子
2019/07/20 Python
Python 中的 import 机制之实现远程导入模块
2019/10/29 Python
Python超越函数积分运算以及绘图实现代码
2019/11/20 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
css3实现文字首尾衔接跑马灯的示例代码
2020/10/16 HTML / CSS
HTML5新特性 多线程(Worker SharedWorker)
2017/04/24 HTML / CSS
酒店员工职业生涯规划
2014/02/25 职场文书
旷工检讨书大全
2015/08/15 职场文书
2016年小学生寒假家长评语
2015/10/10 职场文书