uniapp开发h5微信授权登录(详细教程)

最新推荐文章于 2025-03-11 17:15:34 发布

措手不及ya

最新推荐文章于 2025-03-11 17:15:34 发布

阅读量1.9w

点赞数 21

分类专栏： uniapp专栏文章标签：微信 uni-app

本文链接：https://blog.csdn.net/m0_56144469/article/details/128021388

版权

uniapp专栏专栏收录该内容

7 篇文章

订阅专栏

uniapp开发h5微信授权登录

文章目录

uniapp开发h5微信授权登录
前言
一、前期准备--申请测试账号
二、正式开发--前端代码
三、打包发布
总结

前言

我也是第一次做h5授权微信登录，网上找了很久，基本差不多做法，但是不太适用于我的流程。

公众号官方文档：https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Overview.html
绝大部分的可以参考文章:https://blog.csdn.net/anjignren/article/details/126176449
如果想了解具体的，可以看这位博主的，我觉得写的很详细：https://www.cnblogs.com/0201zcr/p/5131602.html

实现步骤：

1．用户关注微信公众账号。

2．微信公众账号提供用户请求授权页面URL。

3．用户点击授权页面URL，将向服务器发起请求

4．服务器询问用户是否同意授权给微信公众账号(scope为snsapi_base时无此步骤)

5．用户同意(scope为snsapi_base时无此步骤)

6．服务器将CODE通过回调传给微信公众账号

7．微信公众账号获得CODE

8．微信公众账号通过CODE向服务器请求Access Token

9．服务器返回Access Token和OpenID给微信公众账号

10．微信公众账号通过Access Token向服务器请求用户信息(scope为snsapi_base时无此步骤)
　　
11．服务器将用户信息回送给微信公众账号(scope为snsapi_base时无此步骤)

一、前期准备–申请测试账号

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

微信扫一扫进去之后的页面，可以把测试账号的信息保存下来，接下来会使用到。

在这里插入图片描述
翻到底下，扫码关注

接下来，选择公众号网页项目，

输入地址测试

测试地址这样获取
可以看官网的：https://uniapp.dcloud.net.cn/collocation/manifest.html#h5-template
1.根目录下新建一个template.h5.html文件，复制粘贴直接用（看个人，我没有用到）

<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>
			<%= htmlWebpackPlugin.options.title %>
		</title>
		<!-- Open Graph data -->
		<!-- <meta property="og:title" content="Title Here" /> -->
		<!-- <meta property="og:url" content="http://www.example.com/" /> -->
		<!-- <meta property="og:image" content="http://example.com/image.jpg" /> -->
		<!-- <meta property="og:description" content="Description Here" /> -->
		<script>
			var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
			document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
		</script>
		<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
	</head>
	<body>
		<noscript>
			<strong>Please enable JavaScript to continue.</strong>
		</noscript>
		<div id="app"></div>
		<!-- built files will be auto injected -->
	</body>
</html>

2、配置mainifest.json
在这里插入图片描述

3.在运行到浏览器，将地址复制出来，到微信开发者工具中使用
在这里插入图片描述

测试的时候是可以这样操作的，但是正式使用的时候根本不需要用到这些，appID后端都会给我们，看个人公司了

二、正式开发–前端代码

在uniapp 项目中新建一个登录授权页面，开始写我们的代码部分。如果你的流程跟我一样，代码如下，可以拿过去直接用，换下接口就行：
需要注意的是code只有使用一次，不能重复使用，在开发的过程中可能会遇到这种问题，导致流程走不通

<template>
    <view></view>
</template>
 
<script>
// h5 使用控制台打log 得先npm install vconsole
import Vconsole from 'vconsole';
export default {
	data() {
		return {
			code:'',
			state:''
		}
	},
    onLoad() {
	   let vConsole = new Vconsole();
	   this.state = this.getUrlCode('state')
	   this.checkWeChatCode(this.code)
    },
    methods: {
		checkWeChatCode() {
			// 页面一进来先判断是否有code
			this.code = this.getUrlCode('code')
			if (this.code) {
			// 如果有，走登记接口
				this.getLogin(this.code)
			} else {
			// 没有调后端接口获取地址
				let params = {
				    url:window.location.href,//当前页面的详细地址
				    state:this.state,
				    authType:0
				}
				xxxx(params).then(res => {
					if(res.data.code == 0){
						window.location.href = res.data.message
					}else {
						this.$u.toast(res.data.message)
					}
				})
				// 根据需求使用 this.getCode()
			}
		},
		getUrlCode (name) {
			return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || null
		},
		// 获取code
		// getCode () {
		// 	window.location.href = 
		// 	'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + this.appID +
		// 	'&redirect_uri=' + encodeURIComponent(this.callBack) +
		// 	'&response_type=code&scope=snsapi_userinfo&state=' + this.state + '#wechat_redirect';
			
		// redirect_uri是授权成功后，跳转的url地址，微信会帮我们跳转到该链接，并且通过？的形式拼接code，这里需要用encodeURIComponent对链接进行处理。
		// 如果配置参数一一对应，那么此时已经通过回调地址刷新页面后，你就会再地址栏中看到code了。
		// https://test.yuruantong.com/pages/loginAndRegister/login/loginH5?code=0312nn200ADR1P1BYh100zp2VL32nn2f&state=1
		// },
	    //登录
		async getLogin(value){
			let params = {
				code:value,
				wechartState:this.state
			}
			const res = await xxxx(params)
			if(res.data.code != 0){
				this.$u.toast(res.data.message)
				return;
			}
			if(res.data.rows[0].code == 1){
				let obj = res.data.rows;
				obj.push({
					wechartState:this.state
				})
				let arr = {
					params:obj,
					isShow:true
				}
				uni.redirectTo({
					url: '/pages/loginAndRegister/login/login?params=' + JSON.stringify(arr)
				})
			}else if(res.data.rows[0].code == 2){ //res.data.rows 返回的是token 跳转对应的页面
				uni.setStorageSync('userInfo',res.data.rows[0].loginUserVO);
				uni.redirectTo({
					url:'/landlord/home/index/index'
				})
			}else{}
		}
     }
}
</script>
<style>
</style>