微信网页受权

时间 2019-12-07

标签微信网页受权栏目 HTML 繁體版

原文原文链接

　　1、问题　　javascript

　　有时候，在微信客户端外点击一个连接：html

　　1.会提示此连接必须在微信客户端访问，这是为何呢？前端

　　2.在微信客户端中访问第三方网页，为何会出现一个页面，上面要获取你的我的信息，让你肯定后才能进入呢？java

　　2、解答这两个问题以前，咱们先了解一点微信开发的规范。（此处参看微信公众平台开发文档）　android

　　为了识别用户，每一个用户针对每一个公众号会产生一个安全的OpenID，若是须要在多公众号、移动应用之间作用户共通，则需前往微信开放平台，将这些公众号和应用绑定到一个开放平台帐号下，绑定后，一个用户虽然对多个公众号和应用有多个不一样的OpenID，但他对全部这些同一开放平台帐号下的公众号和应用，只有一个UnionID，能够在用户管理-获取用户基本信息（UnionID机制）文档了解详情。ios

　　关于网页受权回调域名的说明后端

　　一、在微信公众号请求用户网页受权以前，开发者须要先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页账号 - 网页受权获取用户基本信息”的配置选项中，修改受权回调域名。请注意，这里填写的是域名（是一个字符串），而不是URL，所以请勿加 http:// 等协议头； api

　　二、受权回调域名配置规范为全域名，好比须要网页受权的域名为：www.qq.com，配置之后此域名下面的页面http://www.qq.com/music.html 、 http://www.qq.com/login.html 均可以进行OAuth2.0鉴权。但http://pay.qq.com 、 http://music.qq.com 、 http://qq.com没法进行OAuth2.0鉴权浏览器

　　三、若是公众号登陆受权给了第三方开发者来进行管理，则没必要作任何设置，由第三方代替公众号实现网页受权便可安全

　　关于网页受权的两种scope的区别说明

　　一、以snsapi_base为scope发起的网页受权，是用来获取进入页面的用户的openid的，而且是静默受权并自动跳转到回调页的。用户感知的就是直接进入了回调页（每每是业务页面）

　　二、以snsapi_userinfo为scope发起的网页受权，是用来获取用户的基本信息的。但这种受权须要用户手动赞成，而且因为用户赞成过，因此无须关注，就可在受权后获取该用户的基本信息。

　　三、用户管理类接口中的“获取用户基本信息接口”，是在用户和公众号产生消息交互或关注后事件推送后，才能根据用户OpenID来获取用户基本信息。这个接口，包括其余微信接口，都是须要该用户（即openid）关注了公众号后，才能调用成功的。

　　关于网页受权access_token和普通access_token的区别

　　一、微信网页受权是经过OAuth2.0机制实现的，在用户受权给公众号后，公众号能够获取到一个网页受权特有的接口调用凭证（网页受权access_token），经过网页受权access_token能够进行受权后接口调用，如获取用户基本信息；

　　二、其余微信接口，须要经过基础支持中的“获取access_token”接口来获取到的普通access_token调用。

　　关于UnionID机制

　　一、请注意，网页受权获取用户基本信息也遵循UnionID机制。即若是开发者有在多个公众号，或在公众号、移动应用之间统一用户账号的需求，须要前往微信开放平台（open.weixin.qq.com）绑定公众号后，才可利用UnionID机制来知足上述需求。

　　二、UnionID机制的做用说明：若是开发者拥有多个移动应用、网站应用和公众账号，可经过获取用户基本信息中的unionid来区分用户的惟一性，由于同一用户，对同一个微信开放平台下的不一样应用（移动应用、网站应用和公众账号），unionid是相同的。

　　关于特殊场景下的静默受权

　　一、上面已经提到，对于以snsapi_base为scope的网页受权，就静默受权的，用户无感知；

　　二、对于已关注公众号的用户，若是用户从公众号的会话或者自定义菜单进入本公众号的网页受权页，即便是scope为snsapi_userinfo，也是静默受权，用户无感知。

　　3、问题解答

　　问题一：

　　言归正传，首先解答下第一个问题，很简单，由于开发的时候，我们都会知道，开发的是否是微信端页面（哈哈）。要求在微信里打开的，可能须要获取微信头像，所在地区等参数。若是在浏览器里面直接打开的话，这些参数获取不到，可能后面的程序就无法往下执行，因此要求用微信客户端打开。

　　是否是微信客户端打开，就是判断打开连接的浏览器是什么的呗，这里只须要用js判断一下就好了，下面是代码，顺带赠送，安卓和ios客户端的判断，网上一搜也是一大把。

    //判断是否为微信
    function Is_WeiXin() {
        var ua = window.navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) == 'micromessenger') {
            return true;
        } else {
            return false;
        }
    }

    //判断是否为安卓
    function Is_Android() {
        var u = navigator.userAgent;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
        return isAndroid;
    }

    //判断是否为IOS
    function Is_Ios() {
        var u = navigator.userAgent;
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        return isiOS;
    }

    if (IsWeiXin) {
            document.getElementById("message").className = "flxed";
        } else {
            if (IsAndroid || IsIos) {
                if (IsAndroid) {
                    self.location.href =Url_Android;
                    return;
                }
                if (IsIos) {
                    self.location.href = Url_Ios;
                    return;
                }
            } else {
                alert("咱们暂时没有可供您设备运行的版本，感谢您的支持！");
                return;
            }
        }

