微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解

微信公众号开发 自定义菜单

请先读完本文再进行配置开发

请先前往微信平台开发者文档阅读“网页授权获取用户基本信息”的接口说明

在微信公众账号开发中,往往有定义一个菜单,然后用户点击该菜单就进入用户个人中心的功能,通常应用于各个公众账号中的会员服务。

如何在微信自定义菜单中将用户导航到个人中心页面呢?

首选需要通过用户点击获取用户openid,而通过用户的点击跳转获取用户openid就必须在菜单中动态绑定用户的openid,或者在菜单的跳转URL中填写微信提供的链接,官方给了两个链接类型

一种是Scope为snsapi_base的链接

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx520c15f417810387&redirect_uri=https%3A%2F%2Fchong.qq.com%2Fphp%2Findex.php%3Fd%3D%26c%3DwxAdapter%26m%3DmobileDeal%26showwxpaytitle%3D1%26vb2ctag%3D4_2030_5_1194_60&response_type=code&scope=snsapi_base&state=123#wechat_redirect

另一种是Scope为snsapi_userinfo的链接

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf0e81c3bee622d60&redirect_uri=http%3A%2F%2Fnba.bluewebgame.com%2Foauth_response.php&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

这两种链接的区别如下

应用授权作用域,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且,即使在未关注的情况下,只要用户授权,也能获取其信息)

网上很多说法是将链接的url直接作为微信自定义菜单中view类型中的url(在填写是url时需要配置网页授权回调域名和appid),本人试了一下这种做法然而不能成功

{ "type":"view", "name":"会员中心", "url":"https://open.weixin.qq.com/connect/oauth2/authorize?appid=你的appid&redirect_uri=你配置接收微信认证的地址?response_type=code&scope=snsapi_base&state=1#wechat_redirect" },

返回结果是创建菜单失败

创建菜单失败 errcode:{40033} errmsg:{invalid charset. please check your request, if include \uxxxx will create fail! hint: [91..gA0792vr23]}

我试了一下将后面的地址进行urlEncode,还是同样的错误。

后来我想了一个办法

在自定义菜单中填写自己的url,在填写的url中将用户重定向到snsapi_base的url中,然后再在snsapi_base中配置获取用户openid以及用户其他信息,最后跳转到一个页面,也就是通常的会员中心页面。

流程如下

请看代码

{ "type":"view",

"name":"会员中心",

"url":"http://配置的网址/redirect"}

其中通过url将用户跳转到

http://配置的网址/redirect

然后在处理方法中调用一次重定向即可

//类上的配置
@Controller
@RequestMapping("/wechat")
public class WeChatController{
  @RequestMapping(value = "/redirect", method = RequestMethod.GET)
  public String weixinRedirect(HttpServletRequest request, HttpServletResponse response) {
    return "redirect:https://open.weixin.qq.com/connect/oauth2/authorize?appid=你的appid&redirect_uri=你的服务器处理地址?response_type=code&scope=snsapi_base&state=1&connect_redirect=1#wechat_redirect";
    }
}

服务器会将微信认证 跳转到你的服务器处理地址,也就是上面

redirect_uri=你的服务器处理地址中的地址

这里配置为

你的服务器地址/oauth

代码如下

@RequestMapping(value = "/oauth", method = RequestMethod.GET)
  public String weixinOAuth(HttpServletRequest request, HttpServletResponse response, Model model) {
    //得到code
    String CODE = request.getParameter("code");
    String APPID = "你的APPID";
    String SECRET = "你的SECRET";
    //换取access_token 其中包含了openid
    String URL = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code".replace("APPID", APPID).replace("SECRET", SECRET).replace("CODE", CODE);
    //URLConnectionHelper是一个模拟发送http请求的类
    String jsonStr = URLConnectionHelper.sendGet(URL);
    //System.out.println(jsonStr);
    //out.print(jsonStr);
    JSONObject jsonObj = new JSONObject(jsonStr);
    String openid = jsonObj.get("openid").toString();
    //有了用户的opendi就可以的到用户的信息了
    //地址为https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN
    //得到用户信息之后返回到一个页面
    model.addAttribute("user", wechatUser);
    return "vip/userInfo";
  }

效果如下

而且这种方式当用户用其他浏览器打开时,会出错,保证了只能在微信中使用,保障了安全性。而且地址栏不会有其他用户个人信息的暴露。

如有疑问,可以查看官网,谢谢大家的阅读,希望能帮助到大家,谢谢大家对本站的支持!

时间: 2016-12-07

微信公众号-获取用户信息(网页授权获取)实现步骤

根据微信公众号开发官方文档: 获取用户信息步骤如下: 1 第一步:用户同意授权,获取code 2 第二步:通过code换取网页授权access_token 3 第三步:刷新access_token(如果需要) 4 第四步:拉取用户信息(需scope为 snsapi_userinfo) 1 获取code 在确保微信公众账号拥有授权作用域(scope参数)的权限的前提下(服务号获得高级接口后,默认拥有scope参数中的snsapi_base和snsapi_userinfo),引导关注者打开如下页面:

