H5 위 챗 공식 번호 권한 수여 의 간단 한 실현 절차

머리말
어제 h5 위 챗 권한 수여 작업 이 필요 한 프로젝트 가 있어 서 요.그래서 이 기능 을 완성 하 는 데 두 시간 이 걸 렸 다.​
​
시작 전 준비
절차 설명[미리 도랑 을 통과 하 는 절차]

4.567917.위 챗 권한 수 여 는 실효 성 을 가지 고 한 동안 권한 을 수 여 받 은 후에 중복 클릭 으로 확인 할 필요 가 없다.위 챗 을 마 운 트 해제 하고 다시 설치 하려 면 인증 을 다시 확인 해 야 합 니 다4.567917.권한 수 여 를 처음 확인 하 든 권한 수 여 를 받 은 후에 도 위 챗 서버 권한 수 여 를 통 해 우리 의 백 엔 드 인터페이스 로 되 돌 릴 수 있 습 니 다

위 챗 이 리 셋 권한 을 수 여 받 은 후에 리 셋 된 code&state 인 자 를 되 돌려 줍 니 다.백 엔 드 는 code 를 통 해 accessToken 을 얻 은 다음 에 accessToken 을 통 해 사용자 정 보 를 얻 을 수 있 습 니 다

4.567917.백 엔 드 는 서버 리 셋 을 받 은 후에 프론트 로 리 셋 할 때 두 개의 주요 필드 가 존재 합 니 다.isAuth 대표 가 권한 을 수 여 했 는 지,isBindFlag 대표 가 우리 시스템 에 등록 되 어 있 는 지 여부 입 니 다.현재 시스템 은 사용자 권한 을 부여 하여 등록 해 야 하기 때문에 이 두 필드 가 존재 합 니 다포트
준 비 된 도 메 인-공안 부가 등록 한 도 메 인포트 번 호 는 80 포트 를 사용 합 니 다도 메 인 이름과 포트 번호 의 요 구 는 도 메 인 이름과 위 챗 서버 의 리 셋 이 모두 도 메 인 이름과 80 포트 가 필요 하기 때문이다.
여기 같은 도 메 인 이름 입 니 다.포트 는 앞 뒤 IP 에 적합 하고 nginx 를 통 해 프 록 시 처 리 를 통일 합 니 다.
​
준비 가 다 되 어 일 을 시작 하 다.
도 메 인 이름:http.xxx.cn

전단 자원 배치:http.xxx.cn

백 엔 드 리 셋 인터페이스:http.xxx.cn/api/auth위 챗 공식 번호 설정
도 메 인 이름 설정
서버 루트 경로 에서 검사 파일 을 업로드 합 니 다.그렇지 않 으 면 도 메 인 이름 설정 을 저장 할 수 없습니다.

화이트 리스트 설정

코드 를 쓰다

import React, { useEffect } from "react";
import { View } from "@tarojs/components";

export default () => {
  useEffect(() => {
    //           ：http://xxx.cn/#/pages/webAuthorization?bindFlag=0&openid=xxxxxxxxxxx&unionid=null&isAuth=true
    
    var isBindFlag = false, isAuth = false, opendId = '', paramsArray = [];


    /*
     *     ：    ，        isAuth, isBindFlag, openId
     */ 

    if (!isAuth) {							//    
      window.location.href=`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${'xxxxxxx'}&redirect_uri=http://xxxxx/api/auth?response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect`;
    } else if (!isBindFlag) {   //    
      window.location.href = '#/pages/login'
    } else {               			//   
      window.location.href = '#/pages/index'
    }
  }, []);

  return (
    <View>
    </View>
  );
};

총결산
여기 서 H5 위 챗 공식 번호 권한 수여 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 위 챗 공식 번호 권한 수여 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 우 리 를 많이 지지 해 주시 기 바 랍 니 다!