实现H5网页授权

桃扇骨 2023-09-28 19:08 28阅读 0赞

#### 目录 ####

*  一、基本介绍
 *  二、获取 openid（前端代码）
 *   *  (1) 创建一个 uniapp 项目
     *  (2) 获取步骤
     *   *   *  a. 介绍
             *  b. 前端代码
             *  c. 后端代码

## 一、基本介绍 ##

> ⭐️ H5 网页授权的核心：获取 openid（openid 是每个用户针对每个公众号都会产生的一个安全的，识别用户的，唯一标识用户的字符串）  
> ⭐️ 为什么要获取用户的 openid 呢？用于唯一识别一个用户，为了让系统管理员知道是那个微信用户在系统中操作（如：是那个微信用户提交了表单）

## 二、获取 openid（前端代码） ##

### (1) 创建一个 uniapp 项目 ###

![在这里插入图片描述][7c319cf674534e0f957f0904b2906a43.png]  
![在这里插入图片描述][27e195138797445abd6cd9b635c1ec52.png]  
![在这里插入图片描述][272e4937365b48e8b1f3246f5f7fea54.png]

### (2) 获取步骤 ###

官方介绍：[https://developers.weixin.qq.com/doc/offiaccount/OA\_Web\_Apps/Wechat\_webpage\_authorization.html][https_developers.weixin.qq.com_doc_offiaccount_OA_Web_Apps_Wechat_webpage_authorization.html]

##### a. 介绍 #####

[https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect\_uri=REDIRECT\_URI&response\_type=code&scope=SCOPE&state=STATE\#wechat\_redirect][https_open.weixin.qq.com_connect_oauth2_authorize_appid_APPID_redirect_uri_REDIRECT_URI_response_type_code_scope_SCOPE_state_STATE_wechat_redirect]

> code: 用户临时登录凭证  
> 上面的链接的核心参数的介绍：  
> ⭐️ ① appid: 应用的唯一标识  
> ⭐️ ② redirect\_uri: 获取到 code 后要访问的链接（通常是某个 Controller 接口）  
> ⭐️ ③ scope: ❤️a. 如果值是 snsapi\_base 表示是**静默授权**（系统悄悄获得用户的 openid，无需用户点击按钮）❤️ b. 如果值是 snsapi\_userinfo 表示是非静默授权（系统弹框让用户点击【确定】按钮后方可获取用户的 openid）

##### b. 前端代码 #####

在刚刚创建的 uniapp 项目的 App.vue 文件中的 onLoad（应用第一次被用户访问的时候会调用该方法） 中写如下代码

![在这里插入图片描述][f95f878979ab41f4b5b31548fe996809.png]

##### c. 后端代码 #####

用于获取 openid 的工具类

public class OpenidUtil{
        
    
       public static final String APP_ID = "wxc436706a34c9dcd8";
       public static final String APP_SECRET = "7fe003e0a896420042307f567c58144a";
    
       // Spring 提供的发送 HTTP 请求的工具
       private static RestTemplate restTemplate = new RestTemplate();
    
       public static final String ACCESS_TOKEN = "access_token";
       public static final String EXPIRES_IN = "expires_in";
       public static final String OPEN_ID = "openid";
       public static final String REFRESH_TOKEN = "refresh_token";
       public static final String SCOPE = "scope";
    
       private static AccessTokenExpiresIn accessTokenExpiresIn;
    
       // 获取普通 access_token 的请求路径
       private static String accessTokenUrl = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=gqAPPID&secret=gqAPPSECRET";
       private static String authorizeUrl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=gqAPPID&redirect_uri=gqREDIRECT_URI&response_type=code&scope=gqSCOPE&state=gqSTATE#wechat_redirect";
       // 获取网页授权 access_token 的请求路径
       private static String authorizeTokenUrl = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=gqAPPID&secret=gqSECRET&code=gqCODE&grant_type=authorization_code";
       // 拉取用户信息的请求路径
       private static String getUserInfoUrl = "https://api.weixin.qq.com/sns/userinfo?access_token=gqACCESS_TOKEN&openid=gqOPENID&lang=zh_CN";
    
    
       /**
        * 通过 code 值获取网页授权 access_token、openid等
        *
        * @param code 当用户点击同意授权后可获得
        * @return 携带返回数据的 Map
        */
       public static Map<String, String> getH5OpenIdAccessTokenByCode(String code) {
        
           HashMap<String, String> resultMap = new HashMap<>();
    
           String url = authorizeTokenUrl.replace("gqAPPID", APP_ID)
                   .replace("gqSECRET", APP_SECRET)
                   .replace("gqCODE", code);
           String resultStr = restTemplate.getForObject(url, String.class);
           JSONObject resultJSON = JSONUtil.parseObj(resultStr);
    
           return createResultMap(resultJSON, ACCESS_TOKEN, EXPIRES_IN, REFRESH_TOKEN, OPEN_ID, SCOPE);
       }
    
       /**
        * 根据 accessToken 和 openid 获取用户信息
        *
        * @param accessToken
        * @param openid
        */
       public static Map<String, String> getUserInfoByOpenIdAccessToken(String accessToken, String openid) {
        
           String url = getUserInfoUrl.replace("gqACCESS_TOKEN", accessToken)
                   .replace("gqOPENID", openid);
           String userInfoStr = restTemplate.getForObject(url, String.class);
           JSONObject returnJSON = JSONUtil.parseObj(userInfoStr);
    
           HashMap<String, String> returnMap = new HashMap<>();
    
           return createResultMap(returnJSON, OPEN_ID, "sex", "language", "city", "province", "country", "headimgurl");
       }
    
    
       /**
        * 【方法】获取进入授权页面的请求路径
        *
        * @param appid       应用的唯一标识
        * @param redirectUri 用户同意授权后跳转的地址(如果用户同意授权, 会跳转到该地址, 并携带参数 code),【类似 controller 的地址】
        * @param scope       授权作用域, 有两种取值: snsapi_base(静默授权, 只得 openid)、snsapi_userinfo(弹出授权页面)
        * @return 进入授权页面的请求路径
        */
       public static String getAuthorizeUrl(String appid, String redirectUri, String scope) {
        
           return authorizeUrl.replace("gqAPPID", appid == null ? APP_ID : appid)
                   .replace("gqREDIRECT_URI", redirectUri)
                   .replace("gqSCOPE", scope)
                   .replace("gqSTATE", "zgq");
       }
    
       /**
        * 【方法】获取 access_token 以及 expires_in
        */
       private static void getAccessTokenExpiresIn() {
        
           HashMap<String, String> retMap = new HashMap<>();
           // 给请求 url 设值
           String url = accessTokenUrl.replace("gqAPPID", APP_ID).replace("gqAPPSECRET", APP_SECRET);
           // 向 url 发送网络请求, 获得返回值字符串
           String resultStr = restTemplate.getForObject(url, String.class);
           // 把 resultStr 转换为 JSON 格式
           JSONObject resultJSON = JSONUtil.parseObj(resultStr);
    
           String accessToken = resultJSON.get(ACCESS_TOKEN).toString(); // 凭证值
           String expiresIn = resultJSON.get(EXPIRES_IN).toString(); // 凭证有效时间
    
           accessTokenExpiresIn = new AccessTokenExpiresIn(accessToken, expiresIn);
       }
    
       /**
        * 【方法】获取 access_token
        *
        * @return access_token 值
        */
       public static String getAccessToken() {
        
           if (accessTokenExpiresIn == null || accessTokenExpiresIn.alreadyExpired())
               getAccessTokenExpiresIn();
           return accessTokenExpiresIn.getAccessToken();
       }
    
       /**
        * 组建返回值 Map
        *
        * @param params Map 的 key 和 value 的名称一样
        */
       private static Map<String, String> createResultMap(JSONObject resultJSON, String... params) {
        
           HashMap<String, String> resultMap = new HashMap<>();
           for (String p : params) {
        
               resultMap.put(p, resultJSON.get(p).toString());
           }
           return resultMap;
       }
    
       /**
        * 凭证和凭证有效时间类
        */
       @lombok.Data
       private static class AccessTokenExpiresIn {
        
           private String accessToken;
           // 过期时间
           private long expireTime;
    
           public AccessTokenExpiresIn(String accessToken, String expiresIn) {
        
               this.accessToken = accessToken;
               this.expireTime = System.currentTimeMillis() + Integer.parseInt(expiresIn) * 1000;
           }
    
           public boolean alreadyExpired() {
        
               return System.currentTimeMillis() > expireTime;
           }
       }
    
    }

--------------------

**前端的 redirect\_uri 就是填写的 authOpenIds/h5，从而获取到 openid**

@RestController
    @RequestMapping("/authOpenIds")
    public class AuthOpenIdController {
         
        /**
         * 授权后, 持久化 openid (把它保存在数据库中) 
         * 同时也可把 openid 保存到 Session 中
         * @param request 使用 request 把 openid 缓存到服务器 session 中
         */
        @ApiOperation("公众号 h5 授权")
        @GetMapping("/h5")
        public String h5(String code, String state, HttpServletRequest request) {
        
            String h5OpenId = OpenIdUtil.getH5OpenId(code);
            request.getSession().setAttribute("openid", h5OpenId); 
            System.out.println("h5OpenId: " + h5OpenId);
            return "成功获得";
        }
    
    }

[7c319cf674534e0f957f0904b2906a43.png]: https://img-blog.csdnimg.cn/7c319cf674534e0f957f0904b2906a43.png
[27e195138797445abd6cd9b635c1ec52.png]: https://img-blog.csdnimg.cn/27e195138797445abd6cd9b635c1ec52.png
[272e4937365b48e8b1f3246f5f7fea54.png]: https://img-blog.csdnimg.cn/272e4937365b48e8b1f3246f5f7fea54.png
[https_developers.weixin.qq.com_doc_offiaccount_OA_Web_Apps_Wechat_webpage_authorization.html]: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
[https_open.weixin.qq.com_connect_oauth2_authorize_appid_APPID_redirect_uri_REDIRECT_URI_response_type_code_scope_SCOPE_state_STATE_wechat_redirect]: https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
[f95f878979ab41f4b5b31548fe996809.png]: https://img-blog.csdnimg.cn/f95f878979ab41f4b5b31548fe996809.png