　　问题二：

　　关于这个问题，这就涉及到微信网页受权，若是你一直不理解，我建议，你把我上面的标题二，认真多读个几遍，书读百遍其义自见，一点都不假，关键你得用心读下去，或者看开发文档（https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842），拿走不谢。

　　具体而言，网页受权流程分为四步：

　　一、引导用户进入受权页面赞成受权，获取code

　　二、经过code换取网页受权access_token（与基础支持中的access_token不一样）

　　三、若是须要，开发者能够刷新网页受权access_token，避免过时

　　四、经过网页受权access_token和openid获取用户基本信息（支持UnionID机制）

　　第一步：用户赞成受权，获取code

　　下图为scope等于snsapi_userinfo时的受权页面：

　　用户赞成受权后，若是用户赞成受权，页面将跳转至 redirect_uri/?code=CODE&state=STATE。

　　code说明： code做为换取access_token的票据，每次用户受权带上的code将不同，code只能使用一次，5分钟未被使用自动过时。

　　第二步：经过code换取网页受权access_token

　　首先请注意，这里经过code换取的是一个特殊的网页受权access_token,与基础支持中的access_token（该access_token用于调用其余接口）不一样。公众号可经过下述接口来获取网页受权access_token。若是网页受权的做用域为snsapi_base，则本步骤中获取到网页受权access_token的同时，也获取到了openid（用户的惟一标识），snsapi_base式的网页受权流程即到此为止。

尤为注意：因为公众号的secret和获取到的access_token安全级别都很是高，必须只保存在服务器，不容许传给客户端。后续刷新access_token、经过access_token获取用户信息等步骤，也必须从服务器发起。

请求方法
获取code后，请求如下连接获取access_token：  https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code 

正确时返回的JSON数据包以下：
{ "access_token":"ACCESS_TOKEN",    
 "expires_in":7200,    
 "refresh_token":"REFRESH_TOKEN",    
 "openid":"OPENID",    
 "scope":"SCOPE" } 

错误时微信会返回JSON数据包以下（示例为Code无效错误）:
{"errcode":40029,"errmsg":"invalid code"}

　　第三步：刷新access_token（若是须要）

　　因为access_token拥有较短的有效期，当access_token超时后，可使用refresh_token进行刷新，refresh_token有效期为30天，当refresh_token失效以后，须要用户从新受权。

请求方法
获取第二步的refresh_token后，请求如下连接获取access_token：  
https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN 

正确时返回的JSON数据包以下：
{ "access_token":"ACCESS_TOKEN",  
 "expires_in":7200,   
 "refresh_token":"REFRESH_TOKEN",   
 "openid":"OPENID",   
 "scope":"SCOPE" }

　　第四步：拉取用户信息(需scope为 snsapi_userinfo)

　　若是网页受权做用域为snsapi_userinfo，则此时开发者能够经过access_token和openid拉取用户信息了。

请求方法
http：GET（请使用https协议） https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN 

附：检验受权凭证（access_token）是否有效
请求方法
http：GET（请使用https协议） https://api.weixin.qq.com/sns/auth?access_token=ACCESS_TOKEN&openid=OPENID

　　以上说了这么多，小结一下，如下逻辑，认为是用户首次登录。

　　第一步：点击url连接，判断用户是否登陆（方法：根据查找本地是否有基础的access_token）

　　第二步：若是查到基础的access_token（一个凭证），则已经登陆，就跳转到相应的页面

　　　　　　若是没有找到token，则没有登陆过。

　　第三步：没有登陆过：

　　　　　　1. 受权，拉取微信code，（方法：问题二的第一步）

　　　　　　2.截取到code，调接口，将code返回给后端。

　　　　　　3.后端拿到code，换取特殊的网页受权access_token（问题二的第二步，本步骤中获取到网页受权access_token的同时，也获取到了openid（用户的惟一标识），问题二的第三步和第四步都可执行）

　　　　　　4.后端根据openId，判断此用户是否在用户系统（便是否注册过）

　　　　　　　　a、在用户系统。返回给前端基础的access_token，前端将基础的access_token存在本地（本地有了基础的access_token，下次登陆便可直接跳转目的页），跳转页面

　　　　　　　　b、不在用户系统。后端返给前端该用户的openId，输入手机号和验证码，调接口，把openId，手机传给后台，后台将信息存入用户系统，生成一个基础的access_token凭证，返回给前端，前端存储，跳转页面，接下来Ajax请求API时，带上token，过滤器校验token，经过就返回数据，展现数据，未经过就返回错误码提示错误信息