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

Laravel  /  管理员 发布于 3年前   720

接上篇微信小程序后端搭建：分享：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

    微信登录

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

您可能感兴趣的文章:

• Laravel 微信小程序后端搭建步骤详解