微信开发:网页授权、跳转至网页

翻译 2017年06月01日 10:30:12

个人github:https://github.com/qiilee  欢迎star

概述

原文链接:http://blog.csdn.net/u011506468/article/details/47305261 
微信参考:http://mp.weixin.qq.com/wiki/17/c0f37d5704f0b64713d5d2c37b468d75.html 
思路:此篇主要介绍如何在点击微信的菜单后获得用户的信息并跳转至该网页。 
网页授权分为四步: 
1. 引导用户进入授权页面同意授权,获取code 
2. 通过code换取网页授权access_token(与基础支持中的access_token不同) 
3. 如果需要,开发者可以刷新网页授权access_token,避免过期 
4. 通过网页授权access_token和openid获取用户基本信息(支持UnionID机制)

配置授权回调域名

如果用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑。所以第一步是配置域名,在微信公众号的公众号设置中可以配置,域名是需要备案的。

获取code

接口请求为:https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 
redirect_uri为请求后重定向地址,也就是你要跳转至的网页地址,state为重定向后的参数。 
scope的区别说明,有2种授权方式,根据自己的需要进行处理:

  • scope为snsapi_base,静默授权并自动跳转到回调页的。用户感知的就是直接进入了回调页(往往是业务页面)
  • scope为snsapi_userinfo,这种授权需要用户手动同意,并且由于用户同意过,所以无须关注,就可在授权后获取该用户的基本信息

获取网页授权的access_token

获取code后,请求以下链接获取access_token,code为上一步得到的code: 
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

代码说明

新用户进来的时候是没有cookie的,而且type=2,首先是要授权,授权的代码在下面。这个时候可以给其设置一个cookie,设置存活时间为10小时。授权完成后,还是会重定向进入这个方法来处理,只是type变化,这个时候进入测试或者正式环境,根据参数menuType进行判断是哪个目录被点击,然后进入相对应的页面。若cookie不为空,则直接跳转测试或者正式环境相对应的页面。


/**
     * 
     * @param type 0-测试, 1-正式, 2-跳转获取CODE,3:认证过的测试号
     * @param menuType
     * @param request
     * @param wechatUserId
     * @param response
     * @return
     */
    @RequestMapping("/view")
    public ModelAndView view(Integer type,Integer menuType, Integer wechatUserId, String redirect,HttpServletRequest request, HttpServletResponse response) 
    {
        Cookie cookie = CookieUtil.getCookieByName(request, "wechatUserId");
        log.info("type:" + type + ",menuType:" + menuType + ",wechatUserId:" + wechatUserId + ",redirect:" + redirect);

        String url  = null;
        if(cookie == null)
        {
            log.info("Cookie已过期.....");
            if(type == 0)
            {
                CookieUtil.addCookie(response, "wechatUserId", Randoms.getInt(1, 53)+"", 60 * 10);       /* 测试环境 */
                url = "view?format=json&type=0&menuType=" + menuType + "&redirect=" + redirect;
                log.info("url:" + url);
                return new ModelAndView(new RedirectView(url));
            }
            else if(type == 1)
            {
                CookieUtil.addCookie(response, "wechatUserId", wechatUserId+"", (60 * 60 * 10)); 
                /* 生产环境 */
                url = "view?format=json&type=1&menuType=" + menuType  + "&redirect=" + redirect;
                log.info("url:" + url);
                return new ModelAndView(new RedirectView(url));
            }
            else if(type == 2)
            {
                String wechatRedirece = UrlUtil.encode(wechatConfig.getHOST() + "wechat/user/auth?format=json&type=1&menuType=" + menuType + "&redirect=" + redirect);
                /**
                 * 授权的链接 
                 * 注意redirect_uri为重定向地址,/auth在下面的代码中
                 * public String getAUTHORIZE_URL() {
                 * return "https://open.weixin.qq.com/connect/oauth2/authorize?appid="+getAPPID() +"&redirect_uri=";
    }
                 */ 
                url = wechatConfig.getAUTHORIZE_URL() + wechatRedirece + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
                log.info("url:" + url);
                return new ModelAndView(new RedirectView(url));
            }
            else
            {
                return new ModelAndView(new RedirectView(url));
            }
        }
        else
        {
            log.info("Cookie未过期.....");
            if(type == 0)
            {
                switch (menuType) 
                {
                    case 0:
                        url = AESCryptoSecurity.decrypt(redirect, wechatConfig.getAPPID());
                        break;
                    case 1:
                        //社区
                        url = wechatConfig.getHOST_FRONT() + "page/topicList.html";
                        break;
                    case 2:
                        //活动
                        url = wechatConfig.getHOST_FRONT() + "page/activityList.html";
                        break;
                }
            }
            else
            {
                    switch (menuType) 
                    {
                        case 0:
                            url = AESCryptoSecurity.decrypt(redirect, wechatConfig.getAPPID());
                            break;
                        case 1:
                            //社区
                            url = wechatConfig.getHOST_FRONT() + "page/topicList.html";
                            break;
                        case 2:
                            //活动
                            url = wechatConfig.getHOST_FRONT() + "page/activityList.html";
                            break;
                    }
            }
            return new ModelAndView(new RedirectView(url));
        }
    }

