Laravel 微信小程序后端实现用户登录的示例代码

2023-08-07 09:59:04 68

接上篇微信小程序后端搭建：分享：Laravel微信小程序后端搭建

后端搭建好后第一件事就是用户登录认证，简单实现微信小程序登录认证

1.user模型

useLaravel\Passport\HasApiTokens;新增

useHasApiTokens,Notifiable;

protected$fillable=[
'id',
'name',
'email',
'email_verified_at',
'username',
'phone',
'avatar',//我用来把微信头像的/0清晰图片，存到又拍云上
'weapp_openid',
'nickname',
'weapp_avatar',
'country',
'province',
'city',
'language',
'location',
'gender',
'level',//用户等级
'is_admin',//is管理员
];

2.新增一条路由

//前端小程序拿到的地址：https://域名/api/v1/自己写的接口
Route::group(['prefix'=>'/v1'],function(){
Route::post('/user/login','UserController@weappLogin');
});

3.在UserController控制器里新建functionweappLogin()，别忘了use这些

useApp\User;
useCarbon\Carbon;
useIlluminate\Http\Request;
useIlluminate\Support\Facades\Storage;

写两个functionweappLogin(),avatarUpyun()

publicfunctionweappLogin(Request$request)
{
$code=$request->code;
//根据code获取微信openid和session_key
$miniProgram=\EasyWeChat::miniProgram();
$data=$miniProgram->auth->session($code);
if(isset($data['errcode'])){
return$this->response->errorUnauthorized('code已过期或不正确');
}
$weappOpenid=$data['openid'];
$weixinSessionKey=$data['session_key'];
$nickname=$request->nickname;
$avatar=str_replace('/132','/0',$request->avatar);//拿到分辨率高点的头像
$country=$request->country?$request->country:'';
$province=$request->province?$request->province:'';
$city=$request->city?$request->city:'';
$gender=$request->gender=='1'?'1':'2';//没传过性别的就默认女的吧，体验好些
$language=$request->language?$request->language:'';

//找到openid对应的用户
$user=User::where('weapp_openid',$weappOpenid)->first();
//没有，就注册一个用户
if(!$user){
$user=User::create([
'weapp_openid'=>$weappOpenid,
'weapp_session_key'=>$weixinSessionKey,
'password'=>$weixinSessionKey,
'avatar'=>$request->avatar?$this->avatarUpyun($avatar):'',
'weapp_avatar'=>$avatar,
'nickname'=>$nickname,
'country'=>$country,
'province'=>$province,
'city'=>$city,
'gender'=>$gender,
'language'=>$language,
]);
}
//如果注册过的，就更新下下面的信息
$attributes['updated_at']=now();
$attributes['weixin_session_key']=$weixinSessionKey;
$attributes['weapp_avatar']=$avatar;
if($nickname){
$attributes['nickname']=$nickname;
}
if($request->gender){
$attributes['gender']=$gender;
}
//更新用户数据
$user->update($attributes);
//直接创建token并设置有效期
$createToken=$user->createToken($user->weapp_openid);
$createToken->token->expires_at=Carbon::now()->addDays(30);
$createToken->token->save();
$token=$createToken->accessToken;

returnresponse()->json([
'access_token'=>$token,
'token_type'=>"Bearer",
'expires_in'=>Carbon::now()->addDays(30),
'data'=>$user,
],200);
}

//我保存到又拍云了，版权归腾讯所有。。。头条闹的
privatefunctionavatarUpyun($avatar)
{
$avatarfile=file_get_contents($avatar);
$filename='avatars/'.uniqid().'.png';//微信的头像链接我也不知道怎么获取后缀，直接保存成png的了
Storage::disk('upyun')->write($filename,$avatarfile);
$wexinavatar=config('filesystems.disks.upyun.protocol').'://'.config('filesystems.disks.upyun.domain').'/'.$filename;
return$wexinavatar;//返回链接地址
}

微信的头像/0

小头像默认/132

4.后端上面就写好了，再看下小程序端怎么做的哈，打开小程序的app.json，添加"pages/auth/auth",

{
"pages":[
"pages/index/index",
"pages/auth/auth",//做一个登录页面
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor":"#fff",
"navigationBarTitleText":"WeChat",
"navigationBarTextStyle":"black"
},
"sitemapLocation":"sitemap.json",
"permission":{
"scope.userLocation":{
"desc":"你的位置信息将用于小程序位置接口的效果展示"
}
}
}

5.打开auth.js

constapp=getApp();
Page({
/**
*页面的初始数据
*/
data:{
UserData:[],
isClick:false,
},
/**
*生命周期函数--监听页面加载
*/
onLoad:function(options){

},
login:function(e){
letthat=this
that.setData({
isClick:true
})
wx.getUserInfo({
lang:"zh_CN",
success:response=>{
wx.login({
success:res=>{
letdata={
code:res.code,
nickname:response.userInfo.nickName,
avatar:response.userInfo.avatarUrl,
country:response.userInfo.country?response.userInfo.country:'',
province:response.userInfo.province?response.userInfo.province:'',
city:response.userInfo.city?response.userInfo.city:'',
gender:response.userInfo.gender?response.userInfo.gender:'',
language:response.userInfo.language?response.userInfo.language:'',
}
console.log(data)
app.globalData.userInfo=data;
wx.request({
url:'你的后端地址',//我用的valet，http://ak.name/api/v1/user/login
method:'POST',
data:data,
header:{
'Content-Type':'application/x-www-form-urlencoded'
},
success:function(res){
console.log(res)
if(res.statusCode!='200'){
returnfalse;
}
wx.setStorageSync('access_token',res.data.access_token)
wx.setStorageSync('UserData',res.data.data?res.data.data:'')
wx.redirectTo({
url:'/pages/index/index',
})
},
fail:function(e){
wx.showToast({
title:'服务器错误',
duration:2000
});
that.setData({
isClick:false
})
},
});
}
})
},
fail:function(e){
that.setData({
isClick:false
})
},
})

}
})

6.打开auth.wxml



微信登录

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

Laravel 微信小程序后端实现用户登录的示例代码

热门推荐

随机推荐