微信网页、APP登录授权、JS-SDK

本文主要是介绍微信网页、APP登录授权、JS-SDK，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

@TOC

前言

微信网页登录授权、APP登录授权、JS-SDK接口调用

温馨提示：实践某项功能请至少读完准备工作，可以避免很多的坑

准备工作

测试：

natapp 内网穿透工具

开发阶段可用此工具获取域名
申请测试账号

测试账号拥有微信几乎所有接口的能力，可以先通过测试账号提前验证
获取测试号信息

账号验证（接口配置）

填写接口配置信息，此信息需要你有自己的服务器资源，填写的URL需要正确响应微信发送的Token验证，请阅读消息接口使用指南。

字段	说明
URL	开发者用来接收微信消息和事件的接口URL（可以外网访问自己服务器IP:端口号也可以）
TOKEN	自己随意填写，用作生成签名（该Token会和接口URL中包含的Token进行比对，从而验证安全性）

验证接口实现：

@ApiOperation("微信公众号认证入口")
@GetMapping(value = "/wechat/api/wxServerValdation")
public String wxServerValdation(String signature, String timestamp, String nonce, String echostr){
    if (Objects.isNull(signature)|| Objects.isNull(timestamp) || Objects.isNull(nonce) || Objects.isNull(echostr)){
        return "fail";
    }
    ArrayList<String> list= new ArrayList<>();
    list.add(nonce);
    list.add(timestamp);
    //这是第5步中你设置的Token
    list.add(WxMpConfig.token);
    Collections.sort(list);
    String sha1Singnature = DigestUtils.sha1Hex(list.get(0)+list.get(1)+list.get(2));
    if (sha1Singnature.equals(signature)){
        return echostr;
    }else {
        return "fail";
    }
}

此时的URL可以设置为：http://IP:端口号/wechat/api/wxServerValdation

也可以填写为域名+/wechat/api/wxServerValdation

验证字段说明

参数	描述
signature	微信加密签名，signature结合了开发者填写的token参数和请求中的timestamp参数、nonce参数。
timestamp	时间戳
nonce	随机数
echostr	随机字符串

开发者通过检验signature对请求进行校验（下面有校验方式）。若确认此次GET请求来自微信服务器，请原样返回echostr参数内容，则接入生效，成为开发者成功，否则接入失败。加密/校验流程如下：

1）将token、timestamp、nonce三个参数进行字典序排序

2）将三个参数字符串拼接成一个字符串进行sha1加密

3）开发者获得加密后的字符串可与signature对比，标识该请求来源于微信

验证工具：

http://mp.weixin.qq.com/debug/

JS接口安全域名

设置JS接口安全域后，通过关注该测试号，开发者即可在该域名下调用微信开放的JS接口，请阅读微信JSSDK开发文档。

请注意，这里填写的是域名（是一个字符串），而不是URL，因此请勿加 http:// 等协议头；
网页授权获取用户基本信息

微信根据此域名检查回调地址域名

请注意，这里填写的是域名（是一个字符串），而不是URL，因此请勿加 http:// 等协议头；

正式：
- 申请账号
  - 正式的微信账号分为订阅号、服务号、企业号，认证都需要300元，但是使用授权和接口功能必须认证。
  - 但是订阅号不能直接获取到用户的OpenID，所以尽量申请一个服务号。（这点微信也是不会提醒用户的，但是当你看了一下测试账号是订阅号，就直接申请了一个订阅号结果就不言而喻了，接口处就会提醒用户，只有服务号才能使用授权接口。）
  - 不过订阅号也是有一个漏洞的，如果你是在公众号内使用，是可以迂回获取到用户信OpenID的。
- 账号认证
- 接口配置
  
  接口配置主要有一下三点，其中IP白名单要加入所有访问微信接口服务器的IP
  - 基本配置
  - 服务器配置
  - 功能设置

流程讲解

总体流程

接入微信公众平台开发，开发者需要按照如下步骤完成：

1、填写服务器配置

2、验证服务器地址的有效性

3、依据接口文档实现业务逻辑
网页授权
- 功能
  
  网页授权获取用户基本信息：通过该接口，可以获取用户的基本信息（获取用户的OpenID是无需用户同意的，获取用户的基本信息则需用户同意）
- 注意
  - 关于网页授权access_token和普通access_token的区别
    
    1、微信网页授权是通过OAuth2.0机制实现的，在用户授权给公众号后，公众号可以获取到一个网页授权特有的接口调用凭证（网页授权access_token），通过网页授权access_token可以进行授权后接口调用，如获取用户基本信息；
    
    2、其他微信接口，需要通过基础支持中的“获取access_token”接口来获取到的普通access_token调用。
- 流程
  
  网页授权流程分为四步：
  
  1、引导用户进入授权页面同意授权，获取code（拉起授权页面）
  
  2、通过code换取网页授权access_token（与基础支持中的access_token不同）
  
  3、如果需要，开发者可以刷新网页授权access_token，避免过期
  
  4、通过网页授权access_token和openid获取用户基本信息（支持UnionID机制）
  
  5 附：检验授权凭证（access_token）是否有效
APP授权
- 第三方发起微信授权登录请求，微信用户允许授权第三方应用后，微信会拉起应用或重定向到第三方网站，并且带上授权临时票据 code 参数；
- 通过 code 参数加上 AppID 和 AppSecret 等，通过 API 换取 access_token；
- 通过 access_token 进行接口调用，获取用户基本数据资源或帮助用户实现基本操作。
小程序授权
- 调用 wx.login() 获取 临时登录凭证code ，并回传到开发者服务器。
- 调用 auth.code2Session 接口，换取 用户唯一标识 OpenID 、用户在微信开放平台帐号下的唯一标识UnionID（若当前小程序已绑定到微信开放平台帐号）和 会话密钥 session_key。
- 之后开发者服务器可以根据用户标识来生成自定义登录态，用于后续业务逻辑中前后端交互时识别用户身份
JS-SDK接口调用
- 功能
  
  微信JS-SDK：是开发者在网页上通过JavaScript代码使用微信原生功能的工具包，开发者可以使用它在网页上录制和播放微信语音、监听微信分享、上传手机本地图片、拍照等许多能力。
- 注意
  
  这块可能会出现前端调用失败的问题，或者分享的时候微信不能分享的问题，这个很有可能时版本的问题，请先倒回之前的版本，再进行测试。
  1. 签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。
  2. 签名用的url必须是调用JS接口页面的完整URL。
- 流程
  - 获取Access token
    
    官方接口测试工具
    
    https://mp.weixin.qq.com/debug/cgi-bin/apiinfo?t=index&type=基础支持&form=获取access_token接口 /token
  - 获得jsapi_ticket
    
    （有效期7200秒，开发者必须在自己的服务全局缓存jsapi_ticket）：https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

功能实现

属性配置

yml 可以把地址也存放到配置里

#微信开放平台账号
wechat:
  #服务号
  mp:
    appId: 
    secret: 
    token: 
    aesKey:

WxMpConfig 配置类

@Component
@ConfigurationProperties("wechat.mp")
public class WxMpConfig {
    /**
     * 设置微信公众号的appid
     */
    public static String appId;

    /**
     * 设置微信公众号的app secret
     */
    public static String secret;

    /**
     * 设置微信公众号的token
     */
    public static String token;

    /**
     * js 回调地址
     */
    public static String jsUrl;

    /**
     * 微信认证路径
     */
    public static String url;

    /**
     * 微信认证路径
     */
    public static String aesKey;

    public void setAppId(String appId) {
        WxMpConfig.appId = appId;
    }

    public void setSecret(String secret) {
        WxMpConfig.secret = secret;
    }

    public void setToken(String token) {
        WxMpConfig.token = token;
    }

    public void setJsUrl(String jsUrl) {
        WxMpConfig.jsUrl = jsUrl;
    }

    public void setUrl(String url) {
        WxMpConfig.url = url;
    }

    public void setAesKey(String aesKey) {
        WxMpConfig.aesKey = aesKey;
    }

}

WxAuthUtil

@Slf4j
public class WxAuthUtil {

    /**
     *  APPID
     */
    public final static String APP_ID = "APP_ID";
    /**
     * SECRET
     */
    public final static String SECRET = "SECRET";

    public final static String CODE = "CODE";

    public final static String OPEN_ID = "OPEN_ID";

    public final static String ACCESS_TOKEN = "ACCESS_TOKEN";

    public final static String REFRESH_TOKEN = "REFRESH_TOKEN";

    public final static String WX_ACCESS_TOKEN = "WX_ACCESS_TOKEN";

    public final static String WX_JSAPI_TICKET = "WX_JSAPI_TICKET";

    /**
     * 公用获取access_token访问地址
     */
    public final static String JS_ACCESS_TOKEN_URL = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET";

    /**
     * 获取jsApiTicket访问地址
     */
    public final static String JS_API_TICKET_URL = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi";

    /**
     * 网页授权 获取access_token访问地址
     */
    public final static String H5_ACCESS_TOKEN_URL = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=APP_ID&secret=SECRET&code=CODE&grant_type=authorization_code";

    /**
     * 检查access_token是否失效地址
     */
    public final static String CHECK_H5_URL = "https://api.weixin.qq.com/sns/auth?access_token="+ACCESS_TOKEN+"&openid="+OPEN_ID;

