상세 설명 Vue 위 챗 공중 번호 개발 구덩이 밟 기 전 기록

본 고 는 Vue 위 챗 공중 호 개발 구덩이 밟 기 전 기록 을 소개 하고 여러분 에 게 공유 하 며 자신 에 게 도 필 기 를 남 겼 습 니 다.
수요

위 챗 권한 수여 로그 인(공중 번호 기반 로그 인 방안)

JS-SDK 에 접속 하여 이미지 업로드,공유 등 기능 을 실현 합 니 다

현황 및 난점

사용 하 는 Vue 프레임 워 크,앞 뒤 분리 모드(vue 프로젝트 는 클 라 이언 트 로 만 사용),사용자 가 도 메 인 이름 을 통 해 방문 하 는 것 은 클 라 이언 트 이지 만 위 챗 권한 수여 에서 서명 과 token 검증 은 서버 에 의존 합 니 다

JS-SDK 는 서버 에 서명 을 받 아야 하고 서명 에 필요 한 매개 변 수 는 해당 페이지 의 url 을 포함 합 니 다.그러나 단일 페이지 응용 경로 가 특수 하기 때문에 IOS 와 android 위 챗 클 라 이언 트 브 라 우 저 커 널 의 차이 로 인 한 호환성 문제 와 관련 됩 니 다

해결 방안
인증 로그 인
권한 수여 절 차 는 다음 과 같다.

상세 설명:
사용자 가 사이트 의 메 인 도 메 인 이름 을 방문 하 다.

vue 클 라 이언 트(domain/)가 요청 을 받 고 경로 분석 전에 사용자 의 로그 인 여 부 를 판단 합 니 다(예 를 들 어 쿠키 검사)

4.567917.로그 인 하지 않 으 면 api 를 통 해 위 챗 권한 수여 주 소 를 얻 고 가 져 온 후에 위 챗 서버 권한 수여 페이지 로 이동 합 니 다

사용자 가 권한 수 여 를 확인 하고 위 챗 서버 에서 리 셋 요청 을 할 때 서버 엔 드(domain/api/xxx)로 리 셋 해 야 합 니 다

서버 측 에서 사용자 정 보 를 저장 하고 로그 인 작업(쿠키 기록)을 하 며 vue 클 라 이언 트(domain/)로 다시 설정 합 니 다

첫 번 째 단 계 를 반복 하고 로그 인 성공 권한 을 부여 합 니 다

구덩이 밟 기 기록:
다음은 오류 권한 수여 방안 입 니 다.

