위 챗 개발 의 Author 웹 페이지 권한 부여 에 대해 자세히 알 아 보기

위 챗 개발 에 있어 이런 수요 가 자주 있 습 니 다.사용자 의 얼굴 을 얻 고 마이크로 신 호 를 연결 하여 사용자 에 게 정 보 를 보 내 는 것 입 니 다.그러면 이런 전 제 는 바로 권한 수여 입 니 다!
1.보안 리 셋 도 메 인 설정:

위 챗 공식 번호 가 사용자 의 홈 페이지 권한 수 여 를 요청 하기 전에 개발 자 는 먼저 공공 플랫폼 홈 페이지 의'개발-인터페이스 권한-홈 페이지 서비스-홈 페이지 계 정-홈 페이지 권한 수 여 를 통 해 사용자 의 기본 정 보 를 얻 을 수 있 습 니 다'설정 옵션 에 가서 권한 수 여 를 받 아 도 메 인 이름 을 되 돌려 야 합 니 다.주의해 야 할 것 은 이것 이 바로 도 메 인 이름 을 직접 쓰 는 것 입 니 다.예 를 들 어www.liliangel.cn.그러나 우리 가 h5 를 개발 할 때 일반적으로 사용 하 는 것 은 2 급 도 메 인 이름 입 니 다.예 를 들 어 h5.liliangel.cn 도 마찬가지 로 도 메 인 이름 을 안전하게 바 꾸 고 있 습 니 다.
2.사용자 권한 부여 와 침묵 권한 부여
1.snsapi 로base 가 scope 에서 시작 한 웹 페이지 권한 수 여 는 페이지 에 들 어간 사용자 의 openid 를 가 져 오 는 데 사용 되 며,침묵 권한 수 여 를 받 고 자동 으로 리 셋 페이지 로 이동 합 니 다.사용자 가 감지 하 는 것 은 바로 리 셋 페이지 에 들 어 가 는 것 이다.
2,snsapiuserinfo 가 scope 에서 시작 한 웹 페이지 권한 수 여 는 사용자 의 기본 정 보 를 얻 는 데 사 용 됩 니 다.그러나 이러한 권한 수 여 는 사용자 가 수 동 으로 동의 해 야 하고 사용자 가 동의 한 적 이 있 기 때문에 주목 하지 않 아 도 권한 수 여 를 받 은 후에 이 사용자 의 기본 정 보 를 얻 을 수 있다. 
3.웹 페이지 권한 부여 accesstoken 과 일반 accesstoken 의 차이
1.위 챗 홈 페이지 권한 수 여 는 OAuth 2.0 체 제 를 통 해 이 루어 진 것 으로 사용자 가 공중 번호 에 권한 을 부여 한 후에 공중 번 호 는 홈 페이지 권한 수여 특유 의 인터페이스 호출 증빙(홈 페이지 권한 수여 accesstoken),웹 페이지 를 통 해 access 권한 부여token 은 사용자 의 기본 정 보 를 얻 는 등 인증 후 인터페이스 호출 을 할 수 있 습 니 다.
2.기타 위 챗 인터페이스,기본 지원 중의"access 획득"token"인터페이스 에서 얻 을 수 있 는 일반 accesstoken 호출. 
4.사용자 가 권한 수여 페이지 에 들 어가 권한 을 부여 하고 코드 를 가 져 오도 록 유도 합 니 다.

위 챗 이 업 데 이 트 된 후 권한 수여 페이지 도 바 뀌 었 다.사실 초록색 의 그 클래식 페이지 에 익숙해 져 서...
js：

