vue 授权获取微信openId操作

1、获取url中参数code; 根据code 获取openId;调用后台接口获取openId 。

参考文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842

function getUrlKey(name){//获取url 参数
 return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+/g,'%20'))||null;
 }

function getCodeApi(state){//获取code
 let urlNow=encodeURIComponent(window.location.href);
 let scope='snsapi_base'; //snsapi_userinfo //静默授权 用户无感知
 let appid='wx4cc5d5c123123123';
 let url=`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${urlNow}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`;
 window.location.replace(url);
}

//注意代码放置位置
export default {
 created(){
 let code=getUrlKey("code");//获取url参数code
 if(code){ //拿到code, code传递给后台接口换取opend
 getOpenIdApi(code).then(res=>{
   console.log(res);
  }).catch(res=>{})
 }else{
 getCodeApi("123");
 }
 }
}

补充知识:vue 微信公众号支付 jssdk jsapi实现微信支付(完整版)

是自己项目里支付功能测试成功后的代码参考,希望能帮助到曾和我一样想找到有效参考借鉴的朋友们,

废话不多说,直接讲具体的操作规程及完整代码

代码部份:

一、vue的环境配置:

1. 先在当前项目的命令行工具里安装npm install weixin-jsapi

2. 在当前支付页面引用该weixin-jsapi

import wx from 'weixin-jsapi'

二、调用后台接口,正式使用jssdk:

created(){
 this.userId = JSON.parse(Cookie.get("user")).id;//这是在我页面需要获取的userid,不需要的可自行删悼,不在支付代码范围
 this.getConfig();,
},
methods: {
 getConfig(){
 console.log(window.location.href);
 var url = window.location.href;
 this.$http.post('**此处写后台提供获取jsapi相关配置的接口**',{
  encodeUrl:Encrypt(url.split("#")[0]) //直接丢弃#及后面的字符串 注意这里Encrypt因为我的项目里使用了ase加密解密,所以这么写的
 })
 .then(function(response) {
  if(response.data.flag == true){
  var data = JSON.parse(Decrypt(response.data.data));//将解密后的字符串转为对象 Decrypt这里是解密,不需要的就直接过滤悼
  console.log(data);
  //下列的data.均为后台接口返回的字段,比如我的项里里返回的是 appid,timestamp,nonceStr,signature
  wx.config({
   debug: ture,//这里一般在测试阶段先用ture,等打包给后台的时候就改回false,
   appId: data.appid,
   timestamp: data.timestamp,
   nonceStr: data.noncestr,
   signature: data.signature,
   jsApiList: ['chooseWXPay']
  })
  wx.ready(function(){
   wx.checkJsApi({
   jsApiList: ['chooseWXPay'],
   success:function(res){
    console.log("seccess")
    console.log(res)
   },
   fail:function(res){
    console.log("fail");
    console.log(res)
   }
   })
  })
  }else{
  Toast({
   message: response.data.detailMsg
  });
  }
 }).catch(function(error){
  Toast({//提示引用的是mint-UI里toast
  message: '获取config失败,请重试'
  });
 });
 },
 //报名缴费 ( 支付按钮绑定@click="toapply()"事件)
 toapply(id){
 var $this = this;
 this.$http.post('**此处写后台提供的获取支付json数据接口**',{
  encodeStr:Encrypt(id)//项目里的加密
 })
 .then(function(response) {
  if(response.data.flag == true){
  var data = JSON.parse(Decrypt(response.data.data));//将解密后的字符串转为对象
  console.log(data);
  wx.ready(function(){
   wx.chooseWXPay({
   appId:data.appId,
   timestamp: data.timeStamp, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
   nonceStr: data.nonceStr, // 支付签名随机串,不长于 32
   package: data.package, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=\*\*\*)
   signType: data.signType, // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'
   paySign: data.paySign, // 支付签名
   success: function (res) {
    //跳转到支付成功页面有这个页面
    $this.$router.push({
    path: "/success_page",
    name:"success_page"
    })
    console.log(res);
   },
   cancel: function (res) {//提示引用的是mint-UI里toast
    Toast('已取消支付');
   },
   fail: function (res) {
    Toast('支付失败,请重试');
   }
   })
  })
  }else{
  Toast({
   message: '获取支付信息失败,请重试',
  });
  }
 }).catch(function(error){
  Toast({
  message: '获取订单信息失败,请重试',
  });
  console.log(error);
 });
 },
}

