快捷導(dǎo)航

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

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

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

一，公眾號(hào)

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

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

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

二，重定向code說(shuō)明

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

這樣就需要我們?cè)谇岸藞?zhí)行中判斷好

網(wǎng)頁(yè)授權(quán) | 微信開(kāi)放文檔

我們可以先看這個(gè) 微信網(wǎng)頁(yè)授權(quán)的開(kāi)發(fā)文檔這個(gè) 重定向登錄說(shuō)白了就是一個(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 就是微信會(huì)幫我們跳轉(zhuǎn)的地址所以我們需要微信跳轉(zhuǎn)回來(lái)哪個(gè)頁(yè)面我們就填哪個(gè)頁(yè)面就好了

還是需要編碼的local

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

  if (window.location.origin.indexOf("192.168.110.71") !== -1) {
    local = `http://h5.liangpiao.net.cn/cdx1.html`; // 獲取頁(yè)面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è)頁(yè)面就是說(shuō)微信會(huì)重定向到這個(gè)頁(yè)面里 ·location.search· 這個(gè) / 后面的參數(shù) 這個(gè)必填是用來(lái)接收查詢(xún)參數(shù)的會(huì)有code 參數(shù)在這個(gè)查詢(xún)參數(shù)里面

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

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

三，開(kāi)發(fā)使用

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

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


		if (window.location.origin.indexOf("192.168.110.71") !== -1) {
			local = `http://xxxxx/cdx1.html`; // 獲取頁(yè)面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();
	};

	//用戶(hù)重定向登錄
	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 為空 代表 本地 沒(méi)有 緩存數(shù)據(jù) 且 code 不存在 獲取失效  重新獲取code
		if (!userInfo) {
			getCode();
			return;
		} else {

		}
	};

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

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

總結(jié)

到此這篇關(guān)于前端微信H5公眾號(hào)實(shí)現(xiàn)授權(quán)登錄的文章就介紹到這了,更多相關(guān)前端微信H5公眾號(hào)授權(quán)登錄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: