Simple steps to implement H5 WeChat public account authorization

Preface

Yesterday, there was a project that required the implementation of h5 WeChat authorization. So it took two hours to complete this function.​

​

Preparation before starting work

Process description [process communicated in advance]

1. WeChat authorization is time-limited. Once authorized within a period of time, there is no need to click to confirm again. If you uninstall WeChat and reinstall it, you still need to reconfirm the authorization.
2. Whether it is the first time to confirm the authorization or after authorization, you can use the WeChat server to authorize the callback to our backend interface callback.
3. After WeChat authorization callback, the code & state parameters will be returned. The backend can obtain accessToken through code, and then obtain user information through accessToken.
4. After the backend receives the server callback, there are two main fields when calling back to the front end: isAuth represents whether it is authorized, and isBindFlag represents whether it has been registered and logged in in our system. Here, because our current system requires user authorization registration, these two fields exist.

Domain name, port

• Prepared domain name - Domain name registered with the Ministry of Public Security
• The port number is 80.

The domain name and port number are required because the domain name and port 80 are required for WeChat public account configuration and WeChat server callback.

Here, the same domain name and port are adapted to the front-end and back-end IP addresses, and are processed through the nginx unified proxy.

​

Ready to work

• Domain name: http.xxx.cn
• Front-end resource deployment: http.xxx.cn
• Backend callback interface: http.xxx.cn/api/auth

Configure WeChat public account

Domain name configuration

Upload the verification file to the server root path, otherwise the domain name configuration cannot be saved.

Whitelist configuration

Writing code

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

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


    /*
     * Omitted code: address determination, parameter processing and assignment to isAuth, isBindFlag, openId
     */ 

    if (!isAuth) { // Unauthorized 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) { // Not registered window.location.href = '#/pages/login'
    } else { // Login window.location.href = '#/pages/index'
    }
  }, []);

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

Summarize

This is the end of this article about H5 WeChat public account authorization. For more relevant WeChat public account authorization content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!