整体思路：

接口获取openId => 用户微信信息入库 => 手机号授权入库

逻辑详解：

我们知道小程序都是需要openId的，那我们可以通过前端获取，也可以通过后端接口获取，

前端就是这个地址，appid和secret 在你微信公众平台下都可以找到， code，在你调用uni.login就可以获取，但是切记，code码只能使用一次，你在开发环境时可以使用下面链接来前端获取openId，但是在线上生产环境，就要切换成后端接口获取了，因为会被小程序服务器域名所限制。

https://api.weixin.qq.com/sns/jscode2session?appid=' +appid + '&secret=' + secret + '&js_code=' + code +'&grant_type=authorization_code

获取到openId的目的，就是判断你数据库里是否有该用户，在小程序里，openId就是唯一主键的意思，然后下一步就是获取你的微信昵称和头像，那么这个要调用

uni.getUserProfile()

大家一定要用这个api来获取微信信息，否则其他获取的是假的用户信息！

获取手机号授权，这个必须要求你在微信公众平台申请哦，否则是没有这个权限的，另外大家可能有疑问，微信信息授权和手机号授权为啥不写在一起？因为手机号授权只能通过button按钮，并且使用open-type来获取，这一点，uniapp和微信原生是一致的，而且这个获取手机号的按钮，必须用户主动去点击喔，所以这也是我为啥将他写在遮盖层上了。

 <button  type="primary"  open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">绑定手机号</button>

手机号和微信用户信息这样都拿到了，那你就可以完成自己想要的操作了，那么又有同学想问，那我想获取身份证信息咋办？那我明确告诉你，取不到！那有没有类似的呢，可以通过百度ocr识别来将前端传上去的身份证照片进行验证识别，这一点，我下一篇博客将会写上去。

部分截图：

点击授权登录，将会弹出微信用户信息授权，然后会出现获取手机号按钮的遮盖层，点击获取手机号授权

所有代码：

这里简单说一下， proxy.$api.user.xxx, 这是我调用接口的方式，大家可以根据自己想要方式来实现uni.request，这一点没有啥强制性要求