    /**
     * 刷新access_token地址
     */
    public final static String REFRESH_TOKEN_URL = "https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=" + OPEN_ID
            + "&grant_type=refresh_token&refresh_token=" + REFRESH_TOKEN;

    /**
     * 拉取用户信息
     */
    public final static String USER_INFO_URL =  "https://api.weixin.qq.com/sns/userinfo?access_token=" + ACCESS_TOKEN + "&openid=" + OPEN_ID
            + "&lang=zh_CN";

    /**
     * 获取accessToken
     * @return Map
     * @throws IOException
     */
    public static JSONObject getAccessToken() throws IOException {
        String requestUrl = JS_ACCESS_TOKEN_URL.replace("APPID", WxMpConfig.appId).replace("APPSECRET",WxMpConfig.secret);
        //向微信发送get请求
        log.info("requestUrl：  {}", requestUrl);
        JSONObject callBack = doGet(requestUrl);
        log.info("获取accessToken：{}", callBack);
        return callBack;
    }

    /**
     * 微信请求
     * @param url
     * @return Object
     * @throws IOException
     */
    public static JSONObject doGet(String url) throws IOException {
        JSONObject jsonObject = null;
        HttpClient client = HttpClientBuilder.create().build();
        final HttpGet httpGet = new HttpGet(url);
        HttpResponse response = client.execute(httpGet);
        HttpEntity entity = response.getEntity();
        if (entity != null) {
            // 返回结果转化为JSON对象
            final String result = EntityUtils.toString(entity, "UTF-8");
            jsonObject = JSON.parseObject(result);
        }

        return jsonObject;
    }
}

授权

这里只详细介绍网页授权，其他方式大同小异，官方文档可以查看
- 获取 code （拉起授权页面）
APP 与 H5 获取 code 的区别：h5 是前端通过后台拿到授权 url,然后前端请求该 url 得到 code 再请求后台；APP 则是前端配合使用微信开放平台提供的 SDK 进行授权登录请求，用户同意授权后得到 code 再去请求后台；

获取code请求路径

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx6fb2b539e0663d3b&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_re

获取code 需要先设置REDIRECT_URI 回调路径

如果用户同意授权，页面将跳转至 redirect_uri/?code=CODE&state=STATE。

code说明： code作为换取access_token的票据，每次用户授权带上的code将不一样，code只能使用一次，5分钟未被使用自动过期。
- 获取access_token
获取code后，请求以下链接获取access_token： https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

参数是否必须说明
appid 是公众号的唯一标识
secret 是公众号的appsecret
code 是填写第一步获取的code参数
grant_type 是填写为authorization_code
- 通过openID + access_token获取用户信息
需要用缓存存储access_token
```
https://api.weixin.qq.com/sns/userinfo?access_token=" + ACCESS_TOKEN + "&openid=" + OPEN_ID + "&lang=zh_CN";
```
- access_token过期刷新
检查token是否失效

参数	是否必须	说明
appid	是	公众号的唯一标识
secret	是	公众号的appsecret
code	是	填写第一步获取的code参数
grant_type	是	填写为authorization_code

@ApiOperation("网页拉起微信授权页面,返回微信校验信息")
    @GetMapping("/auth")
    public R<String> callBack(@ApiParam(value = "*code",required = true)String code) throws IOException {
        /**
         * 获取到授权标志code（用户同意微信授权之后产生的code）
         */
        log.info("进入微信回调code={}",code);
        String url = WxAuthUtil.H5_ACCESS_TOKEN_URL.
                replace(WxAuthUtil.APP_ID,WxMpConfig.appId).
                replace(WxAuthUtil.SECRET, WxMpConfig.secret).
                replace(WxAuthUtil.CODE,code);
        JSONObject jsonObject = WxAuthUtil.doGet(url);
        log.info("授权结果{}",jsonObject);
        return R.ok(jsonObject.getString("openid"));
    }
    
     @ApiOperation("拉取微信用户信息，每天获取token的次数受限，需要将accessToken缓存（目前不需要获取用户信息）")
    @GetMapping("/userInfo")
    public R<WxUserVO> getWeiChatUserInfo(@RequestParam("code")String openid,
                                          @RequestParam("accessToken")String accessToken,
                                          @RequestParam("refreshToken")String refreshToken) throws IOException {
        /**
         * 校验access_token是否失效
         */
        String checkoutUrl = WxAuthUtil.CHECK_H5_URL.
                replace(WxAuthUtil.ACCESS_TOKEN, accessToken).
                replace(WxAuthUtil.OPEN_ID,openid);

        JSONObject checkoutInfo = WxAuthUtil.doGet(checkoutUrl);
        log.info("校验信息-----{}",checkoutInfo.toString());
        if (!"0".equals(checkoutInfo.getString("errcode"))) {
            // 刷新access_token
            String refreshTokenUrl = WxAuthUtil.REFRESH_TOKEN_URL
                    .replace(WxAuthUtil.APP_ID,WxMpConfig.appId)
                    .replace(WxAuthUtil.REFRESH_TOKEN, refreshToken);
            JSONObject refreshInfo = WxAuthUtil.doGet(refreshTokenUrl);
            System.out.println(refreshInfo.toString());
            accessToken = refreshInfo.getString("access_token");
        }
        /**
         * 使用access_token拉取用户信息
         */
        String infoUrl = WxAuthUtil.USER_INFO_URL
                .replace(WxAuthUtil.ACCESS_TOKEN, accessToken)
                .replace(WxAuthUtil.OPEN_ID, openid);
        JSONObject userInfo = WxAuthUtil.doGet(infoUrl);
        WxUserVO wxUserVO = JSONObject.parseObject(String.valueOf(userInfo), WxUserVO.class);
        log.info("用户数据-----{}", userInfo);

        return R.ok(wxUserVO);
    }

