快捷導(dǎo)航

H5微信公眾號(hào)授權(quán)的簡單實(shí)現(xiàn)步驟

更新時(shí)間：2021年07月31日 14:47:12 作者：耳東蝸牛

如果用戶在微信客戶端中訪問第三方網(wǎng)頁,公眾號(hào)可以通過微信網(wǎng)頁授權(quán)機(jī)制,來獲取用戶基本信息,進(jìn)而實(shí)現(xiàn)業(yè)務(wù)邏輯,這篇文章主要給大家介紹了關(guān)于微信公眾號(hào)授權(quán)的相關(guān)資料,需要的朋友可以參考下

前言

昨天因?yàn)橛幸粋€(gè)項(xiàng)目上面需要實(shí)現(xiàn)h5微信授權(quán)工作。所以花了兩個(gè)小時(shí)來完成這個(gè)功能。

開始工作前做的準(zhǔn)備

流程說明【提前溝通過的流程】

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

域名，端口

準(zhǔn)備好的域名 - 公安部備案的域名
端口號(hào)使用80端口

域名和端口號(hào)的要求是因?yàn)槲⑿殴娞?hào)配置域名以及微信服務(wù)器回調(diào)都需要域名和80端口。

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

準(zhǔn)備就緒開始工作

域名：http.xxx.cn
前端資源部署：http.xxx.cn
后端回調(diào)接口：http.xxx.cn/api/auth

配置微信公眾號(hào)

域名配置

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

白名單配置

書寫代碼

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

export default () => {
  useEffect(() => {
    // 后端回調(diào)回來路徑格式：http://xxx.cn/#/pages/webAuthorization?bindFlag=0&openid=xxxxxxxxxxx&unionid=null&isAuth=true
    
    var isBindFlag = false, isAuth = false, opendId = '', paramsArray = [];


    /*
     * 省略代碼：地址判斷，參數(shù)處理 賦值給isAuth, isBindFlag, openId
     */ 

    if (!isAuth) {							// 未授權(quán)
      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>
  );
};