위 챗 JS - SDK 공유 기능 의 실현

개술
위 챗 JS - SDK 는 위 챗 퍼 블 릭 플랫폼 이 웹 개발 자 에 게 제공 하 는 위 챗 내 웹 개발 키 트 다.위 챗 JS - SDK 를 사용 하면 웹 개발 자 들 은 위 챗 을 통 해 사진 찍 기, 그림 선택, 음성, 위치 등 모 바 일 시스템 을 효율적으로 사용 할 수 있 는 능력 과 함께 위 챗 공유, 스 캔, 카드 바우 처, 결제 등 위 챗 특유 의 능력 을 직접 사용 하여 위 챗 사용자 에 게 더욱 양질 의 웹 체험 을 제공 할 수 있다.
JSDK 사용 절차
단계 1: 귀속 도 메 인 이름
위 챗 공식 플랫폼 에 로그 인하 여 '공중 번호 설정' 의 '기능 설정' 에 'JS 인터페이스 보안 도 메 인' 을 작성 합 니 다.개발 자 센터 에서 해당 하 는 인터페이스 권한 을 봅 니 다.
STEP 2: JS 파일 을 도입 하여 JS 인 터 페 이 스 를 호출 해 야 하 는 페이지 에 다음 JS 파일 을 도입 합 니 다. (https 지원)http://res.wx.qq.com/open/js/jweixin-1.4.0.js 만약 에 서비스 안정성 을 계속 향상 시 키 려 면 상기 자원 이 방문 할 수 없 을 때 방문 을 바 꿀 수 있다.http://res2.wx.qq.com/open/js/jweixin-1.4.0.js (https 지원).비고: AMD / CMD 표준 모듈 로 딩 방법 으로 로 딩 절 차 를 지원 합 니 다. 3. config 인터페이스 주입 권한 검증 을 통 해 JS - SDK 를 사용 해 야 하 는 모든 페이지 에 설정 정 보 를 먼저 주입 해 야 합 니 다. 코드 는 다음 과 같 습 니 다.

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

STEP 4: ready 인터페이스 처 리 를 통 해 성공 적 으로 검증

wx.ready(function(){
    // config        ready  ，          config        ，config           ，                   ，         ready            。             ，       ，     ready   。
});

STEP 5: error 인터페이스 처리 실패 검증

wx.error(function(res){
    // config         error  ，           ，          config debug    ，       res     ，  SPA         。
});

인터페이스 호출 은 모든 인터페이스 가 wx 대상 (jWeixin 대상 도 사용 할 수 있 음) 을 통 해 호출 되 는 것 을 설명 합 니 다. 매개 변 수 는 하나의 대상 입 니 다. 모든 인터페이스 자체 가 전달 해 야 할 매개 변 수 를 제외 하고 다음 과 같은 통용 매개 변수 도 있 습 니 다. 1. success: 인터페이스 호출 이 성공 할 때 실 행 된 리 셋 함수 입 니 다.2. fail: 인터페이스 호출 이 실 패 했 을 때 실 행 된 리 셋 함수.3. complete: 인터페이스 호출 이 완료 되 었 을 때 실 행 된 리 셋 함 수 는 성공 하 든 실패 하 든 실 행 됩 니 다.4. cancel: 사용자 가 취소 할 때의 반전 함 수 를 클릭 하면 일부 사용자 가 취소 한 api 만 사용 할 수 있 습 니 다.5. trigger: Menu 의 단 추 를 감청 할 때 터치 하 는 방법 입 니 다. 이 방법 은 Menu 의 관련 인터페이스 만 지원 합 니 다.
비고: trigger 에서 ajax 비동기 로 이번 공유 내용 을 수정 하 라 고 요청 하지 마 십시오. 클 라 이언 트 공유 작업 은 동기 화 작업 이기 때문에 ajax 를 사용 한 리 턴 은 아직 돌아 오지 않 습 니 다.상기 몇 가지 함 수 는 모두 하나의 매개 변 수 를 가지 고 있 습 니 다. 유형 은 대상 입 니 다. 그 중에서 모든 인터페이스 자체 가 되 돌아 오 는 데 이 터 를 제외 하고 유 니 버 설 속성 errmsg 도 있 습 니 다. 그 값 형식 은 다음 과 같 습 니 다. 호출 성공 시: "xxx: ok" 입 니 다. 그 중에서 xxx 는 호출 된 인터페이스 이름 호출 이 실 패 했 을 때: 그 값 은 구체 적 인 오류 정보 입 니 다.
기초 인터페이스
현재 클 라 이언 트 버 전이 지정 한 JS 인 터 페 이 스 를 지원 하 는 지 판단 합 니 다.

wx.checkJsApi({
    jsApiList: ['chooseImage'], //      JS    ，  JS       2,
    success: function(res) {
    //          ，   api true，    false
    //  ：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
    }
});

공유 인터페이스
'친구 에 게 공유' 및 'QQ 에 공유' 버튼 의 공유 내용 사용자 정의 (1.4.0)

wx.ready(function () {   //                 
    wx.updateAppMessageShareData({ 
        title: '', //     
        desc: '', //     
        link: '', //     ，                     JS      
        imgUrl: '', //     
        success: function () {
          //     
        }
    })
});

'친구 권 으로 공유' 및 'QQ 공간 으로 공유' 버튼 의 공유 내용 사용자 정의 (1.4.0)

wx.ready(function () {      //                 
    wx.updateTimelineShareData({ 
        title: '', //     
        link: '', //     ，                     JS      
        imgUrl: '', //     
        success: function () {
          //     
        }
    })
});

