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

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

概述

原文链接: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));
    }




Android 从网页中跳转到APP,从微信打开自己的app并打开指定页面

最近,在使用QQ和微信等SDK来实现分享网页的时候,发现,SDK已经为页面跳转回应用提供了基本的数据支持。我们只需在应用里和被分享的网页进行简单的设置,即可实现此功能。...
  • qiushi_1990
  • qiushi_1990
  • 2016年05月09日 18:33
  • 20236

微信网页授权登录

微信网页授权登录 日期:2016-11-14 作者:normanyang 功能:用于纪录微信网页授权步骤(前提条件:公众号为服务号,且通过认证) 微信网页授权api说明网址:https://mp.we...
  • u013091013
  • u013091013
  • 2016年11月14日 14:33
  • 6140

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

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

微信小程序的页面跳转

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

微信登陆无法拉起授权界面

最近几天做微信登陆,我们的登陆页面是H5写的,点击微信登陆按钮,调用安卓的javascript接口,进而调用微信SDK进行登陆,但是我的手机经常拉不起来授权界面,烦恼了好久,原来是自己疏忽大意造成的,...
  • super_mt
  • super_mt
  • 2016年03月27日 15:14
  • 8474

微信公众号网页授权 当scope为snsapi userinfo时出现空白页面

问题描述:      今天同事在调试微信公众号网页授权时,发现一个非常诡异的问题。当scope为snsapi base时,可以正常授权,当scope为snsapiuserinfo时,无法授权,出现空...
  • qq727013465
  • qq727013465
  • 2015年12月01日 19:22
  • 5560

微信公众号网页授权 当scope为snsapi userinfo时出现空白页面

问题描述:      今天同事在调试微信公众号网页授权时,发现一个非常诡异的问题。当scope为snsapi base时,可以正常授权,当scope为snsapiuserinfo时,无法授权,出...
  • qq_30632003
  • qq_30632003
  • 2016年10月21日 11:47
  • 2141

微信开发之微信网页授权 完整示例

所有微信开发的相关内容,都需要参考官方文档。 [微信公众平台|开发文档] http://mp.weixin.qq.com/wiki/home/。 一、通过网页授权,可以获取用户微信的基本信息。...
  • weixin_36050378
  • weixin_36050378
  • 2016年09月04日 22:17
  • 12301

微信授权登录-前后端分离

简介在前后端分离情况下实现微信服务号和订阅号授权登录,项目使用springboot+Vue前后端分离的开发模式。备注:目前只提供后端代码实现以及业务逻辑流程图服务号开发逻辑进入活动页面根据code和s...
  • u012682683
  • u012682683
  • 2017年10月11日 11:04
  • 1293

app直接跳转至微信公众号

微信沟通接口正式上线        用户可以在移动应用中,点击跳转到微信客户端内,进入公众号的会话界面或者资料页(用户已关注公众号时会进入会话界面,未关注则进入资料页),让用户更方便地关注公众号,与...
  • sun___shine
  • sun___shine
  • 2016年10月13日 16:09
  • 21499
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:微信开发:网页授权、跳转至网页
举报原因:
原因补充:

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