微信公众号开发(二)

微信公众号开发文档

微信网页授权

微信客户端中访问第三方网页，可通过 微信网页授权机制 来获取用户信息。
授权机制：OAuth2.0鉴权

接口权限-网页授权

可进行网页授权获取用户信息的公众号必须满足两个条件：

• 1.公众号不能为订阅号
• 2.公众号要进行微信认证

image.png

网页授权回调域名设置

网页授权回调域名目前最多可设置两个

image.png

两种网页授权

• 1.snsapi_base（静默授权）
• 2.snsapi_userinfo（非静默授权）
  特殊的静默授权：已关注公众号的用户，通过公众号的会话或者自定义菜单进入本公众号的网页授权页面，这种方式也是静默授权。

两种网页授权最直观的区别在于，第一种授权方式是直接进入业务页面的，第二种授权需要用户手动同意，即第二种会有弹框获取用户同意。

网页授权流程

1、引导用户进入授权页面同意授权，获取code
2、通过code换取网页授权access_token
3、如果需要，开发者可以刷新网页授权access_token，避免过期
4、通过网页授权access_token和openid获取用户基本信息

前端使用code获取openid

步骤一：跳转授权

参数	必填	说明
appid	是	每个公众号的唯一标识
redirect_uri	是	授权后重定向的回调地址，要进行urlEncode处理
response_type	是	返回类型，填写code，openid需要用code去换取
scope	是	应用授权作用域，1.snsapi_base 2.snsapi_userinfo 1.不弹出授权页面，直接跳转，只能获取用openid， 2.弹出授权页面，可通过openid拿到昵称、性别、所在地。 并且， 即使在未关注的情况下，只要用户授权，也能获取其信息
state	否	重定向后带上的参数
#wechat_redirect	是	用于页面重定向，必须带此参数

let appID = ""; 
let redirectUrl = "";
// snsapi_base/snsapi_userinfo
let scope = ""
let state = ""
let authorizeUrl =
    `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appID}&redirect_uri=` +
    `${encodeURIComponent(
      redirectUrl
    )}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`;
 // 跳转微信链接获取code   
window.location.href = authorizeUrl;

授权后，页面就会跳转到redirect_uri/?code=CODE&state=STATE中。

注意： code作为换取access_token的票据，每次用户授权带上的code将不一样，code只能使用一次，5分钟未被使用自动过期。

步骤二：获取code，换取openid、xtoken

/** 获取地址栏指定参数的值*/
let code = getUrlParame("code"); 
http.post("xxx", {code: code}).then(res => {
  // openId、weChatIcon、weChatName、xtoken
)

/** methods */
getUrlParame(name) {
  // 获取url中跟在问号后面的部分
  var params = window.location.search;
   // 检测参数是否存在
     if (params.indexOf(name) > -1) {
        var value = "";
        value = params.substring(
          params.indexOf(name),
          params.length
        );
        // 检测后面是否还有参数
        if (value.indexOf("&") > -1) {
          // 去除后面多余的参数, 得到最终 name=value 形式的值
          value = value.substring(0, value.indexOf("&"));
          // 去掉参数名, 得到最终纯值字符串
          value = value.replace(name + "=", "");
          return value;
        }
        return "";
      }
}