이 방안 은 왜 틀 렸 습 니까?사실 권한 수여 로그 인 만 실현 하면 이 방안 은 가능 하고 뚜렷 하 다.vue 클 라 이언 트 는 일방적으로 서버 와 위 챗 서버 간 에 통신 을 하고 위 챗 서버 는 서버 와 직접 통신 할 수 없다.이 방안 의 구 덩이 는 위 챗 이 리 셋 권한 을 수 여 받 았 을 때 code 인 자 를 가지 고 있 습 니 다.이 인 자 는 vue 경로 가 오염 되 어 ios 에서 JS-SDK 서명 을 할 때 실 패 했 습 니 다(추 후 이 문 제 를 구체 적 으로 설명 합 니 다).
JS-SDK 서명
사인 에 대해 서 는 공식 적 으로 이렇게 말 합 니 다.
JS-SDK 를 사용 해 야 하 는 모든 페이지 는 설정 정 보 를 먼저 입력 해 야 합 니 다.그렇지 않 으 면 호출 할 수 없습니다.(같은 url 은 한 번 만 호출 하면 됩 니 다.url 이 변 하 는 SPA 의 웹 app 은 url 이 변 할 때마다 호출 할 수 있 습 니 다.
vue 에서 루트 는 history 와 hash 두 가지 모드 가 있 습 니 다.history 모드 에서 이상 적 인 디자인 방안 은 JS-SDK 구성 요 소 를 사용 해 야 할 때 다음 과 같은 현재 url(즉,location.href.split('\#')[0]을 통 해 얻 은 주소)을 서버 에 전달 하여 서명 하면 문제 가 없 을 것 입 니 다.그러나 IOS 에서 얻 은 url 은 위 챗 js 를 호출 할 때 있 는 페이지 의 주소 가 아 닙 니 다.사이트 첫 페이지 에 들 어 가 는 주소 입 니 다.
인터넷 에서 조회 한 방안 은 ios 장치 가 페이지 에 들 어 갈 때 현재 url 을 기록 하고 권한 수여 페이지 에 기 록 된 url 을 서버 에 전달 하여 서명 하 는 것 입 니 다.이 방안 은 실천 을 통 해 가능 하 다.엄 마 는 더 이상 나의 인터넷 주소 가 매우 추 하고 보기 흉 하 다 는 것 을 걱정 하지 않 아 도 된다.
또 다른 방안 은 hash 모드 를 사용 하 는 것 입 니 다.이 모드 에서 url 은 항상 주 도 메 인 주소 일 뿐 url 을 전달 하 는 고민 을 줄 이 고 호 환 을 처리 할 필요 가 없습니다.따라서 경로 에\#가 있 는 것 을 권장 하지 않 는 다 면 이 방안 은 최 우선 방안 이 어야 합 니 다.
여기 또 하나의 깊 은 구덩이 가 있 습 니 다.만약 에 권한 수여 방안 이 상기 vue 클 라 이언 트 가 리 셋 을 처리 하 는 방식 을 채택 하면 ios 는 영원히 서명 에 성공 하지 못 할 것 입 니 다.왜 냐 면 이런 방안 의 길 은 보통 이 렇 기 때 문 입 니 다.http://domain.com/?code=xxxxxx&stat=#/xxx이 경로 에 인자 가 있 는 url 은 서명 검사 에 성공 할 수 없습니다!
이 경로 에 인자 가 있 는 url 은 서명 검사 에 성공 할 수 없습니다!
이 경로 에 인자 가 있 는 url 은 서명 검사 에 성공 할 수 없습니다!
중요 한 얘 기 는 세 번 해 야 지.
Coding
코드 에 맞지 않 는 어떠한 협박 도 깡패 짓 이다.여기 서 필 자 는 vue 에서 구체 적 으로 어떻게 coding 하 는 지 공유 했다.
위 챗 인증 로그 인
필 자 는 프로젝트 에 사 용 된 vue-router 를 사용 하여 경로 통 제 를 하고 vuex 를 사용 하여 사용자 로그 인 정 보 를 기록 하 였 으 나 vuex 에 저 장 된 내용 은 페이지 가 새로 고침 되면 잃 어 버 릴 수 있 기 때문에 서버 에서 사용자 로그 인 상 태 를 쿠키 에 적 었 습 니 다.vue 에서 이 두 가지 항목 을 통 해 로그 인 판단 을 해 야 합 니 다.BB 가 많 지 않 으 니 코드 를 직접 보 세 요.

// ... other code

router.beforeEach((to, from, next) => {
 if ((!VueCookie.get('user') && !store.state.userInfo)) {
  //      
  console.log('    ')
  //          ，             
  axios.post('/api/login').then(res => {
   var data = res.data
   if (data.code === 100) {
    window.location.href = data.data
   }
  })
 } else if (!store.state.userInfo) {
  //     ，      vuex
  axios.get('/api/currentuser').then(res => {
   if (res.data.code === 100) {
    store.dispatch('setUserInfo', res.data.data)
    next()
   }
  })
  console.log('cookie      ')
  next()
 } else {
  //     
  console.log('   ')
  next()
 }
})

//... other code

history 모드 의 JS-SDK 서명
입구 파일 에 현재 url 을 vuex 에 저장 합 니 다.

// ... other code
router.beforeEach((to, from, next) => {
 document.title = to.meta.title
 //   jssdk  ,  history  
 if (!store.state.url) {
  store.commit('setUrl', document.URL)
 }
 // ... other code

서명 을 가 져 올 구성 요소 에서 가 져 오고 설정 합 니 다.

// ... other code
created () {
   var sef = this
   var url = ''
   //      ios     
   if (window.__wxjs_is_wkwebview === true) {
    url = this.$store.state.url.split('#')[0]
   } else {
    url = window.location.href.split('#')[0]
   }
   this.$http.get('/api/jssdk?url=' + url).then(function (res) {
    sef.lists = res.data.data
    hmTools.wechact(sef.lists, sef) //js-sdk  
   })
  }
// ...other code

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.