详解用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 相关文章推荐
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
Jun 29 Javascript
Highcharts 非常实用的Javascript统计图demo示例
Jul 03 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
Jul 05 Javascript
js实现div的切换特效上一个下一个
Feb 11 Javascript
js实现遮罩层弹出框的方法
Jan 15 Javascript
jquery实现漂亮的二级下拉菜单代码
Aug 26 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
Nov 18 Javascript
js实现移动端编辑添加地址【模仿京东】
Apr 28 Javascript
详解webpack es6 to es5支持配置
May 04 Javascript
Mac系统下Webstorm快捷键整理大全
May 28 Javascript
React Native 混合开发多入口加载方式详解
Sep 23 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来检测proxy
2006/10/09 PHP
模仿OSO的论坛(三)
2006/10/09 PHP
PHP微信分享开发详解
2017/01/14 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
js DataSet数据源处理代码
2010/03/29 Javascript
js获取当前select 元素值的代码
2010/04/19 Javascript
javascript jscroll模拟html元素滚动条
2012/12/18 Javascript
AngularJs  Using $location详解及示例代码
2016/09/02 Javascript
js通过classname来获取元素的方法
2016/11/24 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
2016/11/25 Javascript
HTML5 js实现拖拉上传文件功能
2020/11/20 Javascript
详解webpack和webpack-simple中如何引入css文件
2017/06/28 Javascript
详解VUE里子组件如何获取父组件动态变化的值
2018/12/26 Javascript
详解JS浏览器事件循环机制
2019/03/27 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
2019/11/14 Javascript
javascript实现拖拽碰撞检测
2020/03/12 Javascript
Vue指令实现OutClick的示例
2020/11/16 Javascript
[01:55]TI9显影之尘系列 - Evil Geniuses
2019/08/22 DOTA
python使用tomorrow实现多线程的例子
2019/07/20 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
Python实现打包成库供别的模块调用
2020/07/13 Python
HTML5的新特性(1)
2016/03/03 HTML / CSS
CAT鞋美国官网:CAT Footwear
2017/11/27 全球购物
英国简约舒适女装品牌:Great Plains
2018/07/27 全球购物
设计部经理的岗位职责
2013/11/16 职场文书
高二美术教学反思
2014/01/14 职场文书
商务考察邀请函范文
2014/01/21 职场文书
项目建议书格式
2014/03/12 职场文书
信电学院毕业生自荐书
2014/05/24 职场文书
学生评语集锦
2015/01/04 职场文书
清洁工工作总结
2015/08/11 职场文书
pycharm无法导入lxml的解决办法
2021/03/31 Python
Spring Security使用单点登录的权限功能
2022/04/03 Java/Android