var center = {
    init: function(){
      .....
    },
    enterWxAuthor: function(){
      var wxUserInfo = localStorage.getItem("wxUserInfo");
      if (!wxUserInfo) {
        var code = common.getUrlParameter('code');
        if (code) {
          common.getWxUserInfo();
          center.init();
        }else{
          //        ，    -->>     ，      
          window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+ WX_APPID +'&redirect_uri='+ window.location.href +'&response_type=code&scope=snsapi_userinfo#wechat_redirect';
        }
      }else{
        center.init();
      }
    }
}
$(document).ready(function() { 
  center.enterWxAuthor();
}

scope=snsapi 로userinfo 의 경우 페이지 를 불 러 올 때 권한 수여 방법 에 들 어가 면 먼저 캐 시 에서 wxUserInfo 대상 을 가 져 옵 니 다.설명 이 있 으 면 초기 화 방법 에 들 어 갑 니 다.없 으 면 url 에 code 가 포함 되 어 있 는 지 판단 하고 code 설명 은 권한 수여 페이지 에 들 어간 후 페이지 이 므 로 code 를 통 해 사용자 정 보 를 바 꾸 면 됩 니 다.code 가 없 으 면 사용자 가 처음으로 이 페이지 에 들 어가 권한 수여 페이지 로 안내 합 니 다.redirecturi 는 현재 페이지 주소 입 니 다.
getWxUserInfo 방법:

/**
   *             
   */
  getWxUserInfo:function(par){
    var code = common.getUrlParameter("code");
    
    if (par) code = par;
    
    $.ajax({
      async: false,
      data: {code:code},
      type : "GET",
      url : WX_ROOT + "wechat/authorization",
      success : function(json) {
        if (json){
          try {
            //     wxUserInfo    
            var data = JSON.parse(json);
            if (data.openid) {
              localStorage.setItem('wxUserInfo',json);//   --      
            }
          } catch (e) {
            // TODO: handle exception
          }
        }
      }
    });
  },

5.배경 restful-/wechat/authorization,코드 에 따라 사용자 정보 교환

  /**
   *     
   * @param code        
   * 
   * @return       
   * @throws IOException 
   */
  @RequestMapping(value = "/authorization", method = RequestMethod.GET)
  public void authorizationWeixin(
      @RequestParam String code,
      HttpServletRequest request, 
      HttpServletResponse response) throws IOException{
    request.setCharacterEncoding("UTF-8"); 
    response.setCharacterEncoding("UTF-8"); 

    PrintWriter out = response.getWriter();
    LOGGER.info("RestFul of authorization parameters code:{}",code);   
    try {
      String rs = wechatService.getOauthAccessToken(code);
      out.write(rs);
      LOGGER.info("RestFul of authorization is successful.",rs);
    } catch (Exception e) {
      LOGGER.error("RestFul of authorization is error.",e);
    }finally{
      out.close();
    }
  }

여기 권한 부여 accesstoken,명심 하 세 요:권한 부여 accesstoken 비 전역 accesstoken,캐 시 를 사용 해 야 합 니 다.여기 서 제 가 사용 하 는 redis 는 구체 적 인 설정 이 많 지 않 습 니 다.뒤에 관련 설정 박문 을 쓰 는 것 도 좋 습 니 다.물론 ehcache 도 사용 할 수 있 습 니 다.ehcahe 설정 이 제 첫 번 째 블 로그 에 상세 하 게 소개 되 어 있 습 니 다.

/**
   *   code      token        ，    access_token  
   * @param code
   * @return
   * @throws IOException 
   * @throws ClientProtocolException 
   */
  public String getOauthAccessToken(String code) throws ClientProtocolException, IOException{
    String data = redisService.get("WEIXIN_SQ_ACCESS_TOKEN");
    String rs_access_token = null;
    String rs_openid = null;
    String url = WX_OAUTH_ACCESS_TOKEN_URL + "?appid="+WX_APPID+"&secret="+WX_APPSECRET+"&code="+code+"&grant_type=authorization_code";
    if (StringUtils.isEmpty(data)) {
      synchronized (this) {
        //   ，    
        String hs = apiService.doGet(url);
        JSONObject json = JSONObject.parseObject(hs);
        String refresh_token = json.getString("refresh_token");
        String refresh_url = "https://api.weixin.qq.com/sns/oauth2/refresh_token?appid="+WX_APPID+"&grant_type=refresh_token&refresh_token="+refresh_token;
        String r_hs = apiService.doGet(refresh_url);
        JSONObject r_json = JSONObject.parseObject(r_hs);
        String r_access_token = r_json.getString("access_token");
        String r_expires_in = r_json.getString("expires_in");
        rs_openid = r_json.getString("openid"); 
        rs_access_token = r_access_token;
        redisService.set("WEIXIN_SQ_ACCESS_TOKEN", r_access_token, Integer.parseInt(r_expires_in) - 3600);
        LOGGER.info("Set sq access_token to redis is successful.parameters time:{},realtime",Integer.parseInt(r_expires_in), Integer.parseInt(r_expires_in) - 3600);
      }
    }else{
      //     
      String hs = apiService.doGet(url);
      JSONObject json = JSONObject.parseObject(hs);
      rs_access_token = json.getString("access_token");
      rs_openid = json.getString("openid");
      LOGGER.info("Get sq access_token from redis is successful.rs_access_token:{},rs_openid:{}",rs_access_token,rs_openid);
    }
    
    return getOauthUserInfo(rs_access_token,rs_openid);
  }
　　/**
   *     token      
   * @param access_token
   * @param openid
   * @return
   */
  public String getOauthUserInfo(String access_token,String openid){
    String url = "https://api.weixin.qq.com/sns/userinfo?access_token="+ access_token +"&openid="+ openid +"&lang=zh_CN";
    try {
      String hs = apiService.doGet(url);
      //      
      saveWeixinUser(hs);  
      return hs;
    } catch (IOException e) {
      LOGGER.error("RestFul of authorization is error.",e);
    }
    return null;
  }

시간 이 급 해서 코드 이름 이 어 지 러 웠 습 니 다.보시 다시 피 저 는 동기 화 방법 을 사 용 했 습 니 다.캐 시 에서 키 를 WEIXIN 으로 가 져 왔 습 니 다.SQ_ACCESS_TOKEN,만 료 되 지 않 았 다 는 설명 을 가 져 오 면 httpclient 를 통 해 위 챗 이 제공 하 는 인 터 페 이 스 를 호출 하여 사용자 정 보 를 되 돌려 주 는 문자열 을 전단 에 전달 합 니 다.만약 찾 지 못 했다 면,없 거나 기한 이 지 났 다 는 것 을 설명 하고,refreshtoken 리 셋 accesstoken,캐 시 다시 쓰기,accesstoken 은 비교적 짧 은 유효기간 을 가지 고 있 습 니 다.저 에 게 캐 시 의 실효 시간 을 설정 하여 위 챗 이 주 는 시간 을 한 시간 더 줄 였 습 니 다.코드 를 돌 이 켜 보면 위의 논리 에 작은 문제 가 있 습 니 다.이렇게 쓰 면 처음 가 져 오 거나 캐 시 가 효력 을 잃 은 후에 처음으로 access 를 가 져 올 수 있 습 니 다.token 은 모두 한 번 갱신 하고 사용 에 영향 을 주지 않 으 며 나중에 최적화 수정 TODO 를 합 니 다.
6:사용자 정보 저장
일반적인 상황 에서 권한 을 수 여 받 은 후에 저 희 는 사용자 정 보 를 데이터베이스 시트 에 저장 합 니 다.openid 는 유일한 메 인 키 이 고 외부 키 는 저희 자신의 사용자 표 와 연 결 됩 니 다.그러면 후속 적 으로 어떤 업 무 를 전개 하 든 운영 데이터 통 계 를 하 든 모두 위 챗 공중 번호 와 관련 된 관 계 를 가 집 니 다.주의해 야 할 것 은:우리 가 얻 은 headimgurl 은 위 챗 에서 제공 하 는 url 주소 입 니 다.사용자 가 프로필 사진 을 수정 하면 원래 의 주소 가 효력 을 잃 을 수 있 으 므 로 로 로 컬 서버 에 그림 을 저장 한 다음 에 로 컬 주소 url 을 저장 하 는 것 이 좋 습 니 다!
위 챗 반환 값:

참조 링크:
위 챗 공식 플랫폼 공식 문서:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842&token=&lang=zh_CN
온라인 인터페이스 디 버 깅 도구:http://mp.weixin.qq.com/debug
공중 번호 혜택 없 음:테스트 계 정 신청http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
이상 은 본 고의 모든 내용 입 니 다.본 고의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.또한 저 희 를 많이 지지 해 주시 기 바 랍 니 다!