uni-app授权登录，获取用户信息及用户手机号

最近刚接触了uni-app，用于开发微信小程序，设计到了微信授权登录。抽个时间整理个笔记，适用于向我一样刚开始上手uni-app的初学者。

首先要明确uni-app框架有自己的开发一套开发流程，和微信开发者工具使用的语法，api是不同的

如果把微信开发者工具比作原生js，那uni-app就好比React，Vue。

1.获取用户名及头像(真的就只获取用户名和头像地址，没有其他用户信息)

主要步骤：

onLoad中调用 uni.login()获取登录用户code
调用后端接口，将code作为参数置换出SessionKey和OpenId进行存储(可以使用uni.setStorageSync)
点击“授权登录”，新版微信再确认授权后可以直接调用uni.getUserProfile()

老版微信可以通过给button设置open-type="getUserInfo"和@getuserinfo=“事件”，通过e.detail.userInfo获取
调后端自己写的登录接口，参数就是上一步用户信息以及存储的OpenId，获取到cookie等信息完成登录

直接上代码

<template><view class="page-login"><view v-if="canIUse||canIGetUserProfile"><view class='content'><image style="width: 140rpx; height: 140rpx;" mode="aspectFit" src="../../static/wx.jpg"></image><view class="name">登录</view><view>申请获取以下权限</view><text>获得你的公开信息(昵称、头像、地区等)</text></view><view class="login-box"><!--新版登录方式--><button v-if="canIGetUserProfile" class='login-btn' type='primary' @click="bindGetUserInfo"> 授权登录 </button><!--旧版登录方式--><button v-else class='login-btn' type='primary' open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="bindGetUserInfo"> 授权登录 </button></view></view><view v-else class="text-center">请升级微信版本</view></view>
</template>
<script>
export default {data () {return {canIUse: uni.canIUse('button.open-type.getUserInfo'),canIGetUserProfile: false,//微信登录新旧版本 true是新}},onLoad () {//必须先调用微信的登录接口 然后再去调用授权拿微信个人信息（否则顺序错乱会导致 小概率授权后拿不到头像和昵称）this.wxLogin()var _this = thisif (uni.getUserProfile) {this.canIGetUserProfile = true}},onShow () {},methods: {//登录授权bindGetUserInfo (e) {console.log('e', e)var _this = thisif (this.canIGetUserProfile) {//新版登录方式uni.getUserProfile({desc: '获取您个人信息用于登录！',success: (res) => {console.log('用户信息', res)// 存入个人信息uni.setStorageSync('userInfo_winxin', res.userInfo)_this.updateUserInfo()},fail: (res) => {console.log(res)}})} else {//旧版登录方式 --自动就拉起授权窗口if (e.detail.userInfo) {//用户按了允许授权按钮//console.log('手动');console.log('老版用户信息', e.detail.userInfo)// 存入个人信息uni.setStorageSync('userInfo_winxin', e.detail.userInfo)_this.updateUserInfo()} else {console.log('用户拒绝了授权')//用户按了拒绝按钮}}},//登录---目的拿到codewxLogin () {let _this = this// 获取登录用户codeuni.login({provider: 'weixin',success: function (res) {console.log(res);if (res.code) {//将用户登录code传递到后台置换用户SessionKey、OpenId等信息 可参照此篇文章： https://ask.dcloud.net.cn/article/37452// 1.拿code调后端接口1 也就是getOpenid() 换取到SessionKey、OpenId(这个是唯一且固定不变)// 2.拿openId 调后端自己写的登录接口2  获取到cookie等信息 （这个cookie后期请求放在请求头上的） 登陆成功进行存储和跳转页面//这是我们的后端接口1--换取到SessionKey、OpenId// let params = { code: res.code}// getOpenid(params, false).then((res) => {//   console.log('拿code调后端接口1 换取到SessionKey、OpenId', res)//   uni.setStorageSync('session_key', res.data.session_key)//   uni.setStorageSync('openid', res.data.openid)// })} else {uni.showToast({ title: '获取logon_code失败', duration: 2000 })console.log('获取logon_code失败' + res.errMsg)_this.wxLogin()}},fail: (res) => {uni.showToast({ title: '获取logon_code失败', duration: 2000 })console.log('获取logon_code失败' + res.errMsg)_this.wxLogin()}})},//向后台更新信息updateUserInfo () {let _this = this//这是我们的后端接口2--登录接口2  获取到cookie等信息（这个cookie后期请求放在请求头上的）// let params = {//   openid: uni.getStorageSync('openid'),//   nickname: uni.getStorageSync('userInfo_winxin').nickName,//   head_image: uni.getStorageSync('userInfo_winxin').avatarUrl,// }// loginByWechat(params).then((res) => {// })//下面的这个cookie键值对是暂时写死的，正常应该接口2返回的let login_cookie_name = 'login_cookie_name'let login_cookie_value = 'login_cookie_value'uni.setStorageSync('login_cookie_name', login_cookie_name)uni.setStorageSync('login_cookie_value', login_cookie_value)// 注意：以上的存储为了在request请求时候携带和判断用  在退出登录时候需要清除掉uni.hideLoading()uni.showToast({title: '接口登录逻辑自写-登陆成功',duration: 1500,icon: 'success',})// 跳转到首页uni.reLaunch({ url: '/pages/index/index' })}}
}
</script><style lang="less" scoped>
.content {text-align: center;
}
</style>

2.获取用户手机号(真的就只获取手机号)

主要步骤：

onLoad中调用 uni.login()获取登录用户code
调用后端接口，将code作为参数置换出SessionKey和OpenId进行存储(可以使用uni.setStorageSync)
点击“手机号登录”按钮，触发getphonenumber事件，获取如下相关信息，重要是的encryptedData和iv。请求后端接口，将encryptedData，iv，
SessionKey作为参数传递给后端，后端处理后返回正确的电话号码（后端如何解析可参考网上教程）

直接上代码

uni-app授权登录，获取用户信息及用户手机号相关推荐

微信小程序授权登录获取用户信息详解
今天来说一下微信小程序的授权登录获取用户信息,首先我们看微信提供的小程序开发文档: https://blog.csdn.net/qq_41971087/article/details/82466647 ...
Android之QQ授权登录获取用户信息
有时候我们开发的app需要方便用户简单登录,可以让用户使用自己的qq.微信.微博登录到我们自己开发的app. 今天就在这里总结一下如何在自己的app中集成QQ授权登录获取用户信息的功能. 首先我们打开 ...
微信登录——授权登录获取用户信息
引言实现微信扫码登录关键之处就是获取到微信用户信息,那么这就涉及到了微信授权,通过微信授权我们可以获取到用户信息:微信官方文档写的还是比较详细的,但是没有代码演示,这里我就用代码演示一下如何实现微信 ...
Spring boot 项目（十三）——实现微信公众号授权登录获取用户信息
引言微信公众号开发中,必不可少的一环:公众号授权登录.获取微信用户信息前期准备内网渗透=>生成本地指定端口映射的外网域名链接:内网渗透工具natapp使用详解域名生成之后修改yml文件 ...
uniappH5+springboot微信授权登录获取用户数据(非静默授权)
uniappH5+springboot微信授权登录获取用户数据(非静默授权) 微信网页授权开发文档准备工作微信公众号appid和appSecret及配置相关的ip白名单配置网页授权域名,具体操作 ...
新浪微博客户端开发之授权登录+获取微博列表
新浪微博客户端开发之授权登录+获取微博列表闲篇: 最近实在是乱得不行,至于怎么乱我也不知该怎么说,那么久没发博客就证明了这点,一般如果小巫有做详尽的计划,并把时间投入到上面的话,我是可以用最短的时间 ...
新浪微博授权登陆获取个人信息
新浪微博授权登陆获取个人信息 http://pan.baidu.com/s/1eQ7tNSA 这个是接入的phpsdk 和demo 一.phpsdk的组成里面看到6个文件:callback.php. ...
微信小程序授权登录+获取手机号
微信小程序授权登录+获取手机号一.官方文档背景: 小程序登录的链接: 微信小程序获取手机号的链接: 二.微信小程序授权登录+获取手机号 1.简单说明官方文档的操作:先授权登录后拿手机号 2.前端代码 ...
微信获取用户信息 ”微信用户“
微信获取用户信息 "微信用户" 微信小程序调用getUserProfile库的时候显示"微信用户" ,不显示微信头像和昵称的情况原因是: 由于版本太高选择低于 ...
微信小程序授权登录获取手机号,偶尔出现41003问题
最近做微信授权登录获取手机号有时会出现41003问题,研究半天网上查了不少资料,梳理下过程: 从文档可知主要是wx.login()获取code顺序问题 <button class="b ...

uni-app授权登录，获取用户信息及用户手机号

首先要明确uni-app框架有自己的开发一套开发流程，和微信开发者工具使用的语法，api是不同的

uni-app授权登录，获取用户信息及用户手机号相关推荐

最新文章

热门文章