위 챗 공식 번호 의 JSDK 접속 및 invalid signature 등 일반적인 오류 분석(전면 분석)

최근 위 챗 공식 번호 개발 을 하면 서 홈 페이지 개발 부분 이 하루 종일 함정 에 빠 졌 다.가장 큰 문 제 는 invalid signature 인 데 인터넷 에서 이 문 제 를 푸 는 사람들 은 대부분 명확 하 게 말 하지 않 고 문 서 를 잃 어 버 렸 다.블 로 거들 은 이렇게 하 는 것 이 매우 좋 지 않다 고 생각한다.본 고 는 블 로 거들 이 자신 이 직면 한 문 제 를 결합 시 켜 쓴 것 으로 전체 절차 와 문제 가 상세 하 다.비록 조판 이 좋 지 않 을 수도 있 지만.하지만 비슷 한 문제 에 부 딪 힌 친구 에 게 는 절대적 으로 도움 이 된다.진지 하 게 봐 주세요.
1.JS 인터페이스 보안 도 메 인 바 인 딩
생산 번호 바 인 딩 방법:위 챗 공공 플랫폼 에 로그 인하 여'공공 번호 설정'의'기능 설정'에'JS 인터페이스 안전 도 메 인 이름'을 작성 합 니 다.
테스트 번호 바 인 딩 방법:테스트 번호 관리 페이지 에 들 어가 JS 인터페이스 보안 도 메 인 이름 항목 바 인 딩 을 찾 습 니 다.
JS 인터페이스 보안 도 메 인 공식 설 은 개발 자가 이 도 메 인 이름 에서 위 챗 이 열 린 JS 인 터 페 이 스 를 호출 할 수 있다 는 것 이다.
도 메 인 이름 형식:프로젝트 도 메 인 이름 이http://test.domain.com,JS 인터페이스 보안 도 메 인 이름 은 test.domain.com 입 니 다.명심 하 세 요!
도 메 인 이름 바 인 딩 에 실 패 했 거나 도 메 인 이름 이 존재 하지 않 으 면 오류 가 발생 합 니 다:invalid url domain
2.위 챗 js 파일 도입
도입 방법:JS 인 터 페 이 스 를 호출 해 야 하 는 페이지 에 JS 파일 을 도입 하고 script 태그 로 도입 하면 됩 니 다.
JS 파일 경로:http://res.wx.qq.com/open/js/jweixin-1.2.0.js(https 지원)
3.wx.config 인터페이스 주입 권한 검증
1.jssdk 를 사용 해 야 하 는 페이지 마다 config 인터페이스 로 설정 정 보 를 주입 해 야 합 니 다.wx.config 호출 방법 은 다음 과 같 습 니 다.

wx.config({
 debug: true, //       ,     api         alert  ，         ，   pc   ，       log  ，  pc      。
 appId: '', //   ，        
 timestamp: , //   ，        ，    
 nonceStr: '', //   ，        
 signature: '',//   ，  
 jsApiList: [] //   ，     JS    ，  ：['chooseImage','previewImage','uploadImage']
})

그 중appId,timestamp,nonceStr,signature은 배경 에서 가 져 와 야 합 니 다.
4.백 스테이지 생 성 및 프론트 엔 드 에 필요 한 매개 변 수 를 되 돌려 줍 니 다.
1、jsapi_ticket
jsapi_ticket 은 js 인 터 페 이 스 를 호출 하 는 데 사용 되 는 임시 어음 이다.유효기간 7200 초,공중 번호 일반 accesstoken 과 마찬가지 로 전역 캐 시 를 해 야 합 니 다.이 ticket 은 가 져 오 는 횟수 가 제한 되 어 있 기 때문에 횟수 를 초과 하면 사용 할 수 없습니다.캐 시 시간 을 7198 초 로 설정 하 는 것 을 권장 합 니 다.위 챗 단 에 jsapi 생 성 을 요청 할 때ticket 이 백 스테이지 에 되 돌아 와 이 동작 을 저장 하 는 데 시간 이 걸 립 니 다.7200 초 를 설정 하면 실제 마지막 1,2 초 동안 캐 시 에 존재 하지만 실제 위 챗 쪽 에 서 는 기한 이 지 났 습 니 다.이 ticket 을 가 져 오 는 데 오류 가 발생 할 수 있 습 니 다.생 성 jsapi티켓 은 다음 과 같 습 니 다:
(1)노 멀 access 획득token(GET 요청): 
https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
(2)첫 번 째 단계 로 획득 한 accesstoken GET 로 jsapi 획득 요청ticket
https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
정확 한 정 보 는 다음 과 같 습 니 다.

{
"errcode":0,
"errmsg":"ok",
"ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
"expires_in":7200
}

