详解用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 相关文章推荐
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
Nov 16 Javascript
javascript显示用户停留时间的简单实例
Aug 05 Javascript
jquery实现动态操作select选中
Feb 11 Javascript
Javascript获取统一管理的提示语(message)
Feb 03 Javascript
JavaScript 经典实例日常收集整理(常用经典)
Mar 30 Javascript
vue.js 表格分页ajax 异步加载数据
Oct 18 Javascript
详解jQuery插件开发方式
Nov 22 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
Dec 15 Javascript
jQuery窗口拖动功能的实现代码
Feb 04 Javascript
解决vue的变量在settimeout内部效果失效的问题
Aug 30 Javascript
javascript sort()对数组中的元素进行排序详解
Oct 13 Javascript
JavaScript定时器使用方法详解
Mar 26 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异步调用socket实现代码
2012/01/12 PHP
PHP遍历数组的几种方法
2012/03/22 PHP
PHP常用数组函数介绍
2014/07/28 PHP
PHP连接sql server 2005环境配置及问题解决
2014/08/08 PHP
php中ftp_chdir与ftp_cdup函数用法
2014/11/18 PHP
PHP7 list() 函数修改
2021/03/09 PHP
jQuery中的siblings用法实例分析
2015/12/24 Javascript
JavaScript判断DIV内容是否为空的方法
2016/01/29 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
js 截取或者替换字符串中的数字实现方法
2016/06/13 Javascript
JavaScript关于提高网站性能的几点建议(一)
2016/07/24 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
2017/03/15 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
2017/05/02 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
2018/03/18 Javascript
vue 标签属性数据绑定和拼接的实现方法
2018/05/17 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
javascript实现倒计时效果
2020/02/17 Javascript
JS画布动态实现黑客帝国背景效果
2020/11/08 Javascript
在vue中给后台接口传的值为数组的格式代码
2020/11/12 Javascript
Python使用numpy实现BP神经网络
2018/03/10 Python
python爬虫实例详解
2018/06/19 Python
修改python plot折线图的坐标轴刻度方法
2018/12/13 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
PyTorch预训练的实现
2019/09/18 Python
Python实例方法、类方法、静态方法区别详解
2020/09/05 Python
Superdry极度乾燥官网:日本街头风格,纯英国制造品牌
2016/10/31 全球购物
加拿大最大的书店:Indigo
2017/01/01 全球购物
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
日本著名化妆品零售网站:Cosme Land
2019/03/01 全球购物
编程实现去掉XML的重复结点
2014/05/28 面试题
出售房屋委托书范本
2014/09/24 职场文书
打架赔偿协议书范本
2014/10/26 职场文书
Python+Matplotlib图像上指定坐标的位置添加文本标签与注释
2022/04/11 Python
Python查找算法的实现 (线性、二分,分块、插值查找算法)
2022/04/24 Python
Vue组件化(ref,props, mixin,.插件)详解
2022/05/15 Vue.js
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技