下面的代码为获取code,获取access_token,获取用户信息等,认证完跳转至对应的页面

@RequestMapping("/auth")
    public ModelAndView auth(String code, Integer type, Integer menuType, String redirect) throws Exception
    {
        log.info("code:" + code + ",type:" + type + ",menuType:" + menuType);
        /* 向微信发请求获取access_token */
        Map<String, Object> map = wechatUserService.getPageAccessToken(code);
        /* 向微信发请求,用access_token获取用户信息并保存 */
        WechatUser pageWechatUser = wechatUserService.getPageWechatUser(map.get("access_token").toString(), map.get("openid").toString());
        String url  = null;
        if(type == 1)
        {
            /* 权限认证完成后,将type改为1或者0,重定向进入上面的方法进行页面跳转 */
            url = wechatConfig.getHOST() + "wechat/menu/view?&type=1&menuType=" + menuType + "&wechatUserId=" + pageWechatUser.getWechatId() + "&redirect=" + redirect;
            log.info("url:" + url);
        }
        return new ModelAndView(new RedirectView(url));
    }




跳转到微信公众号主页,关注页面

想要跳转到微信公众号的主页或者关注页面首先先知道对应链接 1、微信进入公众号查看消息记录,复制链接,这个页面是个关注页面,具体链接如下: https://mp.weixin.qq.com/mp/pro...
  • xiao_bai8
  • xiao_bai8
  • 2017-02-17 10:12:39
  • 20130

微信公众号OAuth 点击菜单按钮 跳转页面授权 获取openid

流程: 用户点击菜单按钮 —–> 发送页面授权请求到微信后台 —–>得到code发送到 我们服务器后台的url —–> 将code参数发送到微信后台获取用户的openid返回服务器上的页面(...
  • sinat_15114467
  • sinat_15114467
  • 2016-02-04 15:33:05
  • 6569

网站获取微信授权登录功能

网站获取微信授权登录功能
  • john1337
  • john1337
  • 2017-04-20 15:46:34
  • 11263

|- 微信 -| 网页授权登录

微信:网页授权登录 微信公众平台技术文档之微信网页授权:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842 由于本人也是...
  • QAC_Boy
  • QAC_Boy
  • 2017-07-02 23:05:08
  • 3927

微信小程序的页面跳转和参数传递 —— 微信小程序教程系列(6)

页面跳转可以使用微信小程序提交的api :wx.navigeteTo
  • michael_ouyang
  • michael_ouyang
  • 2017-02-09 13:01:33
  • 26777

微信小程序的页面跳转

小程序页面的跳转: 先创建页面toolbar,并在app.json里面pages写上路径   "pages":[     "pages/index/index",     "pages/log...
  • koubi1234
  • koubi1234
  • 2017-01-09 13:19:02
  • 2627

微信公众号开发--自定义菜单跳转页面并获取用户信息(续)

自定义菜单获取用户信息详细介绍以及苹果设备的空指针异常处理
  • frankcheng5143
  • frankcheng5143
  • 2016-10-19 14:06:35
  • 16288

微信公众号获取用户信息已经菜单栏跳转指定页面

####本文仅作者本身笔记使用,外人看很混乱,有需要的可联系我####### 菜单栏点击按钮,在按钮设置跳转的路径是可以直接写路径,但是这样只能直接跳转,不能带任何参数,如果想带参数,可以通...
  • u010271952
  • u010271952
  • 2017-11-23 15:58:17
  • 2864

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

请先读完本文再进行配置开发 请先前往微信平台开发者文档阅读“网页授权获取用户基本信息”的接口说明在微信公众账号开发中,往往有定义一个菜单,然后用户点击该菜单就进入用户个人中心的功能,通常应用于各个公...
  • frankcheng5143
  • frankcheng5143
  • 2015-11-24 00:20:50
  • 44353

[039] 微信公众帐号开发教程第15篇-自定义菜单的view类型(访问网页)

引言及内容概要 距离写上一篇文章《自定义菜单的创建及菜单事件响应》整整过了两个月的时间,那时公众平台还没有开放view类型的菜单。在不久前,微信公众平台悄悄开放了view类型的菜单,却没有在首页发布任...
  • lyq8479
  • lyq8479
  • 2013-10-11 00:32:51
  • 117235
收藏助手
不良信息举报
您举报文章:微信开发:网页授权、跳转至网页
举报原因:
原因补充:

(最多只允许输入30个字)