2.서명 생 성(signature)
서명 규칙:
1.서명 에 참여 하 는 필드 는 noncestr(무 작위 문자열)를 포함 하고 효과 적 인 jsapiticket,timestamp(타임스탬프),url(현재 웹 페이지 의 URL,\#및 그 뒷부분 은 포함 되 지 않 음).
2.모든 서명 할 매개 변 수 를 필드 이름 의 ASCII 코드 에 따라 작은 것 부터 큰 것 까지 정렬(사전 순서,sort()하면 됩 니 다)한 후 URL 키 쌍 의 형식(즉,key 1=value 1&key 2=value 2...)을 사용 하여 문자열(string)로 연결 합 니 다.
3.sha 1 암호 화 된 문자열 string 을 사용 합 니 다.
메모:필드 이름과 필드 값 은 모두 원 값 을 사용 해 야 합 니 다.url 전 의 를 하지 마 십시오.
참여 필드 예제:

noncestr=Wm3WZYTPz0wzccnW
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
timestamp=1414587457
url=http://mp.weixin.qq.com?params=value

맞 춤 법 이 완 료 된 문자열:
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW×tamp=1414587457&url=http://mp.weixin.qq.com?params=value
sha1 암호 화 된 signature 사용 하기:
0f9de62fce790f9a083d5c99e95740ceb90c27ed
3.서명 생 성 후 appid,timestamp,nonceStr,signature 를 함께 전단 으로 되 돌려 줍 니 다.형식 예제:

{
	appId:appId,
	timestamp:timestamp,
	nonceStr: noncestr,
	signature: signature
}

전단 에서 값 을 받 은 후 wx.config 에 해당 하 는 필드 를 기록 하면 됩 니 다.
주의:
1.전단 wx.config 설정 의 nonceStr 필드 이름 의's'는 대문자 입 니 다.그러나 배경 에 서명 을 만 드 는 noncestr 필드 의's'는 소문 자 이 므 로 블 로 거들 이 이곳 에서 많은 시간 을 낭비 했다 는 것 을 주의해 야 한다.
2.타임 스탬프(timestamp)값 은 밀리초 가 아 닌 초 까지 정확하게 기억 해 야 합 니 다.
3.서명 을 생 성 하 는 url(jssdk 의 페이지 주 소 를 사용 합 니 다.이 페이지 주 소 는 브 라 우 저 에서 방문 할 수 있 습 니 다)은"?"를 포함 합 니 다.번호 뒤의 모든 매개 변 수 는'\#'번호 뒤의 값 을 포함 하지 않 습 니 다.
만약 에 침묵 권한 수여 또는 권한 수여 페이지 가 권한 수여 에 동의 한 후에 넘 어 가 는 페이지 라면 페이지 경 로 는 두 개의 인 자 를 추가 합 니 다:code 와 state.
인증 후 페이지 전환http://redirect.page.com전체 경로
http://redirect.page.com?code=kdijafdhjaikeiu20kaiela&state=STATE。
서명 을 만 드 는 url 은 인증 후 페이지 를 뛰 어 넘 는 전체 경로 여야 합 니 다.프론트 에서 이 경 로 를 가 져 옵 니 다:location.href.split('#')[0]주의:여기 큰 구덩이 가 있어 요.만약 전단 에서 ajax(jquery 사용)를 사용 하여 wx.config 설정 에 필요 한 몇 개의 매개 변수의 값 을 가 져 오 면 이렇게 할 수 있 습 니 다.

$.ajax({
	url: 'http://backend.com?fullUrl=' + location.href.split('#')[0]， //     fullUrl        url(  #    )
	type: 'GET',
	success: function(res) {
		//       
	}
})

백 엔 드 에서 들 려 오 는 query 값 을 어떻게 조작 해 야 합 니까?query 에 있 는 fullUrl 필드 를 한눈 에 알 아 보면 되 잖 아 요.
블 로 거들 도 이렇게 했 습 니 다.블 로 거들 배경 코드(nodejs 의 koa 프레임 워 크 사용)를 보 세 요.

let query = this.request.query;//       
let fullUrl = query.fullUrl;//         fullUrl  

어 때,뭔 가 이상 한 점 이 있 나?없다
블 로 거들 은 모든 후속 획득 accesstoken、jsapi_ticket,계산 서명,반환 값 을 전단,전단 wx.config 로 설정 하여 이 모든 작업 을 마치 고 자신 있 게 테스트 번호 로 페이지 에 접근 하기 시작 합 니 다.결 과 는 config:invalid signature(debug 모드 열기)를 직접 팝 업 합 니 다.WTF ？？？
물론 이 일 을 하 는 데 는 이미 문제 에 부 딪 힐 마음의 준 비 를 마 쳤 다.잘못 배열 하기 시 작 했 지.
우선 배경 에서 access 획득token、jsapi_ticket,서명 한 매개 변수 사전 순 서 를 계산 하여 정렬 한 문자열,sha 1 암호 화 된 문자열 은 모두 console.log 입 니 다.
잘못된 점 이 없다 는 것 을 발견 하 다.그 줄,내 코드 가 잘못된 것 같 거나 서명 이 잘못된 것 같 습 니 다.
위 챗 온라인 인터페이스 디 버 깅 에 가서 방금 인쇄 한 계산 서명 의 몇 가지 인 자 를 각각 채 워 라.생기다내 코드 와 똑 같이 생 성 된 것 을 발견 했다.
그 결과 블 로 거들 은 각종 오류,각종 바 이 두,각종 구 글 이 었 다.결국 config:invalid signature........................................................................
또 이렇게 한 시간 넘 게 지 났 는데.........................................................블 로 거들 은 의기소침 한 표정 으로 찻물 에 가서 커피 를 한 잔 탔 다.정신 차 려.다시 자리 로 돌아 와 처음부터 한 번 뛰 고 다시 자세히 볼 준 비 를 하고 있다.
전단 에서 서명 인 터 페 이 스 를 요청 할 때 부터 블 로 거들 은 query 의 값 을 인쇄 했 습 니 다.let query = this.request.query 의 값 입 니 다.결국query 값 은:

{
	fullUrl: 'http://redirect.page.com?code=kdijafdhjaikeiu20kaiela',
	state: 'STATE'
}

좋아,문 제 는 여기에 있 는데,누가 벌써 알 아 본 적 이 있 니?앞에서 말 했 듯 이 위 챗 웹 페이지 에서 권한 을 수 여 받 은 후 이동 하 는 페이지 의 전체 경 로 는?
http://redirect.page.com?code=kdijafdhjaikeiu20kaiela&state=STATE
경로 맨 뒤의'&state=STATE'에 주의 하 셨 습 니까?이 전체 경 로 를 검색 문자열 로 백 엔 드 에 전 달 했 을 때 이 경 로 를 encodeURIComponent 로 하지 않 았 기 때문에 백 엔 드 는'&state=STATE'를 검색 문자열 파라미터 로 단독으로 보 았 습 니 다.문제점 은 여기에 있 습 니 다.
나중에 공중 번호 문 서 를 보 니'부록 5-흔 한 오류 및 해결 방법'제6 조 에 설명 이 있 습 니 다.
문제 해결
사용encodeURIComponent(location.href.split('#')[0])하면 됩 니 다
호출 인터페이스
wx.config 설정 이 완료 되면 wx.ready 방법 을 실행 합 니 다.모든 인 터 페 이 스 는 config 가 결 과 를 되 돌려 준 후에 조작 해 야 합 니 다.config 는 클 라 이언 트 의 비동기 작업 이기 때문에 페이지 에 불 러 올 때 관련 인 터 페 이 스 를 호출 하려 면 관련 인 터 페 이 스 를 ready 함수 에 넣 어 올 바른 실행 을 확보 해 야 합 니 다.사용자 가 트리거 할 때 만 호출 되 는 인 터 페 이 스 는 ready 함수 에 넣 지 않 아 도 됩 니 다.현재 페이지 에서 사용 할 인 터 페 이 스 를 config 설정 의 jsApiList 에 기록 합 니 다.
1.사진 을 찍 거나 핸드폰 앨범 에서 그림 인 터 페 이 스 를 선택한다.

document.getElementById('chooseImage').onclick = function(){
 wx.chooseImage({
 count: 1, //   9
 sizeType: ['original', 'compressed'], //             ，      
 sourceType: ['album', 'camera'], //              ，      
 success: function (res) {
 var localIds = res.localIds; //          ID  ，localId    img   src      
 }
 });
}

6.흔히 볼 수 있 는 문제
1、invalid url domain:
js 인터페이스 보안 도 메 인 오류.1 번 볼 수 있어 요.
2、invalid signature:
아니면 jsapiticket 오류,서명 알고리즘 문제,알고리즘 매개 변수 에 문제 가 있 거나,noncestr 의's'는 소문 자 입 니 다.다 맞 으 면바로 전단 에 전 달 된 url 에 문제 가 있 습 니 다...잘 검사 해 봐,블 로 거들 처럼...
3、permission denied:
이 문 제 는 일반적으로 인터페이스 권한 이 없 는 문제 이다.어떤 인 터 페 이 스 는 인증 한 후에 야 사용 할 수 있다.물론 테스트 번 호 는 이 문제 가 없 을 것 이다.
총결산
위 챗 공식 번호 에 있 는 JSDK 접속 및 invalid signature 등 자주 발생 하 는 오류 분석(전면 해석)에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.위 챗 공식 번호 JSDK 가 invalid signature 에 접속 하 는 오류 내용 은 예전 의 글 을 검색 하거나 아래 의 관련 글 을 계속 읽 어 주시 기 바 랍 니 다.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!