Yesterday, there was a project that needed to implement H5 wechat authorization. So it took two hours to complete this feature.

​

Preparation before starting work

Process description [Process communicated in advance]

  1. Wechat authorization has timeliness. After a period of time, there is no need to repeatedly click confirm. If you uninstall wechat to reinstall, or need to reconfirm the authorization.
  2. Whether the authorization is confirmed for the first time or after authorization, it can be called back to our back-end interface callback through the wechat server authorization.
  3. After wechat authorization callback, the returned code&State parameter will be returned. The back end can obtain accessToken through code, and then obtain user information through accessToken
  4. After receiving the server callback, there are two main fields when the back end calls back to the front end. IsAuth represents whether the server is authorized, and isBindFlag represents whether the server has registered and logged in our system. Here, because our current system requires user authorization registration, these two fields exist.

Domain name, port

  • Ready domain name – The domain name for the public Security Ministry
  • Port Number Port 80 is used

The requirements of the domain name and port number are because the configuration of the domain name of the wechat official account and the callback of the wechat server require the domain name and port 80.

In this case, the domain name is the same, and the port is adapted to the IP addresses of the front and back ends, which are processed by the NGINX unified agent.

​

Ready to start work

  • Domain name: HTTP. XXX. Cn
  • Front-end resource deployment: http.xxx.cn
  • The back-end callback interface is http.xxx.cn/api/auth

Configure a wechat official account

The domain name configuration

Upload the verification file to the server root directory. Otherwise, the domain name configuration cannot be saved.

Whitelist Configuration

Write the code

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

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


    /* * Omit code: address judgment, parameter processing assigned to isAuth, isBindFlag, openId */ 

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

​

Finish the job!

​

​