위 챗 jsSDK 로 컬 디 버 깅 프로 세 스 공략 (nodeJs 액세스 token 등 정보 획득 실현)

최근 에 위 챗 플랫폼 에 H5 페이지 의 DEMO 를 삽입 하고 위 챗 플랫폼 의 jsAPI 를 호출 하려 고 합 니 다. 그러나 이 조작 은 위 챗 의 인증 을 받 아야 합 니 다. 하루 동안 의 끊 임 없 는 디 버 깅 을 통 해 이 문 제 를 해결 하고 생각 과 해결 방안 을 기록 하여 필요 한 친구 들 이 참고 하도록 합 니 다.
위 챗 js 인 터 페 이 스 를 사용 하려 면 파일 을 설정 해 야 합 니 다.

   wx.config({
       debug: true, //       ,     api         alert  ，         ，   pc   ，       log  ，  pc      。
       appId: 'wx3b70375e1032772b',    //   ，        
       timestamp: data.body.timestamp, //   ，        
       nonceStr: data.body.noncestr,   //   ，        
       signature: data.body.signature, //   ，  ，   1
       jsApiList: ['checkJsApi',
           // 'chooseImage',
           // 'previewImage',
           // 'uploadImage',
           // 'downloadImage',
           // 'getNetworkType',//      
           // 'openLocation',//                
           // 'getLocation', //        
           // 'hideOptionMenu',//      1
           // 'showOptionMenu',//      2
           // 'closeWindow' ,        3
           // 'hideMenuItems',      4
           // 'showMenuItems',      5
           // 'hideAllNonBaseMenuItem',      6
           // 'showAllNonBaseMenuItem',      7
           'scanQRCode'//        
       ] //   ，     JS    ，  JS       2
   });

위 에 네 개의 필수 항목 이 있 습 니 다. 다음 에 우 리 는 그것들 을 어떻게 얻 는 지 소개 할 것 입 니 다.
획득 절차
첫 번 째 단 계 는 위 챗 퍼 블 릭 플랫폼 의 개발 자 도구 인터페이스 에 가서 퍼 블 릭 플랫폼 테스트 계 정 에 들 어가 테스트 번호 정 보 를 얻 는 것 입 니 다. 즉, appID 와 appsick 입 니 다. JS 인터페이스 보안 도 메 인 이름 (인터페이스 방문 화이트 리스트 설정) 을 작성 하고 도 메 인 이름 (등록 해 야 함) 은 포트 번 호 를 작성 해 야 합 니 다. 예 를 들 어 yangqi. site: 1338
두 번 째 단계, access 획득token, 유효기간 7200 s

const appId = ...      //      
const appSecret = ...  //      
https.get(
  'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='+ appId +'&secret=' + appSecret,
  (backData) => {
    backData.on('data', (d) => {
      process.stdout.write(d);
      accessToken = JSON.parse(d)['access-token'];
      res.send(d);  // (   access-token)
    })
  }
)

세 번 째 단계, 두 번 째 단계 에서 얻 은 access - token 에 따라 ticket, 유효기간 7200 s 획득

const accessToken = ...      //          
https.get(
  'https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token='+accessToken+'&type=jsapi',
  (back) => {
    back.on('data', (d) => {
      res.send(d);           //    ticket
    })
  }
)

네 번 째 단 계 는 세 번 째 단계 에서 얻 은 ticket 에 따라 signature 를 얻 습 니 다.signature 를 가 져 오 려 면 noncestr 와 timestamp 가 필요 합 니 다. 배경 이 자동 으로 생 성 되 어야 합 니 다. 위 챗 인터페이스 와 무관 합 니 다.

var ticket = ...    //      

const createNonceStr = () => Math.random().toString(36).substr(2, 15);
const createTimeStamp = () => parseInt(new Date().getTime() / 1000) + '';
const calcSignature = function (ticket, noncestr, ts, url) {
   var str = 'jsapi_ticket=' + ticket + '&noncestr=' + noncestr + '&timestamp='+ ts +'&url=' + url;  // (        +  )
   shaObj = sha1(str);
   return shaObj;
}

const noncestr = createNonceStr();
const timestamp = createTimeStamp();
const signature = calcSignature(ticket, noncestr, timestamp, 'http://yangqi.site:1338/');  //   sha1    

res.send({
  noncestr: noncestr,
  timestamp: timestamp,
  signature: signature,
})

이로써 우 리 는 wx. config 의 모든 내용 을 완전 하 게 얻 을 수 있다.
그러나 wx. config 만 가 져 오 는 것 으로 는 부족 합 니 다. 우 리 는 매번 디 버 깅 코드 를 온라인 에 올 릴 수 없습니다. 이것 은 놀 라 운 것 입 니 다. 우 리 는 로 컬 디 버 깅 을 사용 해 야 합 니 다. 컴퓨터 엔 드 는 host 를 수정 한 후에 nginx 대 리 를 사용 해 야 합 니 다. 그러나 핸드폰 엔 드 네트워크 방문 대 리 를 수정 해 야 합 니 다. 여 기 는 fiddler 를 사용 하 는 것 을 소개 합 니 다.
사용 절차
첫 번 째, 휴대 전화 와 fiddler 가 있 는 컴퓨터 는 반드시 같은 무선 네트워크 에 있어 야 한다.두 번 째 단 계 는 컴퓨터 의 host 를 수정 합 니 다. 예 를 들 어 yangqi. site: 1338 10.10.11.11 세 번 째 단 계 는 핸드폰 이 와 이 파 이 를 연결 할 때 수 동 대 리 를 설정 하고 대 리 를 fiddler 가 있 는 컴퓨터 의 ip 과 fiddler Tools - > Connections - > listen port 로 설정 합 니 다. 예 를 들 어 8888 네 번 째 단 계 는 ip 이 아 닌 도 메 인 이름 에 접근해 야 합 니 다.
마지막 으로 유연 꼬마 친구 의 격려 에 감 사 드 립 니 다. 저 는 깊이 연구 할 수 있 는 힘 이 생 겼 습 니 다.