JS - SDK 사용 권한 서명 알고리즘
jsapi_ticket (TP 5.0 프레임) jsapiticket 은 위 챗 JS 인 터 페 이 스 를 호출 하 는 데 사용 되 는 임시 어음 이다.정상 적 인 상황 에서 jsapiticket 의 유효기간 은 7200 초, accesstoken 에서 가 져 옵 니 다.jsapi 획득 으로ticket 의 api 호출 횟수 가 매우 제한 되 어 있 으 며, jsapi 를 자주 갱신 합 니 다.ticket 은 api 호출 이 제한 되 고 자신의 업무 에 영향 을 줄 수 있 습 니 다. 개발 자 는 자신의 서비스 전역 에 jsapi 를 캐 시 해 야 합 니 다.ticket 。 1. 아래 문 서 를 참고 하여 access 획득token (유효기간 7200 초, 개발 자 는 자신의 서비스 전역 캐 시 access token)

    //   access_token
    public function getAccessToken()
    {
        $appid = 'wx849bbe123456789';
        $secret = '0c7c285d6xxxxxxxxxxxxxxx';
        $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$appid&secret=$secret";

        if(!Session::get('access_token')) {
            $json = $this->https_request($url);
            $arr = json_decode($json,true);
            $access_token = $arr['access_token'];
            Session::set('access_token',$access_token);

        } else {
            $access_token = Session::get('access_token');
        }
        return $access_token;


    }

이상 함수 https 필요request 함 수 는 다음 과 같 습 니 다.

public function https_request($url, $data = null)
    {
        $curl = curl_init();
        curl_setopt($curl, CURLOPT_URL, $url);
        curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);
        curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE);
        if (!empty($data)){
            curl_setopt($curl, CURLOPT_POST, 1);
            curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
        }
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
        $output = curl_exec($curl);
        curl_close($curl);
        return $output;
    }

2, 첫 번 째 로 받 은 accesstoken http GET 방식 으로 jsapi 획득 요청ticket (유효기간 7200 초, 개발 자 는 자신의 서비스 전역 에 jsapi ticket 을 캐 시 해 야 합 니 다):https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

//   jsapi_ticket
    public function getTicket()
    {
        $access_token = $this->getAccessToken();
        $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=$access_token&type=jsapi";
        if(!Session::get('ticket')) {
            $tic = $this->curl_http($url);
            $ket = json_decode($tic,true);
            Session::set('ticket',$ket['ticket']);
        }
        $ticket = Session::get('ticket');
        return $ticket;
    }

curl_http 요청 함수, 다음 과 같 습 니 다:

public function  curl_http($url,$data=null){
        $ch = curl_init();
        ////            , PHP.5.6  ，       ，      。
        //curl_setopt($ch,CURLOPT_SAFE_UPLOAD,false);
        //  url    ；
        curl_setopt($ch,CURLOPT_URL,$url);
        //   https   ，    ssl  
        curl_setopt($ch,CURLOPT_SSL_VERIFYHOST,false);
        curl_setopt($ch,CURLOPT_SSL_VERIFYPEER,false);
        //     $data       post  
        if(!empty($data)){
            //       post  
            curl_setopt($ch,CURLOPT_POST,1);
            //  post       
            curl_setopt($ch,CURLOPT_POSTFIELDS,$data);
        }
        //                 ，      ，CURLOPT_RETURNTRANSFER   1， curl_exec         ，        ，           （    ）
        curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
        //  
        $data = curl_exec($ch);
        //  curl  
        curl_close($ch);
        return $data;
    }

다음 JSON 을 성공 적 으로 되 돌려 주 었 습 니 다:

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

jsapi 획득ticket 이후 JS - SDK 권한 검증 서명 을 생 성 할 수 있 습 니 다.
서명 알고리즘 서명 생 성 규칙 은 다음 과 같 습 니 다. 서명 에 참여 하 는 필드 는 noncestr (무 작위 문자열), 유효한 jsapi 를 포함 합 니 다.ticket, timestamp (타임스탬프), url (현재 웹 페이지 의 URL, \ # 및 그 뒷부분 은 포함 되 지 않 음).모든 서명 할 매개 변 수 를 필드 이름 의 ASCII 코드 에 따라 작은 것 부터 큰 것 까지 정렬 한 후 URL 키 쌍 의 형식 (즉, key 1 = value 1 & key 2 = value 2...) 을 문자열 string 1 로 연결 합 니 다.여기 서 주의해 야 할 것 은 모든 매개 변수 이름 이 소문 자 입 니 다.string 1 을 sha1 로 암호 화하 고 필드 이름과 필드 값 은 모두 원본 값 을 사용 하 며 URL 전 의 를 하지 않 습 니 다.STEP 1. 모든 서명 할 매개 변 수 를 필드 이름 의 ASCII 코드 에 따라 작은 것 부터 큰 것 까지 정렬 한 후 URL 키 쌍 의 형식 (즉, key 1 = value 1 & key 2 = value 2...) 을 문자열 string 1 로 연결 합 니 다.

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

STEP 2. string 1 에 sha1 서명 을 하고 signature 를 받 습 니 다.

0f9de62fce790f9a083d5c99e95740ceb90c27ed

주의사항 1. 서명 용 noncestr 와 timestamp 는 wx. config 의 nonceStr 와 timestamp 와 같 아야 합 니 다.2. 서명 에 사용 할 url 은 JS 인터페이스 페이지 의 전체 URL 을 호출 해 야 합 니 다.3. 안전 을 고려 하여 개발 자 는 서버 에서 서명 의 논 리 를 실현 해 야 합 니 다.