快捷導(dǎo)航

前端微信H5公眾號實(shí)現(xiàn)授權(quán)登錄的方法總結(jié)

更新時(shí)間：2025年01月13日 08:32:51 作者：一口一個(gè)人.

這篇文章主要介紹了如何在微信公眾號中實(shí)現(xiàn)網(wǎng)頁授權(quán)功能,包括創(chuàng)建微信服務(wù)公眾號、配置重定向地址、調(diào)試和開發(fā)使用等步驟,文中通過圖文及代碼介紹的非常詳細(xì),需要的朋友可以參考下

一，公眾號

首先我們需要有一個(gè)微信服務(wù)公眾號

首先賬號是需要時(shí)公眾號下的開發(fā)者

還需要在網(wǎng)頁授權(quán)域名中配置相應(yīng)的H5正式域名正式上線是需要用到這個(gè)的

二，重定向code說明

首先我們這為了方便調(diào)試會將線上和本地調(diào)試分開進(jìn)行調(diào)試

這樣就需要我們在前端執(zhí)行中判斷好

網(wǎng)頁授權(quán) | 微信開放文檔

我們可以先看這個(gè) 微信網(wǎng)頁授權(quán)的開發(fā)文檔這個(gè) 重定向登錄說白了就是一個(gè)微信授權(quán)

需要跳轉(zhuǎn)這個(gè)鏈接

https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId.value}&redirect_uri=${local}&response_type=code&connect_redirect=1&scope=snsapi_userinfo&state=STATE#wechat_redirect

其中的lOCAL 就是微信會幫我們跳轉(zhuǎn)的地址所以我們需要微信跳轉(zhuǎn)回來哪個(gè)頁面我們就填哪個(gè)頁面就好了

還是需要編碼的local

  let local = `http://h5.liangpiao.net.cn/cdx2.html`; // 獲取頁面url

  if (window.location.origin.indexOf("192.168.110.71") !== -1) {
    local = `http://h5.liangpiao.net.cn/cdx1.html`; // 獲取頁面url

  //  地址轉(zhuǎn)碼
  local = encodeURIComponent(local);

  //  獲取 code 地址
  let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId.value}&redirect_uri=${local}&response_type=code&connect_redirect=1&scope=snsapi_userinfo&state=STATE#wechat_redirect`;

  window.location.href = url;

看以上的代碼

我們可以看到有兩個(gè)html 文件一個(gè)是本地的地址一個(gè)是線上的地址

這個(gè)就是重定向地址

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body></body>
</html>
<script>
	window.onload = function() {
		window.location.href = `http://192.168.110.71:5173/#/pages/login/index/${location.search}`;
	};
</script>

這個(gè)html 里的內(nèi)容就是一段js

跳轉(zhuǎn)的是

http://192.168.110.71:5173/#/pages/login/index/${location.search}

這個(gè)頁面就是說微信會重定向到這個(gè)頁面里 ·location.search· 這個(gè) / 后面的參數(shù) 這個(gè)必填是用來接收查詢參數(shù)的會有code 參數(shù)在這個(gè)查詢參數(shù)里面

這個(gè)鏈接是我們本地的調(diào)試鏈接

如果正式上線我們需要把本地IP變成線上正式地址但是我們?yōu)榱苏{(diào)試方便我們可以將這個(gè)兩個(gè)都寫上

三，開發(fā)使用

首先我們寫一個(gè)函數(shù)

	const getCode = () => {
		let local = `http://xxxxx/cdx2.html`; // 獲取頁面url 線上


		if (window.location.origin.indexOf("192.168.110.71") !== -1) {
			local = `http://xxxxx/cdx1.html`; // 獲取頁面url  本地
		}

		//  地址轉(zhuǎn)碼
		local = encodeURIComponent(local);

		//  獲取 code 地址
		let url =
			`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId.value}&redirect_uri=${local}&response_type=code&connect_redirect=1&scope=snsapi_userinfo&state=STATE#wechat_redirect`;

		window.location.href = url;
		// Taro.hideLoading();
	};

	//用戶重定向登錄
	const getUserInfo = async (option) => {
		let code = option.code;
		let userInfo = uni.getStorageSync("userInfo") ?
			uni.getStorageSync("userInfo") :
			null;

		if (userInfo) {
			userInfo = await userApi
				.userInfo({
					userId: userInfo.id
				})
				.then((res : any) => res.data);
			// if (!userInfo) {
			// 	Taro.removeStorageSync("userInfo");
			// }
		} else if (code) {
			const openId = await userApi
				.EmitCodeByH5({
					code
				})
				.then((res : any) => res.data);

			openid.value = openId;
			uni.setStorageSync("openid", openId);
			const UserInfoRes = await userApi
				.Login({
					userName: openId
				})
				.then((res : any) => res);
			if (UserInfoRes.state === 200) {
				userInfo = UserInfoRes.data;
				uni.setStorageSync("userInfo", UserInfoRes.data);
				userInfo.value = UserInfoRes.data;
				userStore.setUserinfo(UserInfoRes.data);
				userStore.setToken(UserInfoRes["token"]);
			} else if (UserInfoRes.state === 202) {
				return

			}
		}
		// 如果 userInfo 為空 代表 本地 沒有 緩存數(shù)據(jù) 且 code 不存在 獲取失效  重新獲取code
		if (!userInfo) {
			getCode();
			return;
		} else {

		}
	};

我們需要做一個(gè)判斷根據(jù)緩存判斷微信公眾號就是依據(jù) 微信的緩存進(jìn)行判斷開發(fā) 為了避免有太多的重定向跳轉(zhuǎn) 影響用戶體驗(yàn)

這個(gè)需要做好判斷否則會造成重定向一直進(jìn)行