前言

昨天因為有一個專案上面需要實現h5微信授權工作。所以花了兩個小時來完成這個功能。​

​

開始工作前做的準備

流程說明【提前溝通過的流程】www.cppcns.com

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 "@taro/components";

export default () => {
  useEffect(() => {
    // 後端回調回來路徑格式：http://xxx.cn/#/pages/webAuthorization?bindFlag=0&openid=xxxxxxxxxxx&unionid=null&isAuth=true
    
    var isBindFlag = false,isAuth = false,ophttp://www.cppcns.com
 
endId = '',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微信公眾號授權的文章就介紹到這了,更多相關微信公眾號授權內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！