Laravel 微信小程序后端實(shí)現(xiàn)用戶登錄的示例代碼
接上篇微信小程序后端搭建:分享:Laravel 微信小程序后端搭建
后端搭建好后第一件事就是用戶登錄認(rèn)證,簡(jiǎn)單實(shí)現(xiàn)微信小程序登錄認(rèn)證
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',//用戶等級(jí) '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;
寫兩個(gè) function weappLogin (),avatarUpyun ()
public function weappLogin(Request $request) { $code = $request->code; // 根據(jù) 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);//拿到分辨率高點(diǎn)的頭像 $country = $request->country?$request->country:''; $province = $request->province?$request->province:''; $city = $request->city?$request->city:''; $gender = $request->gender == '1' ? '1' : '2';//沒傳過性別的就默認(rèn)女的吧,體驗(yàn)好些 $language = $request->language?$request->language:''; //找到 openid 對(duì)應(yīng)的用戶 $user = User::where('weapp_openid', $weappOpenid)->first(); //沒有,就注冊(cè)一個(gè)用戶 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, ]); } //如果注冊(cè)過的,就更新下下面的信息 $attributes['updated_at'] = now(); $attributes['weixin_session_key'] = $weixinSessionKey; $attributes['weapp_avatar'] = $avatar; if ($nickname) { $attributes['nickname'] = $nickname; } if ($request->gender) { $attributes['gender'] = $gender; } // 更新用戶數(shù)據(jù) $user->update($attributes); // 直接創(chuàng)建token并設(shè)置有效期 $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); } //我保存到又拍云了,版權(quán)歸騰訊所有。。。頭條鬧的 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
小頭像默認(rèn) / 132
4. 后端上面就寫好了,再看下小程序端怎么做的哈,打開小程序的 app.json,添加 "pages/auth/auth",
{ "pages": [ "pages/index/index", "pages/auth/auth",//做一個(gè)登錄頁(yè)面 "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({ /** * 頁(yè)面的初始數(shù)據(jù) */ data: { UserData: [], isClick: false, }, /** * 生命周期函數(shù)--監(jiān)聽頁(yè)面加載 */ 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: '服務(wù)器錯(cuò)誤', 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>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
解決Laravel 不能創(chuàng)建 migration 的問題
今天小編就為大家分享一篇解決Laravel 不能創(chuàng)建 migration 的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10laravel框架模板之公共模板、繼承、包含實(shí)現(xiàn)方法分析
這篇文章主要介紹了laravel框架模板之公共模板、繼承、包含實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了Laravel框架中公共模板的建立、模板包含、模板繼承等相關(guān)操作技巧,需要的朋友可以參考下2019-08-08tp5框架基于ajax實(shí)現(xiàn)異步刪除圖片的方法示例
這篇文章主要介紹了tp5框架基于ajax實(shí)現(xiàn)異步刪除圖片的方法,結(jié)合實(shí)例形式詳細(xì)分析了thinkPHP5使用ajax異步刪除圖片前臺(tái)提交與后臺(tái)處理相關(guān)操作技巧,需要的朋友可以參考下2020-02-02

laravel 解決ajax異步提交數(shù)據(jù),并還回填充表格的問題