详解用vue.js和laravel实现微信授权登陆
我的图书馆
详解用vue.js和laravel实现微信授权登陆
在laravel框架我们使用安正超的package
有专门的针对laravel的安装包，请参见如下网址：
下面来说说具体的安装：
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地址：
6.控制器添加如下代码：
* 处理微信的请求消息
* @return string
public function serve()
$wechat = app('wechat');
$wechat-&server-&setMessageHandler(function($message){
return "欢迎关注 overtrue！";
return $wechat-&server-&serve();
7.配置好了路由和控制器，就得到了微信授权所需的URL，此时打开微信公众平台，在“开发—基本配置”页面，点击“修改配置”按钮，得到：
修改配置页面
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')-& // 拿到授权用户资料
//这里写用户注册到mysql的相关逻辑代码，请自行补充
12.在微信中打开此路由下的url就发现出现微信认证的界面，如未成功请自行检查你的配置和代码。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
[转]&[转]&
喜欢该文的人也喜欢vue 前后端分离 如何实现微信后端授权
· 203 天前 · 6974 次点击
前端授权会多次跳转，用户体验不佳。。。
19 回复 &| &直到
16:34:33 +08:00
& &203 天前
难道不是在服务器端把 token 存起来，请求时候验证授权么？
& &203 天前
前端获取 code 发给后端 后端请求微信服务器获取用户信息 登陆／注册 返回 token。
& &203 天前
@ 还没拿到 token 之前的授权登陆。在微信端用户同意授权，获取 code 传给后台，后台通过 code 换取网页授权 access_token，最后拿到用户 openid，openid 换系统的 token 返回给前端；
& &203 天前
@ 我先去试试
& &203 天前
code 换 openid 的过程一律由后端包办了就完了啊，并不需要多次前端往复。自己看文档，时序图里仅一次用户请求。
& &203 天前
授权和前端没啥关系，都是后端发请求的；前端不会获取任何东西，不会发给后端任何东西
& &203 天前 via Android
在前端拿 code 的话，网页授权域名就要用前端的域名，如果我想多个应用公用的话就不行了吧？我现在都是在后端做，后端获取到 openid 后再生成 jwt token 再重定向回前端。但是这样重定向回前端的 url 就带了 token，用户复制链接到别的地方就能通过身份验证～有没有好点的解决办法呢
& &203 天前
@ 我看大部分的解决方法是, open 一个新窗口做授权,然后在这个窗口授权完之后, 把 token 传给 parentwindow,就是前端的这个窗口。
& &203 天前
会跳转到一个页面做授权处理然后后端再跳转回之前的即将转向的地址
& &203 天前
的确不佳，但也找不到啥更好的方法啊。
& &203 天前
解决方法是这样的，前端用户点击我要用微信登录按钮-&此时请求应用 API 接口，我们叫他小张把，小张做啥呢？就是给你生成跳转收到微信的 URL，然后，前端拿到 url 后 location.href=xxxx 进行跳转，然后微信跳转回来后不是带了 code 么？你现在应该卡在 code 这儿了吧，该怎么做呢？记得生成小张这个接口么？前端请求小张的时候啊，小张需要让你带上一个叫做 redirect_uri 或者其他名字的参数，这个参数就是微信跳转回来跳转的接口，然后，你的页面就拿到了 code 了，这个时候，让写接口的哥们儿给你写一个叫做小王的接口，小王做什么呢？小王就等你拿 code，他去根据 code 获取你们这边的用户信息，如果没有，他可以无私地自动创建一个，也可以告诉你用户没有在系统中注册，你手动告诉用户进行注册或者绑定你们的账号，完了
& &203 天前
好了，说下小张这个接口，这个接入我们可以让他变得更牛逼点，做啥呢？小张接收我们应用的 redirect_uri，然后小张生成跳转微信的 uri 的时候优雅一点，假设我们应用的 hostname 是
，前端想要收到 code 的 url 是
URL，然后这里做 code 和 state 校验，完事儿了之后再跳到
& &203 天前
可以在公众号入口跳转的时候申请授权，前端拿到 code 之后发送给后台，后台请求到 token
& &203 天前
如果不用获取用户地理信息之类的数据可以静默授权，不需要用户确认。直接在后台请求就好了
& &203 天前
防止楼主踩坑，可以看看这篇文章
& &203 天前
@ 对的，就是这种方法。但是第 4 步返回如何处理
& &203 天前
获取微信 openid 都需要服务器端接口来完成，而跳转在 vue 使用 window.location.href="/access"，来完成； vue 端只需要获取到服务器传回的 openid 或者其他值来保存到本地，是否授权都是服务器来进行判断的
& &203 天前
@ 我打算让获取 code 的 window.location.href 里 redirect_uri 指向服务器后台，不再重定向到前台（而前端直接进入 index ），后台处理完成返回 token 到前端，这样减少一次前端重定向
& &203 天前
@ 如果后台能完成重定向那当然甚好，不过我们之前处理过，貌似不太好操作，遂放弃，希望你能成功！
& · & 1996 人在线 & 最高记录 3762 & · &
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.1 · 19ms · UTC 14:44 · PVG 22:44 · LAX 07:44 · JFK 10:44? Do have faith in what you're doing.怎样实现Vue微信项目按需授权登录
原创
 11:39:25
486
这次给大家带来怎样实现Vue按需授权登录，实现Vue微信项目按需授权登录的有哪些，下面就是实战案例，一起来看一下。项目采用Vue作为开发框架，用户浏览页面时有两种情况：一种是需要用户先登录之后才能继续浏览；另一种是用户无需登录即可随意浏览。在无需的页面中，可能包含需要用户信息的操作，此时就需要用户登录之后方能进行后续操作。因此，需要对授权登录策略进行区分。思路1.一般而言，我们为微信开发的H5页面，进入页面的时候就进行鉴权，要求用户登录之后才能继续浏览。但由于产品需求，这个项目我们需要对不同页面的鉴权策略进行划分，按照一般与特殊进行设计：2.一般情况，用户进入页面第一时间要求用户授权登录，按照常规的微信授权登录流程，登录之后，用户继续浏览。3.特殊情况，为无需用户登录的页面配置白名单，只要进入存在于白名单的，不进入检测用户登录的函数，直接渲染页面。对于用户未登录状态下进行的需要用户信息的操作，按照我目前的理解，即使是基于微信的静默授权，页面也必须重新刷新，无法做到真正无感授权并且继续用户的操作。因此我选择在前端层面给用户更友好的提示，让用户了解授权过程，缺点是前一次操作仅仅是触发授权登陆，授权登录后，用户需要再次进行操作。// routerRule.js
export default function routerRule (router, whiteList = []) {
// other codes...
router.beforeEach( (to, from, next ) =& {
// 因为授权登录涉及异步操作，因此使用promise，成功的回调中调用next函数
new Promise((resolve, rejects) =& {
if ( whiteListRouter.indexOf(to.path) !== -1 ) {
// 常规页面授权登录过程
if (hasToken()) {
// codes，获取用户信息并且跳转所需跳转的页面
// 判断用户是否已经进行微信授权
if (hasAuthed()) {
// 进行过微信授权之后，重定向回来的url中包含了微信的授权信息，可以将url上截取的参数发送到服务器，换取用户的token，随后进入上述有token时候的步骤
getWechatUserInfo().then(res =& {
// 用户尚未进行微信授权，则调用微信授权的方法，进行授权登录。
getWechatAuth()
}).then( res =& {
router.afterEach(( to, from ) =& {
wxShare({ title: to.meta.title, desc: to.meta.shareDesc, link: to.meta.shareLink, logo: to.meta.shareLogo})
}本项目是在用户初次进行微信绑定时，就将用户的微信信息与本站的用户信息进行的绑定，因此在获取用户微信授权信息后，就可以获取到用户的token，从而获取用户在本站的其他用户信息。在无需登录页面的进行需要权限的操作的处理根据上面的逻辑，进入白名单之后，整个函数已经被return掉，不会进入下面的鉴权过程。但是如果是在此种页面上进行需要权限的操作，那么就需要触发授权登录流程，并且在授权之后，要一并获取用户信息。// checkLogin.js
export function checkLogin({ redirectUrl, wxAuthLoading, wxAuthLoaded, callback } = {}) {
if (getToken()) {
callback && callback()
// 提示用户正在授权中
wxAuthLoading && wxAuthLoading()
getWechatAuth( redirectUrl || window.location.href ).then( res =& {
// 授权完毕，提示用户授权成功
wxAuthLoaded && wxAuthLoaded()
}同时，我们需要对路由白名单添加一些操作// routerRule.js
export default function routerRule (router, whiteList = []) {
// other codes...
router.beforeEach( (to, from, next ) =& {
// 因为授权登录涉及异步操作，因此使用promise，成功的回调中调用next函数
new Promise((resolve, rejects) =& {
if ( whiteListRouter.indexOf(to.path) !== -1 ) {
// 如果已经进行微信授权但是没有token值的，就调用以下函数获取token值
if ( !hasToken() && hasAuthed() ) {
getWechatUserInfo().then(res =& {
// 常规页面授权登录过程
if (hasToken()) {
// codes，获取用户信息并且跳转所需跳转的页面
// 判断用户是否已经进行微信授权
if (hasAuthed()) {
// 进行过微信授权之后，重定向回来的url中包含了微信的授权信息，可以将url上截取的参数发送到服务器，换取用户的token，随后进入上述有token时候的步骤
getWechatUserInfo().then(res =& {
// 用户尚未进行微信授权，则调用微信授权的方法，进行授权登录。
getWechatAuth()
}).then( res =& {
// other codes...
}坑点以及不完善的地方1.这个方案在用户授权之后，在路由跳转之前，一定要先获取用户信息，否则在url上的微信授权信息就会丢失，获取用户信息就会失败。2.这个方案的缺点在于，需要开发者对在免登陆页面的所有需权限操作都加上checkLogin判断。由于这种需权限的操作一般都是发送异步请求，所以如果不考虑减少不必要的异步请求的情况下，可以统一在请求的方法上设置拦截器，判断后端返回的code，如果返回的是用户未登录的code，就进行微信授权。这种做法开发过程比较方便，但是会在用户未登录情况下发送了一些不必要的请求给后端，感觉不太好。相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！推荐阅读：以上就是怎样实现Vue微信项目按需授权登录的详细内容，更多请关注php中文网其它相关文章！
江湖传言：PHP是世界上最好的编程语言。真的是这样吗？这个梗究竟是从哪来的？学会本课程，你就会明白了。
PHP中文网出品的PHP入门系统教学视频，完全从初学者的角度出发，绝不玩虚的，一切以实用、有用...
ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)－ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例，从最基本的框架常识开始，将...
《php.cn原创html5视频教程》课程特色：php中文网原创幽默段子系列课程，以恶搞，段子为主题风格的php视频教程！轻松的教学风格，简短的教学模式，让同学们在不知不觉中，学会了HTML知识。
本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。
所有计算机语言的学习都要从基础开始，《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术，是学习PHP必须掌握的内容，任何PHP项目的实现都离不开这部分的内容，通...
本课以最新版ThinkPHP5.0.10为基础进行开发，全程实录一个完整企业点，从后台到前台，从控制器到路由的全套完整教程，不论是你是新人，还是有一定开发经验的程序员，都可以从中学到实用的知识~~
ThinkPHP是一个快速、开源的轻量级国产PHP开发框架，是业内最流行的PHP框架之一。本课程以博客系统为例，讲述如何使用TP实战开发，从中学习Thinkphp的实践应用。模版下载地址：http:/...
本课程是php实战开发课程，以爱奇艺电影网站为蓝本从零开发一个自己的网站。目的是让大家了解真实项目的架构及开发过程
本课以一个极简的PHP开发框架为案例,向您展示了一个PHP框架应该具有的基本功能，以及具体的实现方法，让您快速对PHP开发框架的底层实现有一个清楚的认识,为以后学习其实的开发框架打下坚实的基础。
javascript是运行在浏览器上的脚本语言，连续多年，被评为全球最受欢迎的编程语言。是前端开发必备三大法器中，最具杀伤力。如果前端开发是降龙十八掌，好么javascript就是第18掌：亢龙有悔。...
本站9月直播课已经结束,本套教程是直播实录,没有报上名或者漏听学员福利来了，赶紧看看吧，说不定这里就有你的菜
轻松明快，简洁生动，让你快速走入HTML5的世界，体会语义化开发的魅力
JavaScript能够称得上是史上使用最广泛的编程语言，也是前端开发必须掌握的三技能之一：描述网页内容的HTML、描述网页样式的CSS以及描述网页行为的JavaScript。本章节将帮助大家迅速掌握...
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。为所有开发者、所有应用场景而设计,它让前端开发更快速、简单，所有开发者都能快速上手...
《php.cn独孤九贱（2）－css视频教程》课程特色：php中文网原创幽默段子系列课程，以恶搞，段子为主题风格的php视频教程！轻松的教学风格，简短的教学模式，让同学们在不知不觉中，学会了CSS知识...
《php用户注册登录系统》主要介绍网站的登录注册功能,我们会从最简单的实现登录注册功能开始，增加验证码，cookie验证等，丰富网站的登录注册功能
jQuery是一个快速、简洁的JavaScript框架。设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的...
《PHP学生管理系统视频教程》主要给大家讲解了HTML，PHP，MySQL之间的相互协作，实现动态的网页显示和获取数据.
《弹指间学会HTML视频教程》从最基本的概念开始讲起，步步深入，带领大家学习HTML,了解各种常用标签的意义以及基本用法，学习HTML知识为以后的学习打下基础
《最新微信小程序开发视频教程》本节课程是由微趋道录制，讲述了如何申请一个微信小程序，以及开发中需要使用哪些工具，和需要注意哪些等。
php中世界最好的语言
全栈工程师
文章总浏览数vue 单页应用中微信支付的坑
标签（空格分隔）： 微信 支付 坑 vue
在微信H5页面（使用 vue-router2 控制路由的 vue2 单页应用项目）中使用微信 jssdk 进行微信支付。
1.依据，使用微信功能的页面，必须进行微信 config，并在wx ready 之后再调用微信功能。
2.进行微信支付的话，需要在微信开放平台配置微信支付合法路径。该合法路径有层级限制，比如需要支付的页面的url为 https://example.com/redpacket/:problemid 的话，配置的合法路径需为 https://example.com/redpacket/。即允许最后一级是可变的参数。
通过 https://example.com/lesson/:lessonid 进入的 vue 根页面，之后点击某个链接进入了需要进行微信支付的 vue 子页面 https://example.com/lesson/redpacket/:redpacketid。
坑 支付路径不合法
坑1 苹果 vs 安卓
path: '/redpacket/:redpacketid',
name: 'redpacket',
component: Redpacket
微信确认支付合法路径的时候，。即 ios 认为合法路径的配置应该是 https://example.com/lesson/，而 Android 认为合法路径的配置应该是 https://example.com/lesson/redpacket/。 导致微信支付合法url认定不一致的问题。一种解决办法是就在微信开放平台设置两个合法路径，但是由于可配置合法路径只能最多5个，所以一个功能使用2个名额比较浪费。
参考上面链接中的介绍，微信会把 ? 后面的全给忽略掉，所以多长都不会占用路径层级了，所以尝试了把 path 改为
path: '/redpacket?/:redpacketid',
name: 'redpacket',
component: Redpacket
的方式，苹果和大部分安卓手机都没有问题了，但是发现华为 p9 p10依然有80%的几率失败。
所以为了苹果，必须把支付功能页面和根页面改为是同一层url：
path: '/redpacketqueryproblemid', // 参数改为通过query的方式获取
name: 'redpacket',
component: Redpacket
这样，只用配置一个合法路径就可以了： https://example.com/lesson/。
根据微信官方文档介绍
6.确保你获取用来签名的url是动态获取的，动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名，前端需要用js获取当前页面除去'#'hash部分的链接（可用location.href.split('#')[0]获取,而且需要encodeURIComponent），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。
我在根页面进行了 wx.config() 操作（因为需要调用jssdk禁用微信分享），在进入发红包页面的时候，又进行了 wx.config() 操作（因为需要调用jssdk微信支付）。但是在删掉在进入发红包页面的时候的 wx.config() 之后，发现 华为 p9 p10 不再发生支付失败，所有设备页都正常。所以不知道是官方文档写错了，还是我们又误解。总之，坑2 为 不能按照官方文档说的做，url变化了不要再次config。
阅读(...) 评论()weex+vuejs怎么接入微信支付接口_百度知道
weex+vuejs怎么接入微信支付接口
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
微信支付知道合伙人
微信智慧生活
知道合伙人
微信支付是集成在微信客户端的支付功能，向用户提供安全、快捷、高效的支付服务。
微信支付扫码支付接入流程1、注册帐号注册微信公众平台，选择帐号类型为服务号，填写相关资料并通过微信支付认证2、填写资料商户需提供以下3项资料：1. 经营类目以及对应经营资质2. 企业联系信息3. 企业银行账户等信息其他信息诸如企业法人信息、营业执照、组织机构代码证等将直接从微信公众号认证资料中获取，无需重新填写3、商户验证在资料提交后，微信支付会向您的结算账户中打一笔数额随机的验证款。待资料审核通过后，查收款项，登录微信商户平台，填写款项数额。数额正确即可通过验证4、签署协议验证通过后，在线签署线上协议5、售卖商品开发完成之后，即可上线产品进行售卖
为你推荐：
其他类似问题
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。}