H5微信公眾號授權的簡(jiǎn)單實(shí)現步驟

前言

昨天因為有一個(gè)項目上面需要實(shí)現h5微信授權工作。所以花了兩個(gè)小時(shí)來(lái)完成這個(gè)功能。​

​

開(kāi)始工作前做的準備

流程說(shuō)明【提前溝通過(guò)的流程】

1. 微信授權具有時(shí)效性，一段時(shí)間內授權之后，就不需要在重復點(diǎn)擊確認。如果卸載微信重新安裝，還是需要重新確認授權的。
2. 不管是第一次確認授權還是授權之后，都可以通過(guò)微信服務(wù)器授權回調到我們的后端接口回調。
3. 微信授權回調之后，會(huì )返回回調回來(lái)的code&state參數，后端可以通過(guò)code獲取accessToken，然后通過(guò)accessToken獲取用戶(hù)信息
4. 后端在接收到服務(wù)器回調之后，在回調到前端的時(shí)候存在兩個(gè)主要的字段，isAuth代表是否授權，isBindFlag代表是否在我們系統當中已經(jīng)注冊登錄。這里因為我們當前的系統需要用戶(hù)授權注冊，所以存在這兩個(gè)字段。

域名，端口

• 準備好的域名 - 公安部備案的域名
• 端口號使用80端口

域名和端口號的要求是因為微信公眾號配置域名以及微信服務(wù)器回調都需要域名和80端口。

這里同一個(gè)域名，端口適配前后端IP，通過(guò)nginx統一代理處理。

​

準備就緒開(kāi)始工作

• 域名：http.xxx.cn
• 前端資源部署：http.xxx.cn
• 后端回調接口：http.xxx.cn/api/auth

配置微信公眾號

域名配置

服務(wù)器根路徑上傳校驗文件，不然域名配置保存不了。

白名單配置

書(shū)寫(xiě)代碼

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

export default () => {
  useEffect(() => {
    // 后端回調回來(lái)路徑格式：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>
  );
};

總結

到此這篇關(guān)于H5微信公眾號授權的文章就介紹到這了,更多相關(guān)微信公眾號授權內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！