这里代码部份完成后,就支付测试看看提示,如若弹出以下提示说明签名是正确的

二、商户和公众号后台配置

1.先去商户号后台里配置url域名:商户平台–>产品中心–>开发配置

然后到微信公众号后台,公众号设置/功能设置里配置url域名

ps:这里要与商户后台里的配置域名同步

代码和配置都完成后,测试结果如下:

最后,讲讲我在支付过程中遇到的问题:

因为微信支付众所周知的测试麻烦,我是直接完成代码后打包给后台发布正式环境测试的,测试过程中一直出现以下的弹窗提示信息:

排除法,代码里的签名没有bug的情况下,还一直出现这个提示,那就只有一个问题,url路径配置,网上查了很多说url路径中不能带# ,说是需要把把路由的hash模式改为hostry模式,如下:

还说让后台也需要做去悼#相应的改动,按这个方法打包给后台测试 ,结果页面就出现404了,行不通,所以我是利用处理如下:

url.split("#")[0]直接丢弃#及后面的字符串

后台没有作#处理,后面就发现我们是商户后台没有配置url域名这个问题,是这里面的域名配置不能带有#, 配置好后台之后,测试就成功了,还别说,测试成功的那一刻,倍儿有成功感了

以上这篇vue 授权获取微信openId操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 详解Vue微信公众号开发踩坑全记录

    本文介绍了Vue微信公众号开发踩坑全记录,分享给大家,也给自己留个笔记. 需求 微信授权登录(基于公众号的登录方案) 接入JS-SDK实现图片上传,分享等功能 现状及难点 采用的Vue框架,前后端分离模式(vue工程仅作为客户端),用户通过域名访问的是客户端,但是微信授权中涉及签名和token校验依赖服务端 JS-SDK需要向服务端获取签名,且获取签名中需要的参数包括所在页面的url,但由于单页应用的路由特殊,其中涉及到IOS和android微信客户端浏览器内核的差异性导致的兼容问题 解决方案

  • VUE解决微信签名及SPA微信invalid signature问题(完美处理)

    前端小菜鸟,因为项目要对接微信的jssdk,对接就需要签名认证,但是无奈安卓和IOS各有各的坑,本篇文章只讨论签名,和一个分享的坑,希望大家有所收获,能够解决问题,如果解决不到,请麻烦在评论区留言,本文综合了所有的回答,才调试出来坑 需求: 使用微信的功能 原因: 1. 项目基于vue,在微信上的web应用 2. 要使用上传功能(不同系统的兼容真的很多BUG,最后只能使用微信方案),支付功能,定位.... 3. 签名一直存在bug和问题,那么后面的功能都会唤不起(偶尔也可以) 签名 1. 流程详

  • vue 微信授权登录解决方案

    背景 vue前后端分离开发微信授权 场景 app将商品分享到微信朋友圈或者分享给微信好友,用户点击页面时进行微信授权登陆,获取用户信息. 问题:没有固定的h5应用首页.授权后重定向url带参数并且很长 本人愚钝,开发过程中,尝试过很多方法,踩坑不足以形容我的心情,可以说每一次都是一次跳井的体验啊. 1.一开始是前端请求微信连接,返回code,然后code作为再去请求后台接口获取token,后面看到别人的博客说这个方法不好,最好就是直接请求后台接口,然后后台返回url做跳转,所以就采用了最传统的方

  • vue 授权获取微信openId操作

    1.获取url中参数code: 根据code 获取openId:调用后台接口获取openId . 参考文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842 function getUrlKey(name){//获取url 参数 return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(l

  • 微信h5静默和非静默授权获取用户openId的方法和步骤

    一.openId是什么? openId是用户在当前公众号下的唯一标识('身份证'),就是说通过这个openId,就能区分在这个公众号下具体是哪个用户. 二.openId有什么用? 假如用户A在当前公众号下购买了一件商品,用户的下单信息肯定要存储到后台数据库,那根据什么进行存储呢?openId是用户在当前公众号下的唯一标识,通过openId和用户的下单购买信息进行键值对的数据绑定.那么我要查询该用户购买过什么商品,就能够通过openId去查询,并且数据是唯一的,不会和另外的用户数据有冲突. 拓展:

  • Golang通过小程序获取微信openid的方法示例

    为什么要获取小程序的 openid 在开发微信小程序的过程中,小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系.那么这个用户身份标识就是 openid. 小程序获取 openid 的流程 那么小程序获取 openid 的流程具体如下,这里我简化了一下,因为我们只需要获取到 openid 即可,具体可以参考 这里 我们需要在小程序中调用 wx.login() 获取 code 码,然后将这个 code 码发送给后端,后端带着这个 code 码和 app

  • 微信小程序 获取微信OpenId详解及实例代码

    获取微信OpenId 先获取code 再通过code获取authtoken,从authtoken中取出openid给前台 微信端一定不要忘记设定网页账号中的授权回调页面域名 流程图如下 主要代码 页面js代码 /* 写cookie */ function setCookie(name, value) { var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000); doc

  • php获取微信openid方法总结

    使用微信接口,无论是自动登录还是微信支付我们首先需要获取的就是openid,获取openid的方式有两种,一种是在关注的时候进行获取,这种订阅号就可以获取的到,第二种是通过网页授权获取,这种获取需要的是认证服务号. 今天我要说的是第二种网页授权获取openid.下面是我写的一个关于获取openid的类 <?php /** * 微信授权相关接口 * * @link http://www.phpddt.com */ class Wchat { private $app_id = 'wx4444444

  • MVC微信网页授权获取用户OpenId

    最近开发微信公众平台,做下记录,以前也开发过,这次开发又给忘了,搞了半天,还是做个笔记为好. 注意框架为MVC 开发微信公众平台.场景为,在模板页中获取用户openid,想要进行验证的页面,集成模板页就可以了. 在_Layout.cshtml中加入如下代码 <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, ini

  • 在vue中获取微信支付code及code被占用问题的解决方法

    这个地方坑比较多,查看网上并没有详细的文档,新手一般写到这里很痛苦.这里我只介绍一下我解决的方案,虽然它不是最好的,但是可行的方案: 总体分两步 1)跳到微信支付链接,它会自动拼接上code 2)获取本网址,截取code: 在vue中哪里获取code? 在路由钩子函数beforeEach获取.(如果想了解beforeEach的用法,请关注我下一篇博客). 我们去请求微信网址"https://open.weixin.qq.com/connect/oauth2/authorize?appid=&qu

  • VueJs单页应用实现微信网页授权及微信分享功能示例

    在实际开发中,无论是做PC端.WebApp端还是微信公众号等类型的项目的时候,或多或少都会涉及到微信相关的开发,最近公司项目要求实现微信网页授权,并获取微信用户基本信息的功能及微信分享的功能,现在总算完成了,但开发过程中遇到好几个坑.废话不多说了,开始正题. 描述点 微信相关开发知识了解 怎么样实现微信相关功能本地测试 微信网页授权 微信分享 微信相关开发知识了解 微信公众号的appId,AppSecret 当我们注册一个微信公众号后,便能够得到一个appId(每个微信公众号只有一个,一个微信公

  • 微信小程序授权获取用户详细信息openid的实例详解

    小程序获取用户的头像昵称openid之类 第一种使用wx.getUserInfo直接获取微信头像,昵称 wx.getUserInfo({ success: function (res) { that.setData({ nickName: res.userInfo.nickName, avatarUrl: res.userInfo.avatarUrl, }) }, }) 第二种 我们在使用小程序wx.login API进行登录的时候,直接使用wx.getUserInfo是不能获取更多的信息的,如

  • vue移动端微信授权登录插件封装的实例

    1.新建wechatAuth.js文件 const queryString = require('query-string') //应用授权作用域,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),snsapi_userinfo (弹出授权页面,可通过openid拿到昵称.性别.所在地.并且,即使在未关注的情况下,只要用户授权,也能获取其信息) const SCOPES = ['snsapi_base', 'snsapi_userinfo'] class VueWe

随机推荐