新版微信小程序授权登录流程及问题汇总（getUserProfile）

问题来源：前不久去面试的时候有面试官问我你有自己的博客啥的吗？只能很尴尬的说没有。其实一直想有一个属于自己的博客啥的去记录自己在开发过程中遇到的问题，正好现在微信小程序比较流行，就花了两天自己搞了一个个人微信小程序。

页面展示：

**使用的功能：**页面信息展示，微信授权登录，微信小程序本地储存token等。
**基本流程：**最近在写微信小程序的时候，配到的微信小程序授权登录改变的问题。
1.首先，不能在进入小程序的时候就直接弹出微信授权登录的弹窗，尤其是在首页的时候，这样会影响用户的体验，所以微信那边审核的时候是通不过的。
2.我的项目是用户进入小程序的时候（首页）可以看轮播图和文章的列表以及下拉刷新和上划加载。
3.用户在进入我的页面的时候，直接判断本地有没有存储token，如果没有直接到授权页面。

//是否已经登录_isLogin:function(){var that = this;if(wx.getStorageSync('token')){//有tokenthat.setData({msg:false//不弹出授权框});wx.request({//去判断token是否过期header: { "content-type": "application/text" },url: baseUrl + '/user?token=' + wx.getStorageSync('token'),method: 'GET',success: res => {if(res.data.code == 400){//如果token过期，直接删除缓存中的token，重新授权登录wx.removeStorageSync('token');//删除小程序端的tokenthis.getUserProfile();//重新授权登录}else{//token没有过期console.log(res.data);that.setData({username: res.data.data.nickname,//昵称avatar: res.data.data.avatar,//头像});}}})//没有token的话直接跳转到授权登录的页面}else{this.getUserProfile();}},

//登录获取token
getUserProfile(e) {// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗wx.getUserProfile({desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写success: (res) => {//这里可以获取昵称和头像wx.login({success : ress => {// console.log(ress);wx.request({url: baseUrl + '/token/user',data:{code:ress.code,nickname:res.userInfo.nickName,avatar:res.userInfo.avatarUrl},method: 'POST',success : res => {wx.setStorageSync('token', res.data);}})}})this.setData({userInfo: res.userInfo,hasUserInfo: true,msg:false})}})},

在授权页面直接从小程序前段发送得到的数据到PHP后台中，数据包括（code,nickname,avatar），后端是laravel和装的overtrue插件。

//http://********/api/token/user（授权登录）
public function index(Request $request){$requestData = $request->all();$return_wechat = get_openid_by_code($requestData['code']);//得到openID和session_key$user = get_user_by_openid($return_wechat['openid']);//根据openID去数据库中获取用户信息if(!$user){//如果数据库中没有用户信息$data['openid'] = $return_wechat['openid'];$data['nickname'] = $requestData['nickname'];$data['avatar'] = $requestData['avatar'];//插入数据库if (!$this->register($data)){return $this->error('注册失败');}//生成token（没有封装随便生成的token）$token = md5(time().rand(10000,99999));//服务器储存tokenCache::put($token,json_encode($data),3600000);return $token;}else{//有用户信息//生成token$token = md5(time().rand(10000,99999));$data['openid'] = $user['openid'];$data['nickname'] = $user['nickname'];$data['avatar'] = $user['avatar'];//服务器储存tokenCache::put($token,json_encode($data),3600000);return $token;}}public function register($data){$user = new User();$user->openid = $data['openid'];$user->nickname = $data['nickname'];$user->avatar = $data['avatar'];if (!$user->save()){return false;}else{return $user->id;}}

//helper.php文件，公共方法文件
if (!function_exists('get_openid_by_code')) {function get_openid_by_code($code){$app = xiaochengxu_app();//返回openid和session_key信息$return_wechat = $app->auth->session($code);return $return_wechat;}
}//获取小程序实例
if (!function_exists('xiaochengxu_app')) {function xiaochengxu_app(){$app = Factory::miniProgram(config('wechat.wechat'));return $app;}
}if (!function_exists('get_user_by_openid')){function get_user_by_openid($openid){return User::where('openid', $openid)->first();}
}

//http://********/api/user(监测token是否过期，如果过期直接在微信小程序端删除token并重新授权登录)
public function index(Request $request){$requestData = $request->all();$user = Cache::get($requestData['token']);if (is_null($user)){return $this->error2('token已经过期',400);}else{return $this->success($user);}}

微信授权登录基本上到了这里就已经结束了。
**总结：**用户进入“我的”页面，监测是否有token
如果有token，直接去后台校验token的有效性。
token无效直接弹出授权登录，用户点击授权登录，
如果用户没有注册过直接注册入库，后台储存token，并将token返回微信小程序。
如果用户注册过，直接返回用户的token。
token有效，直接返回用户信息。
如果无token，直接弹出授权登录，用户点击授权登录，后台返回token。

新版微信小程序授权登录流程及问题汇总（getUserProfile）相关推荐

微信小程序授权登录流程
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html 微信小程序官方API 说明 ...
最新版微信小程序授权登录（自定义头像昵称）
根据官方微信小程序开发关于登录授权API的调整,自 2022年10月25日起有关API接口获取用户头像将统一返回默认灰色头像,昵称将统一返回 "微信用户".(如下图所示) 那我 ...
小程序微信授权登录服务器异常,微信小程序授权登录流程（强制绑定手机号码）...
本文作为多平台用户登录模块设计的扩展设计,即以手机号作为用户的唯一凭证. (图片摘自 2018.10.30) 小程序与服务器是通过自定义登录态来识别用户身份的,以下简称口令(token). 由于微信未 ...
uniapp微信小程序授权登录流程（代码直接复制可用）
1.写一个点击登录的按钮 <view @tap="login">一键登录</view> 2.写点击事件 login() {wx.getUserInfo({s ...
提高微信小程序的应用速度的常见方式有哪些? 小程序怎么实现下拉刷新? 简述微信小程序原理？小程序的发布流程（开发流程）分析下微信小程序的优劣势？小程序授权登录流程？小程序支付如何实现
小程序部分常见面试题提高微信小程序的应用速度的常见方式有哪些? 提高页面加载速度用户行为预测减少默认data的大小组件化方案分包预下载小程序与原生App相比优缺点? 优点: 基于微信平台开 ...
微信小程序授权登录组件的封装
微信小程序授权登录组件的封装新建components文件写wxml文件 wxss部分 js部分 json引用页面使用页面js 授权登录流程如下: 因为多个页面功能需要登录状态所以做了个组 ...
微信小程序授权登录第一次总是失败，第二次登录便正常了
微信小程序授权登录第一次总是失败,第二次登录便正常了错误流程调用用户点击授权用户信息按钮 ===> 调用wx.login( )生成code发送给后台生成session_key解密 ===& ...
微信小程序用户登录流程思路及主要代码
微信小程序用户登录流程思路由于微信官方不允许在刚进入小程序的时候,弹出用户登陆页面,需要在进入小程序后,用户主动点击才能进入登陆页面.此时,将会给小程序开发者在设计用户登陆页面时,带来一定的麻烦.现 ...
SpringBoot微信小程序授权登录
SpringBoot微信小程序授权登录一.appId 1.1.自己是管理者:微信公众平台,申请或登录自己的微信小程序,在开发者管理中即可看到 2.2.自己是开发者:让管理员将自己加入到小程序开发者管 ...

新版微信小程序授权登录流程及问题汇总（getUserProfile）

新版微信小程序授权登录流程及问题汇总（getUserProfile）相关推荐

最新文章

热门文章