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

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

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

1.user 模型

use Laravel\Passport\HasApiTokens; 新增

use HasApiTokens, 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 控制器里新建 function weappLogin ()，别忘了 use 这些

use App\User;
use Carbon\Carbon;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;

写两个 function weappLogin (),avatarUpyun ()

public function weappLogin(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;

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

//我保存到又拍云了，版权归腾讯所有。。。头条闹的
 private function avatarUpyun($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

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

},
login: function(e) {
 let that=this
 that.setData({
  isClick: true
 })
 wx.getUserInfo({
  lang: "zh_CN",
  success: response => {
   wx.login({
    success: res => {
     let data = {
      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') {
        return false;
       }
       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

<view class='padding-xl'>
<button class='cu-btn margin-top bg-green shadow lg block' open-type="getUserInfo" bindgetuserinfo="login" disabled="{{isClick}}" type='success'>
 <text wx:if="{{isClick}}" class='cuIcon-loading2 iconfont-spin'></text> 微信登录</button>
</view>

来源：https://learnku.com/weapp/t/28680