uniapp手机一键登录，微信授权登陆

之前前端可以通过微信的接口获取openid，现在不允许了，所以把code传给后端后端反数据给我们，

<template><view class="content yd-center"><!-- 手机登录 --><view class="phonebox"><view class="u-demo-block__content" style=" width: 91vw;"><u-input maxlength="11" placeholder="请输入手机号码" type="number" clearable color="#000" v-model="phone"@blur="phoneblur" border="bottom"><u--text text="手机号:" color="#6b6b6b" slot="prefix" size="18" margin="0 3px 0 0"></u--text><template slot="suffix"><button class="Localnumber" type="default" open-type="getPhoneNumber"@getphonenumber.stop="GetPhoneNumber">获取手机号</button></template></u-input></view><view class="u-demo-block__content" style="margin-top: 15px; width: 91vw;"><u-input maxlength="6" type="number" placeholder="请输入验证码" color="#000" v-model="Scode" border="bottom"><u--text text="验证码:" color="#6b6b6b" slot="prefix" size="18" margin="0 3px 0 0"></u--text><template slot="suffix"><u-code ref="uCode" @change="codeChange" seconds="60" changeText="x秒重新获取"></u-code><view class="Codebox" @click="getCode">{{tips}}</view><!-- <u-button @tap="getCode" :text="tips" type="success" size="mini"></u-button> --></template></u-input></view></view><!-- 微信登录 --><view class="loginbtn yd-center" @click="phonelogin">登录</view><view class="weichatloginbtn yd-center" @click="weichatlogin">一键授权登录</view><!-- <view class="sysbox">切换登录方式</view><view class="iconfont icon-ydkjweixin" @click="weichatlogin"></view> --></view>
</template><script>import {login,loginPhone,sendCode,encrypPhone,getOpenId} from '@/api/login.js'import {HTTP_REQUEST_URL} from '@/common/config.js';export default {data() {return {tips: '', //验证码提示文字phone: '', //手机号码Scode: '', //验证码code: '', //验证码sessionKey: '', //秘钥iv: '', //本机号码秘钥encryptedData: '', //本机号码秘钥};},onLoad() {//手机号码啊破解也需要code而且具有时效// 获取解密本机手机号码的信息this.updateSessionKey()},methods: {// 获取本机手机号码GetPhoneNumber(e) {console.log(e)//需要检查sessionkey状态是否过期uni.checkSession({success: (_res) => {if (e.detail.errMsg == 'getPhoneNumber:user deny') { //用户点击拒绝uni.showToast({title: "您已拒绝！授权失败",icon: "none"})} else { //允许授权执行跳转 this.iv = e.detail.iv;this.encryptedData = e.detail.encryptedData;this.getencrypPhone()}},fail: (_res) => {console.log(_res)uni.hideLoading()this.updateSessionKey()uni.showModal({title: '提示',content: '您的登录失效，请重新授权',showCancel: false})}})},getencrypPhone() {let data = {iv: this.iv,encrypted: this.encryptedData,sessionKey: this.sessionKey,}//传给后端解密手机号encrypPhone(data).then(res => {let data = JSON.parse(res.data)this.phone = data.phoneNumber}).catch(res => {uni.hideLoading();uni.$u.toast(res.msg);})},// 获取SessionKeyupdateSessionKey() {this.getLoginCode() //获取微信登录js_code// console.log('code=',jsCode)},// 获取codegetLoginCode() {uni.login({provider: 'weixin',success: async (res) => {this.code = res.code;// uni.setStorageSync('code', res.code)this.jsCode2OpenId() //openid和session数据}})},jsCode2OpenId() {getOpenId({code: this.code}).then(res => {let info = JSON.parse(res.data)this.openid = info.openid;this.sessionKey = info.session_key})},// 电话号码验证登陆phonelogin() {if (this.phone == '') {uni.showToast({title: '请填写电话号码',icon: 'error',duration: 2000});return} else if (this.Scode == '') {uni.showToast({title: '请输入验证码',icon: 'error',duration: 2000});return}loginPhone({phone: this.phone,code: this.Scode}).then(res => {if (res.code == 0) {uni.setStorageSync('token', res.data.token)uni.setStorageSync('phone', res.data.loginName)uni.reLaunch({url: '/pages/index/index'})}})},// 微信登陆weichatlogin() {let that = this;let token = uni.getStorageSync('token');if (token) {uni.redirectTo({url: '/pages/index/index'})} else {uni.getUserProfile({lang: 'zh_CN',desc: '获取你的昵称、头像、地区及性别',success: (res) => {uni.setStorageSync('userInfo', res.userInfo)//先获取code，再授权登陆uni.getProvider({service: 'oauth',success: function(res) {console.log(res.provider);//支持微信、qq和微博等if (~res.provider.indexOf('weixin')) {login({openId: that.openid}).then(res => {if (res.code == 0) {uni.setStorageSync('token', res.data.token)uni.reLaunch({url: '/pages/index/index'})}});}}});}});}},// 电话号码输入失去焦点事件phoneblur(e) {let reg = /^[1][3,4,5,7,8][0-9]{9}$/if (reg.test(Number(e)) == false) {uni.showToast({title: '请填写正确的电话号码',icon: 'error',duration: 2000});this.phone = ''}},// 验证码倒数事件文字切换codeChange(text) {this.tips = text;},//监听验证码按钮状态事件getCode() {if (this.phone == '') {uni.showToast({title: '请填写电话号码',icon: 'error',duration: 2000});return}if (this.$refs.uCode.canGetCode) {// 模拟向后端请求验证码uni.showLoading({title: '正在获取验证码'})// uni.showToast({//   title: '正在获取验证码',//   icon: 'loading',//    duration: 30000 // 当然这个时间可根据实用场景进行相关设置// })setTimeout(() => {sendCode({phone: this.phone}).then(res => {uni.hideLoading();// uni.hideToast()console.log(1, res)// 这里此提示会被this.start()方法中的提示覆盖uni.$u.toast('验证码已发送');// 通知验证码组件内部开始倒计时this.$refs.uCode.start();}).catch(res => {uni.hideLoading();uni.$u.toast(res.msg);}).finally(res => {uni.hideLoading();uni.$u.toast(res.msg);})}, 2000);} else {uni.$u.toast('倒计时结束后再发送');}},change(e) {console.log('change', e);}}};
</script><style lang="scss" socped>button {margin: 0;background-color: #ffffff;border: none;}.content {margin-bottom: 140rpx;width: 100vw;height: 100vh;background-color: #ffffff;}.phonebox {margin-bottom: 124rpx;margin-top: -606rpx;}.loginbtn {width: 92vw;height: 86rpx;background-color: #0092ff;color: white;border: 2rpx solid #0092ff;border-radius: 10rpx;margin: 20rpx auto;font-size: 30rpx;letter-spacing: 10rpx;box-shadow: 0 0 10rpx #919191;}.weichatloginbtn {width: 92vw;height: 86rpx;background-color: #ffffff;color: #0092ff;border: 2rpx solid #0092ff;border-radius: 10rpx;margin: 20rpx auto;font-size: 30rpx;letter-spacing: 10rpx;box-shadow: 0 0 10rpx #919191;}.sysbox {margin: 500rpx 0 30rpx;color: #b5b5b5;}.icon-ydkjweixin {color: #5ac725;font-size: 83rpx;}
</style>

uniapp手机一键登录，微信授权登陆相关推荐

uniapp微信一键登录微信授权
前言现在小程序逐渐成为主流,常用的微信授权登录很重要很常见的一个功能,今天自己总结了一下. 准备工作 1.如果你想自己想试一下这个功能首先你需要有一个开发中的项目并且你在开发成员里面. 2.配置自己 ...
unicloud云开发---uniapp云开发(四)---本机手机号一键登录以及第三方登陆
我们来实现一键登录以及第三方登陆一键登录手登陆机号使用我们的视频教程(免费)链接为https://static-b5208986-2c02-437e-9a27-cfeba1779ced.bspap ...
uniapp微信公众号微信授权登陆实现
正常不需要支付的项目一般不需要做微信授权登陆,有业务需要的可以加,我这边项目中使用了微信支付功能所以需要搞个微信授权登陆进入到登陆页面首先要执行 onLoad(options) {if (optio ...
uniapp手机号一键登录
uniapp手机号一键登录先讲几个坑避免操作完以后会出bug无效喷我部分机型会因为第一次在手机上编译普通基座无法触发手机号一键登录的弹框,这里当然是重启了,重启可以解决百分之八十的问题!!! 然后 ...
【uni-app】uniapp 实现一键登录超详细记录~
uniapp 实现一键登录一. 前置条件: 开通uniCloud, 开通一键登录功能二. 一键登录代码 & 云函数代码三. 其他条件四. 遇到过什么问题, 如何处理(本地函数同个局域网 ...
微信授权登陆接入第三方App（步骤总结）Android。
这几天开发要用到微信授权的功能,所以就研究了一下.可是微信开放平台接入指南里有几个地方写的不清不楚.在此总结一下,以便需要的人. 很多微信公众平台的应用如果移植到app上的话就需要微信授权登陆了. 目 ...
微信授权登陆【yixiyun】
1,引入相关依赖(主要是最后一个) <dependency><groupId>com.github.binarywang</groupId><artifact ...
如何实现自有App上的小程序第三方微信授权登陆？
对于微信小程序来说,有 OpenID 或 UnionID 作为唯一标识,微信授权登陆小程序账号是很容易实现的,但对于其他应用上的小程序来说(如支付宝.百度等),打通该登陆方式是比较麻烦的. 之前在Fi ...
对接应用宝SDK（YSDK）QQ能登录微信无法登陆的一些解决方法**
对接应用宝SDK(YSDK)QQ能登录微信无法登陆的一些解决方法应用宝SDK微信与手Q接入首先可以去官方文档里查看WXEntryActivity所放的位置是否正确, 还有查看清单文件里 · WXE ...

uniapp手机一键登录，微信授权登陆

之前前端可以通过微信的接口获取openid，现在不允许了，所以把code传给后端后端反数据给我们，

uniapp手机一键登录，微信授权登陆相关推荐

最新文章

热门文章