微信公众号 提示:Unauthorized API function 问题解决方法

微信公众号 Unauthorized API function 调用api的返回结果如下: 200 OK Connection: keep-alive Date: Wed, 15 Oct 2014 09:00:17 GMT Server: nginx/1.4.4 Content-Type: application/json; encoding=utf-8 Content-Length: 45 { "errcode": 48001, "errmsg": "a

微信公众号 摇一摇周边功能开发

①申请开通摇一摇功能 申请开通摇一摇周边功能.成功提交申请请求后,工作人员会在三个工作日内完成审核.若审核不通过,可以重新提交申请请求.若是审核中,请耐心等待工作人员审核,在审核中状态不能再提交申请请求. 接口代码如下: http请求方式: POST(请使用https协议)https://api.weixin.qq.com/shakearound/account/register?access_token=ACCESS_TOKENPOST数据格式:json POST数据例子: { "name&q

微信公众号开发 实现点击返回按钮就返回到聊天界面

话不多说,请看代码 pushHistory(); function pushHistory() { var state = { title: "title", url: "#" }; window.history.pushState(state, "title", "#"); } if (typeof window.addEventListener != "undefined") { window.addE

微信公众号开发客服接口实例代码

最近,开发微信公众号,负责开发客服功能,这里简单记录下: Kf_account.cs代码: public partial class Kf_account : Form { private readonly DataTable adt_user = new DataTable(); private readonly string as_INIFile = Application.StartupPath + "\\user.ini"; public Kf_account() { Bind

.NET微信公众号获取OpenID和用户信息

本文实例为大家分享了微信公众平台实现获取用户OpenID的方法,供大家参考,具体内容如下 Index.aspx.cs代码: public partial class Index : System.Web.UI.Page { //用户id public string openid = ""; //公众号信息部分 public string appid = ConfigurationManager.AppSettings["AppId"]; public string

php微信公众号开发模式详解

学习步骤:分四章来讲述这部分内容,下面是每章的大致内容. 1.了解开发模式与编辑模式,开发前的一些准备. 2.开发模式用户.微信服务器.个人服务器是如何交互的.什么是接口. 3.各种接口功能的调用与实现. 4.js-SDK的调用 微信公众号开发两种模式:编辑模式和开发模式.编辑模式比较简单,你不需要操作任何的代码,只需要借助微信提供的功能来管理自己的微信公众号.这种方式开发的页面比较简单,主要用来实现文章的推送等功能.开发者模式则能通过自己的后台服务器与微信关注用户实现更多的交互作用,调用微信的

php微信公众号js-sdk开发应用

测试js的接口功能,我用的是BAE服务器不是SAE服务器.SAE服务器不能写入文件,测试会出问题. 什么叫js-sdk,我先演示js-sdk接口的具体作用. 我在微信随便打开一片推送文章如下图: 点开第一篇文章 上面就是我们的连接文章,如果我们把这篇文章发送给朋友,显示效果如下图: 分享到朋友圈我们再来看看效果: 为什么同样是文章连接,在公众号.发送给朋友.发送到朋友圈显示的界面效果不一样.公众号的显示效果是因为微信公众帐号在推送的时候调用了微信的消息接口,而后两者是因为页面调用js-sdk相关

java微信公众号开发案例

微信公众号开发一般是针对企业和组织的,个人一般只能申请订阅号,并且调用的接口有限,下面我们就来简单的描述下接入公众号的步骤: 1.首先你需要一个邮箱在微信公众号平台进行注册:      注册的方式有订阅号.公众号.小程序和企业号,个人我们这里只能选择订阅号 2.注册完后,我们登录到公众号平台--->开发--->基本配置,这里需要填写URL和token,URL就是我们使用服务器的接口: 3.Java Web服务器程序编译好且在服务器上部署可以运行的话,可在微信公众号进行在线接口调试: 1).选择

微信公众号支付H5调用支付解析

最近项目需要微信支付,然后看了下微信公众号支付,虽然不难,但是细节还是需要注意的,用了大半天时间写了个demo,并且完整的测试了一下支付流程,下面分享一下微信公众号支付的经验. 一.配置公众号微信支付   需要我们配置微信公众号支付地址和测试白名单. 比如:支付JS页面的地址为 http://www.xxx.com/shop/pay/             那此处配置www.xxx.com/shop/pay/ 二.开发流程 借用微信公众号支付api(地址 http://pay.weixin.q

微信公众号被动消息回复原理解析

背景:某分厂需要实时查询工件堆放的位置,要求快速便捷,因此设计了采用微信公众号被动回复信息的方案. 技术实现:开发者服务器--基于Angular2框架的已发布网站,编程语言为Python,后台存储数据库为Mysql: 微信服务器--微信公众号,此业务只是处理微信客户端发送的文本信息,且不使用公众号的其他功能,因此不需要认证公众号: 微信客户端--关注公众号的微信使用者,即粉丝. 当粉丝给公众号发送特定的消息时,微信公众号自动回复相应内容,而其背后的实现原理可由下图所示: 由上图可知,粉丝(微信客

微信支付H5调用支付详解(java版)

最近项目需要微信支付,然后看了下微信公众号支付,,虽然不难,但是细节还是需要注意的,用了大半天时间写了个demo,并且完整的测试了一下支付流程,下面分享一下微信公众号支付的经验. 一.配置公众号微信支付  需要我们配置微信公众号支付地址和测试白名单. 比如:支付JS页面的地址为 http://www.xxx.com/shop/pay/ 那此处配置www.xxx.com/shop/pay/ 二.开发流程 借用微信公众号支付api(地址 http://pay.weixin.qq.com/wiki/d

php版微信公众号接口实现发红包的方法

本文实例讲述了php版微信公众号接口实现发红包的方法.分享给大家供大家参考,具体如下: 最近接到一个任务,需要用微信来给用户自动发红包.要完成这个任务需要这么已经一些物料 微信商户号,已申请微信支付 微信商户号主体下面的微信公众号 先看一下效果图 只需要完成后面几步就可以了. 在微信公众号服务器上面调用红包代码 /* **微信红包功能 */ public function sendredpack(){ $re_openid = $this->_pg('re_openid'); $inputObj

微信公众号H5支付接口调用方法

本文实例为大家分享了 微信内H5调用支付接口的具体代码,供大家参考,具体内容如下 官方文档地址 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>微信公众号H5接口调用</title> <script src='./js/md5.js'></script> </head>

.NET Core之微信支付之公众号、H5支付详解

前言 本篇主要记录微信支付中公众号及H5支付全过程. 准备篇 公众号或者服务号(并开通微信支付功能).商户平台中开通JSAPI支付.H5支付. 配置篇 公众号或者服务号中 -------开发-------开发者工具---------web开发者工具-------绑定为开发者 公众号或者服务号中 -------公众号设置--------功能设置   :填写业务域名.JS安全域名.网页授权域名 示例:pay.one.com 商户平台中--------产品中心-------开发配置------JSAP

微信公众号支付之坑:调用支付jsapi缺少参数 timeStamp等错误解决方法

这段时间一直比较忙,一忙起来真感觉自己就只是一台挣钱的机器了(说的好像能挣到多少钱似的,呵呵):这会儿难得有点儿空闲时间,想把前段时间开发微信公众号支付遇到问题及解决方法跟大家分享下,这些"暗坑"能不掉就不掉吧,要不然关键时刻出问题,真是让人急的焦头烂额. 双12客户的商城活动正在蓄势进行中,却有用户频频反馈说:支付不了,有问题,并截图如下: 当时问题感觉很奇怪,自己测试多次都ok啊,问题来了都赶紧解决吧,最终找到解决办法: 原因是程序中一个字符串变量被错误的设置为数字类型,解决方法很

nodejs微信公众号支付开发

odeJs 微信公众号功能开发,移动端 H5页面调用微信的支付功能.这几天根据公司的需要使用 node 和 h5页面调用微信的支付功能完成支付需求.现在把开发过程重新捋一遍,以帮助更多的开发者顺利的完成微信支付功能的开发.(微信暂时还没有提供 node 的支付功能) 一.请求CODE 请求 code 的目的就是获取用户的 openid(用户相对于当前公众号的唯一标识) 和access_token,请求的API:https://open.weixin.qq.com/connect/oauth2/a

java开发微信公众号支付

最近做了微信公众号支付的开发,由于是第一次做也摸索了几天的时间,也只是达到了实现功能的水平,并没有太多考虑到性能问题,所以这篇文章比较适合初学者. 微信公众号支付的总体其实很简单,大致就分为三步.第一步需要获取用户授权:第二步调用统一下单接口获取预支付id:第三步H5调起微信支付的内置的js.下面介绍具体每一步的开发流程. 一    首先要明确微信公众号支付属于网页版支付,所以相较于app的直接调取微信支付要多一步微信授权.也就是需要获取用户的openid.微信公众号使用的交易类型是JSAPI,

微信公众号支付(MVC版本)

一.获取微信支付 MCHID,KEY,APPID,APPSecret 四个支付关键值. 微信支付商户平台 https://pay.weixin.qq.com/index.php/core/home/login?return_url=%2F   1.登录微信支付商户平台获取到商户号(MCHID),   2.在"账号中心"栏目下"API安全"栏目里设置API密钥(KEY) 微信公众号: https://mp.weixin.qq.com/      1.登录微信公众在&q