当前位置：网站首页>H5之微信授权登陆（uniapp网页版微信授权登录）

H5之微信授权登陆（uniapp网页版微信授权登录）

2022-06-21 21:16:00 【wh20141212】

今天来复盘代码了不然这个月过完我可能脑子里又啥都不剩了感觉自己跟个金鱼脑一样十分沧桑
在这里插入图片描述
1.首先要做微信授权登录你的有一个微信公众号因为授权登录要配置APPID 以及网页授权域名

这里的网页授权域名真的让我栽了好多的坑一言难尽啥也不说了直接上图
公众号的开发 —>基本配置中设置
在这里插入图片描述
**接下来在公众号的开发 —>接口权限中设置域名 **
这个域名一定要正确而且是安全域名因为不仅代码放在上面微信授权回调的域名也是这个

在网页服务中的页面授权用户基本信息中设置一共可以设置两个一个开发环境一个测试环境

设置完就可以开发了开发前建议看一变官方文档当然如果没看懂可以多看几遍链接我放在这里了
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html#0

然后就是页面了

因为后期我得代码都带了token请求头所以我写了一个跳转页面

在这个界面拉起授权授权成功获取到信息之后在跳转到首页
（ps：我把这个页面放在了pages.json）的第一个这样一进来就能授权了

废话不多说上代码：

对了请注意下面的那个拉取基本信息的链接中的重定向路径和appid被我隐藏了请大家自己配置
将URL 及 APPID 替换成自己的即可至于如何获取请看上面上面配置的域名就是这里重定向的路径

跳转界面springboard.vue

<template>
	<view class="springboard">
		
		<view class="">
		code:{
    {
    res}}
		</view>
		<view class="">
			access_token接口：{
    {
    result}}
		</view>
		<view class="">
			access_token :{
    {
    access_token}}
			<view class="">
				openid:{
    {
    openid}}
			</view>
		</view>
		<view class="">
			用户信息 {
    {
    userInfo}}
		</view>
		<!-- 跳板页面   这个界面主要用来 获取缓存的信息 如果没有缓存的信息则跳转去授权 如果有直接跳转去商城界面-->
	</view>
</template>

<script>
	export default {
    
		data() {
    
			return {
    
				src:'',
				result:'',
				option:'',
				res:'',
				userInfo:'',
				access_token:'',
				openid:'',
				index:0
			};
		},
		methods:{
    
			getpower() {
    
				
				let url =
					"https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=URL&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect"
							
				window.location.href = url
			},
			sendCode(code){
    
				uni.showToast({
    
					title:code
				})
				
				uni.request({
    
				    url: 'XXXXXXX/login/login_controller/access_token',
				    method:'POST',
					data: {
    
				        code: code
				    },
				    success: (res) => {
    
				        console.log(res.data);
				        this.result = res.data
						this.access_token = this.result.data.access_token
						this.openid = this.result.data.openid
						uni.request({
    
						    url: 'XXXXXXX/login/login_controller/access_user', //仅为示例，并非真实接口地址。
						    method:'POST',
							data: {
    
						       	access_token:this.access_token,
						       	openid: this.openid
						    },
						    success: (respones) => {
    
								this.userInfo = respones
						        console.log(res.respones);
								
						    }
						});	
				    }
				});
			},
		},
		onLoad(option) {
    
			this.option = option
			if (option.code == null) {
    
				this.getpower()
			} else {
    
				this.res =  option.code
				// uni.showToast({
    
				// 	title:option.code
				// })
				this.sendCode(option.code)
			}
		}
		
	}
</script>

<style lang="less" scoped>
.springboard{
    
	height: 99vh;
	position: relative;
	text-align: center;
	background-size: cover;
	// background-image: url('http://zons.oss-cn-shenzhen.aliyuncs.com/upload/20200703/20200703/1593768723d3eb9a9233e52948740d7eb8c3062d14.jpg');
	// background-image: url('http://zons.oss-cn-shenzhen.aliyuncs.com/upload/20200703/20200703/1593768995d3eb9a9233e52948740d7eb8c3062d14.jpg');
}
.LoginBtn{
    
	width: 50%;
	border: 1px solid  #409eff;
	padding:20rpx  ;
	display: inline-block;
	background-color: #409eff ;
	color: #fff;
	border-radius: 10rpx;
}
</style>