JS-SDK生成signature

@ApiOperation("生成微信JS-SDK签名")
    @PostMapping( "/signature")
    public R<Map<String, String>> makeWxSignature(@RequestBody @Validated WxH5VO wxH5VO){

        //获取jsapiTicket
        String jsapiTicket = getJsapiTicket();

        Map<String, String> ret = new HashMap<>(6);
        String nonceStr = RandomUtils.getRandomStr();
        long timestamp = System.currentTimeMillis()/1000L;

        //加密
        String signature = SHA1.genWithAmple(
                "jsapi_ticket=" + jsapiTicket, "noncestr=" + nonceStr, "timestamp=" + timestamp, "url=" + wxH5VO.getUrl());

        ret.put("url", wxH5VO.getUrl());
        ret.put("jsapi_ticket", jsapiTicket);
        ret.put("nonceStr", nonceStr);
        ret.put("timestamp", Long.toString(timestamp));
        ret.put("signature", signature);
        ret.put("appId", WxMpConfig.appId);

        return R.ok(ret);
    }

    /**
     * 1、缓存中获取 jsApiTicket
     * 2、没有 已过期 重新获取
     * 2、获取缓存中的access_token
     * 3、没有 证明已经过期 重新获取
     * 获取jsapiTicket
     * @return jsapiTicket
     */
    private String getJsapiTicket(){
        String jsapiTicket = null;
        try{
            //根据access_token 获取jsapiTicket
            jsapiTicket = redisService.getCacheObject(WxAuthUtil.WX_JSAPI_TICKET);
            if(Objects.isNull(jsapiTicket)){
                //获取access_token
                String accessToken = redisService.getCacheObject(WxAuthUtil.WX_ACCESS_TOKEN);
                if(Objects.isNull(accessToken)){
                    JSONObject accessTokenMap = WxAuthUtil.getAccessToken();
                    accessToken = accessTokenMap.getString("access_token");
                    log.info("访问获取access_token数据{}", accessTokenMap);
                    redisService.setCacheObject(WxAuthUtil.WX_ACCESS_TOKEN, accessToken, accessTokenMap.getLong("expires_in"), TimeUnit.SECONDS);
                }
                String requestUrl = WxAuthUtil.JS_API_TICKET_URL.replace("ACCESS_TOKEN", accessToken);
                //向微信发送get请求
                JSONObject  callBack = WxAuthUtil.doGet(requestUrl);
                log.info("访问获取jsApiTicket数据{}", callBack);
                jsapiTicket = callBack.getString("ticket");
                redisService.setCacheObject(WxAuthUtil.WX_JSAPI_TICKET, jsapiTicket,callBack.getLong("expires_in"), TimeUnit.SECONDS);
            }
            log.info("获取jsApiTicket：{}", jsapiTicket);
        }catch (IOException e){
            log.info("获取签名异常：" + e.getMessage());
        }
        return jsapiTicket;
    }

错误处理

官方常见错误及解决方法

invalid signature签名错误。建议按如下顺序检查：
- 确认签名算法正确，可用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。
- 确认config中nonceStr（js中驼峰标准大写S）, timestamp与用以签名中的对应noncestr, timestamp一致。
- 确认url是页面完整的url(请在当前页面alert(location.href.split(’#’)[0])确认)，包括’http(s)://‘部分，以及’？‘后面的GET参数部分,但不包括’#'hash后面的部分。
- 确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。
- 确保一定缓存access_token和jsapi_ticket
- 确保你获取用来签名的url是动态获取的，动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名，前端需要用js获取当前页面除去’#‘hash部分的链接（可用location.href.split(’#’)[0]获取,而且需要encodeURIComponent），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。

这篇关于微信网页、APP登录授权、JS-SDK的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！