php教程

超轻量级php框架startmvc

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

更新时间:2020-04-14 01:56:43 作者:startmvc
接上篇微信小程序后端搭建:分享: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>

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

Laravel 小程序用户登录 Laravel 微信小程序登录