uniapp 微信小程序 获取openid,手机号进行登录,配合后端

在这里插入图片描述

流程:登录注册功能,通过uni.getUserProfile获取wxcode,通过wxcode传给后端获取openid,sessionkey,unionid。
通过<u-button type="success" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">一键登录</u-button>,
传到后端这些参数:
'session_key': $this.openidData.sessionKey,
'encryptedData': e.detail.encryptedData,
'iv': e.detail.iv
获取手机号,
再将手机号,unionid,openid传到后端进行登录
<template><view class="page"><!-- 自定义头部 navbar --><u-navbar back-icon-name="arrow-left" title=" " :custom-back="navbarBack":background="{ backgroundColor: 'rgba(0,0,0,0)' }" :border-bottom="false":is-back="pageStatus != 'home'"></u-navbar><!-- logo --><view class="logo-wrap" v-if="pageStatus == 'home' || pageStatus == 'getWxRole'"><image class="logo"src="xxxxxxxxxxxxxx/static/login/login_logo.png"></image><view class="app-name">欢迎登录</view><view class="app-title">弘云艺术中心</view></view><!-- 默认登录页面显示 --><view style="width: 100%;" v-if="pageStatus == 'home'"><view class="text-area" @click="loginByWx">手机号快捷登录</view></view><!-- 微信授权登录,获取用户信息 --><view style="width: 100%;" v-if="pageStatus == 'getWxRole'"><view class="info">为提供优质服务,需要获取你的以下信息 :</view><view class="public"><view class="public-dot"></view><view class="public-text">你的公开信息(头像、昵称等)</view></view><view class="text-enter" @click="getWxLoginRole">授权进入</view></view><!-- 微信登录小程序,再授权获取用户信息之后 --><view class="loginWx" v-if="pageStatus == 'loginByWx'"><view class="title">欢迎使用 弘云艺术中心</view><view class="desc">立即登录享受优质服务</view><view class="avatar"><image mode="aspectFill" :src="wxLoginUserInfo.userInfo.avatarUrl"></image></view><u-button type="success" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">一键登录</u-button></view><!-- 协议勾选 --><view class="agree" v-if="pageStatus == 'home' || pageStatus == 'getWxRole' "><view class="agree_img" @click="changeAgreeFlag" v-show="!agree_flag"><image src="xxxxxxxxxxx/static/mine/check.png"></image></view><view class="agree_img" @click="changeAgreeFlag" v-show="agree_flag"><image src="xxxxxxxxxxxxxxxxx/static/operate/checked.png"></image></view><view class="agree_text">登录代表您已同意<span>《用户服务协议》《隐私权政策》</span></view></view></view>
</template><script>import FunUniappTheme from '@/theme.scss';export default {data() {return {// 页面状态,默认为 home// getWxRole:获取微信权限页,loginByWx:微信授权登录页// loginByCode:手机号+验证码登录页,loginByPwd:手机号+密码登录// forgetPwd:找回密码页面,resetPwd,重置密码页面pageStatus: 'home',// 协议是否勾选agree_flag: false,// 微信授权的用户信息wxLoginUserInfo: {},// openidopenId: '',// 系统内用户信息userInfo: {},//openidopenidData: {}};},onShow() {},onLoad(ops) {if (ops && ops.interceptcard && ops.interceptcard === "true") {uni.showToast({title: '购买商品,请先登录注册。',icon: 'none',duration: 4000,});}if (ops && ops.goods_id_detail) {console.log(ops.goods_id_detail, '二维码商品详情')uni.setStorageSync('goods_id_detail', ops.goods_id_detail)}console.log(FunUniappTheme);},onReady() {},methods: {// 勾选/取消用于协议changeAgreeFlag() {this.agree_flag = !this.agree_flag;},// 微信登录loginByWx() {if (!this.agree_flag) {uni.showToast({icon: 'none',title: '请先阅读并勾选协议'});return;}this.getUserInfoByWx(() => {this.getWxCode(code => {let $this = this;console.log('执行了吗', code)uni.request({url: "xxxxxxxxxxxxxx/mobile/index.php?m=user&c=indexapi&a=oauth2",method: 'POST',header: {'Content-Type': 'application/x-www-form-urlencoded'},data: {'wxcode': code,'parent_unionid': uni.getStorageSync('unionid')},success(res) {$this.openidData = res.data.data;console.log(res.data.data, 9999, $this.openidData);uni.setStorageSync('OPEN_ID', res.data.data.openid)}});});});},// 自定义navbar的返回方法navbarBack() {if (this.pageStatus == 'getWxRole' || this.pageStatus == 'loginByWx' ) {this.pageStatus = 'home';} else if (this.pageStatus == 'forgetPwd' || this.pageStatus == 'resetPwd') {this.pageStatus = 'loginByPwd';} else if (this.pageStatus == 'loginByPwd') {this.pageStatus = 'loginByCode';}},// 微信授权getWxLoginRole() {if (!this.agree_flag) {uni.showToast({icon: 'none',title: '请先阅读并勾选协议'});return;}this.getUserInfoByWx(() => {this.getWxCode(code => {let $this = this;console.log('执行了吗', code)uni.request({url: "xxxxxxxxxxxxxxx/mobile/index.php?m=user&c=indexapi&a=oauth2",method: 'POST',header: {'Content-Type': 'application/x-www-form-urlencoded'},data: {'wxcode': code,'parent_unionid': uni.getStorageSync('unionid')},success(res) {$this.openidData = res.data.data;console.log(res.data.data, 9999, $this.openidData);uni.setStorageSync('OPEN_ID', res.data.data.openid)}});});});},//个人中心userinfo() {uni.request({url: "xxxxxxxxxxxxxindex.php?m=user&c=indexapi&a=userinfo",method: 'POST',header: {'Content-Type': 'application/x-www-form-urlencoded'},data: {'open_id': uni.getStorageSync('OPEN_ID')},success(res) {console.log(res.data.data, '个人中心222');uni.setStorageSync('USER_ID', res.data.data.info.user_id)uni.setStorageSync('user_rank', res.data.data.info.user_rank)if (uni.getStorageSync('goods_id_detail')) {uni.reLaunch({url: '/pages-mall/pages/goods/detail?goods_id_detail=' + uni.getStorageSync('goods_id_detail')});} else {uni.reLaunch({url: '/pages/home/index'});}}});},// 基于uni的获取code方法getWxCode(callBack) {uni.login({provider: 'weixin',onlyAuthorize: true,success: loginRes => {console.log(loginRes, '获取信息')callBack(loginRes.code);},fail(e) {}});},// 获取openIdgetOpenId(code, callBack) {this.$u.api.getOpenId(code).then(res => {// uni.setStorageSync('OPEN_ID', res.openid);callBack(res);});},// 获取个人信息getUserInfoByWx(callBack) {let $this = this;uni.getUserProfile({desc: '获取你的昵称、头像',success: function(data) {console.log(data, '用户信息')uni.setStorageSync({key: 'APP_WX_USERINFO',data: data});$this.wxLoginUserInfo = data;$this.pageStatus = 'loginByWx';callBack();},fail: function(error) {}});},// 获取手机号回调decryptPhoneNumber(e) {let $this = this;console.log(e.detail, 9898)uni.request({url: "xxxxxxxxxxxxxxx/index.php?m=user&c=indexapi&a=decryptwechatdata",method: 'POST',header: {'Content-Type': 'application/x-www-form-urlencoded'},data: {'session_key': $this.openidData.sessionKey,'encryptedData': e.detail.encryptedData,'iv': e.detail.iv},success(res) {console.log(res.data, '手机号');uni.request({url: "xxxxxxxxxxxxxxxxxxxxxx/index.php?m=oauth&c=indexapi&a=bind_register",method: 'POST',header: {'Content-Type': 'application/x-www-form-urlencoded'},data: {'mobile': res.data.data.phoneNumber,'unionid': $this.openidData.unionid,'openid': $this.openidData.openid},success(res) {console.log(res.data, '登录成功');if (res.data.code === 0) {$this.userinfo()uni.setStorageSync('IS_LOGIN', true);uni.setStorageSync('fh_type',0)console.log(uni.getStorageSync('IS_LOGIN'), '成功了?', uni.getStorageSync('USER_ID'))}}});}});},// 微信小程序手机号登录loginByOpenId() {const openid = uni.getStorageSync('OPEN_ID');this.$u.api.loginByOpenId(openid).then(res => {this.userInfo = res;});},}};
</script><style lang="scss" scoped>.page {padding: 0 40rpx;background-color: $app-theme-bg-color;}.logo-wrap {display: flex;// justify-content: center;padding-top: 100rpx;padding-bottom: 52rpx;flex-wrap: wrap;.logo {height: 168rpx;width: 166rpx;margin-left: 76rpx;margin-top: 50rpx;}.app-name {width: 100%;padding-top: 80rpx;margin-left: 78rpx;font-size: 38rpx;font-weight: 600;color: #333333;line-height: 52rpx;}.app-title {width: 100%;padding-top: 16rpx;margin-left: 78rpx;font-size: 38rpx;font-weight: 600;color: #333333;line-height: 52rpx;}}.text-area {width: 100%;height: 96rpx;background: #19be6b;font-weight: 400;border-radius: 56rpx;color: $app-theme-text-white-color;line-height: 16px;font-size: 32rpx;text-align: center;line-height: 96rpx;/* background: url(../../static/img/logo_newhope.png); */}.info {font-size: 28rpx;font-weight: 400;color: $app-theme-text-black-color;line-height: 28rpx;margin-top: 180rpx;}.public {display: flex;align-items: center;margin-top: 30rpx;.public-dot {width: 6rpx;height: 6rpx;background: #999999;margin-right: 10rpx;}.public-text {font-size: 24rpx;font-weight: 400;color: #8f92a1;line-height: 24rpx;}}.text-enter {width: 100%;margin-top: 50rpx;height: 96rpx;background: $app-theme-color;font-weight: 400;border-radius: 56rpx;color: #ffffff;line-height: 16px;font-size: 32rpx;text-align: center;line-height: 96rpx;}.head {margin-top: 70rpx;width: 100%;display: flex;justify-content: space-between;}.back {width: 40rpx;height: 40rpx;}.agree {position: fixed;left: 50%;transform: translate(-50%, 0);bottom: 66rpx;width: 100vw;display: flex;align-items: center;justify-content: center;}.agree_img image {width: 32rpx;height: 32rpx;display: flex;align-items: center;}.agree_text {margin-left: 8rpx;font-size: 24rpx;font-weight: 400;color: #8f92a1;line-height: 24rpx;display: flex;align-items: center;span {color: $app-theme-color;}}.loginWx {width: 100%;padding-top: 64rpx;.title {text-align: left;font-size: 22px;font-family: PingFang-SC-Regular, PingFang-SC;font-weight: 400;color: #171717;line-height: 30px;margin-bottom: 12rpx;}.desc {text-align: left;font-size: 14px;font-family: PingFang-SC-Regular, PingFang-SC;font-weight: 400;color: #8f92a1;line-height: 14px;}.avatar {width: 160rpx;height: 160rpx;overflow: hidden;border-radius: 50%;display: flex;align-items: center;justify-content: center;margin: 128rpx auto 160rpx auto;image {width: 100%;height: 100%;}}}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/651826.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux系统-FTP服务配置

目录 一、FTP简介 1.什么是FTP&#xff1f;&#xff1f;&#xff1f; 2.FTP的两种模式 二、安装配置FTP服务 1.关闭防火墙和核心防护 2.安装VSFTPD 3.修改配置文件 4.黑白名单设置 一、FTP简介 1.什么是FTP&#xff1f;&…

分布式WEB应用中会话管理的变迁之路

Session一词直译为“会话”&#xff0c;意指有始有终的一系列动作&#xff0f;消息。Session是Web应用蓬勃发展的产物之一&#xff0c;在Web应用中隐含有“面向连接”和“状态保持”两个含义&#xff0c;同时也指代了Web服务器与客户端之间进行状态保持的解决方案。 在Web应用…

小程序评分/关键词/UV优化助力小程序登顶

随着小程序市场的日益繁荣&#xff0c;小程序搜索排名优化成为了众多开发者关注的焦点。小程序搜索排名被很多因素影响着&#xff0c;关键词、评分还有uv&#xff08;授权&#xff09;等。在本文小柚和各位老板分享如何有效优化小程序搜索排名的经验。 一、关键词策略 关键词是…

天线驻波比参数测试方法

驻波比也叫电压驻波比&#xff0c;是指传输线中最大电压与最小电压的比值&#xff0c;是衡量天线与馈线匹配程度的重要参数&#xff0c;影响着信号传输的质量和效率。因此&#xff0c;驻波比测试是天线测试的重要环节。那么&#xff0c;天线驻波比测试都有哪些测试方法呢&#…

0426_C高级4

练习1&#xff1a; 输入一个数字&#xff0c;实现数字逆置&#xff08;不使用字符串截取方式&#xff09; 1 #!/bin/bash2 read -p "输入一个数字&#xff1a;" number3 p$number4 result5 while [ $p -ne 0 ]6 do7 result$((result*10p%10))8 p$((p/10))9 …

git 基础知识(全能版)

文章目录 一 、git 有三个分区二、git 基本操作1、克隆—git clone2、拉取—git fetch / git pull3、查看—git status / git diff3.1 多人开发代码暂存技巧 本地代码4、提交—git add / git commit / git push5、日志—git log / git reflog6、删除—git rm ‘name’7、撤销恢…

Unreal Engine动态添加Button实例

在控件蓝图中添加容器&#xff0c;注意命名不要有中文 C代码中找到容器实例 1 2 3 4 5 6 7 8 UVerticalBox* verticalBox Cast<UVerticalBox>(CurrentWidget->GetWidgetFromName(TEXT("VerticalBox_0"))); if (verticalBox ! nullptr) { UScrollBox* …

「51媒体」城市推介会,地方旅游推荐,怎么做好媒体宣传

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 城市推介会和地方旅游推荐是城市形象宣传的重要组成部分&#xff0c;通过有效的媒体宣传可以提升城市的知名度和吸引力。&#xff1a; 一&#xff0c;活动内容层面&#xff1a; 突出亮点…

【MRI重建】Cartesian采样中data consistency 常规数据一致性实现(pytorch)

关于 在MRI重建中,data consistency 可以帮助加快MRI图像重建和减少模型重建带来的重建误差。 工具 方法实现 x_rec: 重建图像, (batch_size,2,H,W) mask: 欠采样模版,(batch_size,2,H,W) k_un: 真实欠采样采集数据, (batch_size,2,H,W) torch.view_as_complex: 将实数数据…

Spring Boot 3.2.5 集成 MyBatisPlus

前置条件&#xff0c;先连接好数据库&#xff0c;并且数据库里新建表插入几条数据 连接mysql传送门 版本 Spring Boot 3.2.5 第一步&#xff0c;添加依赖 <dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-spring-boot3-start…

计算机视觉——OpenCV 使用分水岭算法进行图像分割

分水岭算法 分水岭算法&#xff1a;模拟地理形态的图像分割 分水岭算法通过模拟自然地形来实现图像中物体的分类。在这一过程中&#xff0c;每个像素的灰度值被视作其高度&#xff0c;灰度值较高的像素形成山脊&#xff0c;即分水岭&#xff0c;而二值化阈值则相当于水平面&am…

JavaEE >> Spring Boot(2)

Spring Boot 配置文件 前面的文章已经介绍了 Spring Boot 项目的创建&#xff0c;上文&#xff0c;本文介绍 Spring Boot 的简单进阶使用。 配置文件的作用 项目中的所有重要数据都是在配置文件中配置的&#xff0c;例如&#xff1a; 数据库的连接信息&#xff08;包括数据…