花了兩小時完成微信公衆號受權

昨天由於有一個項目上面須要實現h5微信受權工做。因此花了兩個小時來完成這個功能。 ​

​

開始工做前作的準備

流程說明【提早溝經過的流程】

1. 微信受權具備時效性，一段時間內受權以後，就不須要在重複點擊確認。若是卸載微信從新安裝，仍是須要從新確認受權的。
2. 無論是第一次確認受權仍是受權以後，均可以經過微信服務器受權回調到咱們的後端接口回調。
3. 微信受權回調以後，會返回回調回來的code&state參數，後端能夠經過code獲取accessToken，而後經過accessToken獲取用戶信息
4. 後端在接收到服務器回調以後，在回調到前端的時候存在兩個主要的字段，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>
  );
};
複製代碼

​

結束工做！ ​

​

​