ajax 위 챗 페이지 인증 로그 인 방법

프로젝트 배경
프로젝트 는 전후 단 완전 분리 방안 을 사용 하기 때문에 일반적인 위 챗 권한 수여 로그 인 방법 을 사용 할 수 없습니다.ajax 를 사용 하여 위 챗 권한 수여 로그 인 을 실현 해 야 합 니 다.
수요 분석
본인 은 페 퍼 이기 때문에 위 챗 개발 은 EasyWeChat 을 사용 하기 때문에 실현 하 는 방식 은 EW 에 기반 한 것 입 니 다.
사실 이것 을 실현 하 는 것 도 번 거 롭 습 니 다.실현 하기 전에 우 리 는 위 챗 권한 수여 의 전체 절 차 를 알 아야 합 니 다.

사용자 가 권한 수여 페이지 에 들 어가 권한 수여 에 동의 하도록 유도 하고 코드 를 받 습 니 다

코드 를 통 해 웹 페이지 권한 부여 accesstoken(기본 지원 중인 accesstoken 다 름)

필요 하 다 면 개발 자 는 웹 페이지 권한 부여 access 를 새로 고 칠 수 있 습 니 다.token,기한 이 지나 지 않도록 하 세 요.

웹 페이지 를 통 해 access 권한 부여token 과 openid 는 사용자 의 기본 정 보 를 가 져 옵 니 다(UnionID 메커니즘 지원)

사실은 앞에서 한 가지 일 만 하고 사용자 가 위 챗 권한 수여 페이지 를 시작 하도록 유도 한 다음 에 code 를 받 은 다음 에 현재 페이지 로 이동 한 다음 에 백 엔 드 에 사용자 와 다른 관련 정 보 를 바 꿔 달라 고 요청 합 니 다.
기능 실현
사용자 가 위 챗 인증 확인 페이지 를 불 러 오도 록 유도 합 니 다.
이것 은 우리 가 두 가지 일 을 해 야 합 니 다.첫째,jsapi 도 메 인 이름 을 설정 하고,둘째,위 챗 페이지 에서 권한 을 수 여 받 은 리 셋 도 메 인 이름 을 설정 합 니 다.
위 챗 인증 을 구축 하 는 url "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appId + "&redirect_uri=" + location.href.split('#')[0] + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect 연결 에서 두 개의 변수,appId,그리고 redirect 를 볼 수 있 습 니 다.uri。appId 는 더 이상 말 할 필요 가 없습니다.바로 우리 가 권한 을 수 여 받 을 위 챗 공중 번호 의 appId 입 니 다.다른 쪽 의 리 셋 URL 은 바로 현재 페이지 의 URL 입 니 다.

사용자 가 위 챗 로그 인 권한 을 수 여 받 은 후에 되 돌아 온 URL 은 두 개의 인 자 를 가지 고 있 습 니 다.첫 번 째 는 code 이 고 다른 하 나 는 state 입 니 다.우리 가 해 야 할 일 은 code 를 가 져 와 백 엔 드 에 전달 하고 염색 백 엔 드 는 code 를 통 해 사용자 의 기본 정 보 를 얻 는 것 입 니 다

4.567917.백 엔 드 에서 code 를 받 은 후에 사용자 의 기본 정 보 를 얻 고 관련 다른 정 보 를 전단 에 되 돌려 주 며 전단 에서 얻 은 다음 에 로 컬 저장 또는 다른 것 을 합 니 다

function getUrlParam(name) {

  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
  var r = window.location.search.substr(1).match(reg);
  if (r != null) return unescape(r[2]);
  return null;
}

function wxLogin(callback) {
  var appId = 'xxxxxxxxxxxxxxxxxxx';
  var oauth_url = 'xxxxxxxxxxxxxxxxxxx/oauth';
  var url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appId + "&redirect_uri=" + location.href.split('#')[0] + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"
  var code = getUrlParam("code");
  if (!code) {
    window.location = url;
  } else {
    $.ajax({
      type: 'GET',
      url: oauth_url,
      dataType: 'json',
      data: {
        code: code
      },
      success: function (data) {
        if (data.code === 200) {
          callback(data.data)
        }
      },
      error: function (error) {
        throw new Error(error)
      }
    })
  }

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