<template><view><view><view><view class="header"><image src="/static/img/login-wx.png"></image></view><view class="content"><view>申请获取以下权限</view><text>获得你的公开信息(昵称，头像、地区等)</text></view><button class="bottom" type="primary" :disabled="userInfoDisabled" @click="wxGetUserInfo">授权登录</button></view></view><van-overlay :show="overlayShow"><view class="login-wrapper"><view class="login-bottom"><button  type="primary"  open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">绑定手机号</button></view></view></van-overlay></view>
</template><script setup>import {ref,reactive,getCurrentInstance} from 'vue'import {onLoad} from '@dcloudio/uni-app'const {proxy} = getCurrentInstance()const appid = "xxx"const secret = "xxx"const userInfoDisabled = ref(false)const userInfo = reactive({thirdAppType: 1,thirdUserId: "",nickName: '',wechatPicture: ''})const sessionKey = ref('') // session码const pageOption = ref()const overlayShow = ref(false)const wxGetUserInfo = () => {if (uni.getUserProfile) {uni.getUserProfile({desc: 'Wexin', // 这个参数是必须的success: result => {uni.showLoading({title: '授权中...'});userInfoDisabled.value = trueuserInfo.nickName = result.userInfo.nickNameuserInfo.wechatPicture = result.userInfo.avatarUrlproxy.$api.user.login({thirdAppType: userInfo.thirdAppType,thirdUserId: userInfo.thirdUserId,nickName: userInfo.nickName,wechatPicture: userInfo.wechatPicture}).then(res => {userInfoDisabled.value = falseuni.hideLoading();if (res.data.bindSpecialCode == 203) {uni.setStorageSync('id', res.data.id);uni.setStorageSync('nickName', res.data.nickName);uni.setStorageSync('wechatPicture', res.data.wechatPicture);overlayShow.value = truereturn} else {uni.showToast({title: '登录成功'})uni.setStorageSync('id', res.data.id);uni.setStorageSync('nickName', res.data.nickName);uni.setStorageSync('wechatPicture', res.data.wechatPicture);uni.setStorageSync('tel', res.data.tel.data);// 然后跳回原页面if (pageOption.value.backtype == 1) {uni.redirectTo({url: '/pages/home/index'})} else {uni.switchTab({url: '/pages/home/index'})}}}).catch(e => {userInfoDisabled.value = falseuni.hideLoading();uni.showToast({title: '用户信息操作失败',icon: 'none'});})},fail: res => {console.log('用户拒绝授权信息');}})} else {uni.showToast({title: '获取用户信息失败',icon: 'none'});}}const login = () => {uni.showLoading({title: '登录中...'});uni.login({provider: 'weixin',success: loginRes => {let code = loginRes.code;proxy.$api.user.getOpenId({appid,secret,code}).then(res => {if (res.code == 200) {getOpenId(res.data)}}).catch(e => {uni.hideLoading();uni.showToast({title: '获取 OpenId 失败',icon: 'none'});userInfoDisabled.value = false})},fail: () => {uni.hideLoading();uni.showToast({title: '获取 code 失败',icon: 'none'});userInfoDisabled.value = falsereturn false;}});return false;}const getOpenId = (codeRes) => {let openId = codeRes.openid;sessionKey.value = codeRes.sessionKey;userInfo.thirdUserId = openId   proxy.$api.user.openIdParse({thirdAppType: userInfo.thirdAppType,thirdUserId: openId}).then(res => {uni.hideLoading();uni.setStorageSync('openId', openId);userInfoDisabled.value = false// 用户信息未授权入库if (res.data.bindSpecialCode == 202) {uni.showToast({title: '请点击授权登录',icon: 'none'});// 用户手机号未授权入库} else if (res.data.bindSpecialCode == 203) {overlayShow.value = trueuni.setStorageSync('id', res.data.id);uni.setStorageSync('nickName', res.data.nickName);uni.setStorageSync('wechatPicture', res.data.wechatPicture);} else {uni.showToast({title: '登录成功'})uni.setStorageSync('id', res.data.id);uni.setStorageSync('nickName', res.data.nickName);uni.setStorageSync('wechatPicture', res.data.wechatPicture);uni.setStorageSync('tel', res.data.tel.data);if (pageOption.value.backtype == 1) {uni.redirectTo({url: '/pages/home/index'})} else {uni.switchTab({url: '/pages/home/index'})}}}).catch(e => {uni.hideLoading();uni.showToast({title: '获取授权信息失败',icon: 'none'});userInfoDisabled.value = false})}/*** 手机号授权*/const getPhoneNumber = (e) => {if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {console.log('用户拒绝提供手机号');} else {let encryptedData = e.detail.encryptedDatalet iv = e.detail.ivoverlayShow.value = falseif (encryptedData && iv) {bindTelApi(encryptedData, iv)}}}const bindTelApi = (encryptedData, iv) => {uni.showLoading({title: '绑定手机号中...'});proxy.$api.user.bindTel({encryptedData: encryptedData,iv: iv,sessionKey: sessionKey.value,uid: uni.getStorageSync('id')}).then(res => {uni.hideLoading()if (res.code == 200) {uni.setStorageSync('tel', res.data.tel.data);uni.switchTab({url: '/pages/home/index'})}}).catch(e => {uni.hideLoading()})}onLoad((options) => {pageOption.value = optionsconst {proxy} = getCurrentInstance()const loginStatus = proxy.checkLogin('/pages/home/index', 2)if (!loginStatus) {userInfoDisabled.value = truelogin();} else {uni.switchTab({url: '/pages/home/index'})}})
</script>
<style lang="scss" scoped>.header {margin: 160rpx 0 60rpx 50rpx;text-align: center;width: 650rpx;image {width: 180rpx;height: 180rpx;}}.content {margin-bottom: 68rpx;text-align: center;text {display: block;color: #9d9d9d;margin-top: 20rpx;}}.bottom {border-radius: 80rpx;margin: 70rpx 50rpx;font-size: 35rpx;}.login-wrapper{height: 100%;position: relative;.login-bottom{position: absolute;bottom: 0;left: 0;width: 100%;height: 133rpx;background-color: #fff;button{position: absolute;top: 50%;left: 50%;background-color: #CA2915;transform: translate(-50%, -50%);border-radius: 30px;width: 435rpx;height: 68rpx;line-height: 68rpx;}}}
</style>

uniapp + vue3微信小程序开发（3）微信授权登录相关推荐

微信小程序开发工具清除授权缓存/文件缓存/登录缓存等等
今天2.19.3.25 在开发微信小程序时,作为测试号想清除授权缓存,一直没有找到方法, 最后无意中看到了解决方法微信小程序开发工具清除授权缓存/文件缓存/登录缓存等等.完美解决
微信小程序开发(一) 微信登录流程
文/YXJ 地址:http://blog.csdn.net/sk719887916/article/details/53761107 最近在研究微信小程序开发,非常有意思的一个东西.花了一点时间写了一 ...
微信小程序目前最新的授权登录接口-2021年10月份
微信小程序目前最新的授权登录接口-2021年10月份效果图: 说明:首先我们需要在app.js里用云函数获取到openid,然后在用户点击登录的时候用获取到的openid去用户表里查询是否有该用户, ...
微信小程序开发实现微信支付
微信支付是时下最流行的交易支付方法之一,潜移默化推动着无现今社会的变革.小程序作为微信上的轻应用,同时也开放微信支付的接口,可以通过转账,扫二维码支付.要完成一次具体的订单支付需要完整的支付流程,具体 ...
微信小程序开发(Demo),微信公众号开发
> 微信小程序微信小程序,新的流量入口. 在微信的开发工具上编译小程序的代码.微信web开发者工具. sublime 和 webstorm. 微信小程序开发工具0.7.0版本(下载链接h ...
微信小程序开发：微信小程序生命周期总结
前言在微信小程序开发中,关于微信小程序API的使用是必备技能,但是关于微信小程序的生命周期也是首先要了解和掌握的知识点.尤其是现在的前端开发领域,关于前端的各种框架和技术都要会,而且微信小程序的语法 ...
微信小程序无法弹出授权登录窗口
微信小程序开发,小程序接口问题..... 今天在写微信小程序的时候,为了获取到后台的token,必须要获取到code,encryptedData,iv ,rawData,signature五个值.co ...
微信小程序开发教程-微信小程序入门
转自http://blog.jobbole.com/106049/ 微信应用号(小程序,「应用号」的新称呼)终于来了! 目前还处于内测阶段,微信只邀请了部分企业参与封测.想必大家都关心「小程序」的最终 ...
微信小程序开发教程||微信小程序小程序简介||微信小程序开始||微信小程序小程序代码构成
微信小程序小程序简介小程序简介小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验. 小程序技术发展史小程序并非凭空冒出来的一个概念.当微信中的 ...
【零基础】学会微信小程序开发-上手微信开发者工具
本篇文章,你将学会如何使用微信开发者工具开发微信小程序 1)首先,我们访问微信开发者工具下载地址,如下图所示,我们下载稳定版本,按你系统去选择Windows 或者macOS,我这里因为是Windows ...

uniapp + vue3微信小程序开发（3）微信授权登录

整体思路：

逻辑详解：

部分截图：

所有代码：

uniapp + vue3微信小程序开发（3）微信授权登录相关推荐

最新文章

热门文章