小程序授权登录并 laravel7(laravel8) token 应用
参考博客：
https://blog.csdn.net/qq_42839386/article/details/118279530
1：composer 下载
composer require firebase/php-jwt
2：手动新建目录app\Service
3:service下建一个Token.php，加人以下代码
<?php namespace App\Service; use Firebase\JWT\JWT; class Token { protected $key; public function __construct() { $this->key = 'lizichen'; } /** * 生成token */ public function createToken($uid) { $time = time(); $payload = array( "iss" => "", "aud" => "", "iat" => $time, "nbf" => $time, "exp" => $time+7200, "uid" => $uid ); $token = JWT::encode($payload,$this->key); return $token; } /** * 验证token */ public function validateToken($token) { try { $decoded = JWT::decode($token, $this->key, array('HS256')); return $decoded->uid; }catch (\Exception $e){ return 'token过期'; } } }
4：App\Http\Middleware 下新建JwtToken.php 文件，写以下代码
<?php namespace App\Http\Middleware; use App\Service\Token; use Closure; use Illuminate\Http\Request; class JwtToken { /** * Handle an incoming request. * * @param \Illuminate\Http\Request $request * @param \Closure $next * @return mixed */ public function handle(Request $request, Closure $next) { $token = $request->header('token'); if(empty($token)){ return response()->json(['code'=>40001,'msg'=>'请先登录','data'=>'']); } $res = (new Token())->validateToken($token); if(!is_numeric($res)){ return response()->json(['code'=>40002,'msg'=>$res,'data'=>'']); } $request['uid'] = $res; return $next($request); } }
5：App\Service新建Curl.php文件
<?php namespace App\Service; class Curl { public static function getCurl($url) { $headerArray =array("Content-type:application/json;","Accept:application/json"); $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE); curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch,CURLOPT_HTTPHEADER,$headerArray); $output = curl_exec($ch); curl_close($ch); $output = json_decode($output,true); return $output; } }
6：这里先去写小程序页面，将用户信息添加入库用用户id进行生成token
wxml：
<button type="primary" open-type="getUserInfo" bind:tap="login">授权登录</button>
wxjs
// 微信授权 login(evt){ var that=this; // wx.getUserProfile获取用户信息 wx.getUserProfile({ // desc 声明获取用户个人信息后的用途，不超过30个字符 desc: 'desc', success:res=>{ if (res.userInfo) { /* wx.login 调用接口获取登录凭证（code）。通过凭证进而换取用户登录态信息，包括用户在当前小程序的唯一标识（openid）、微信开放平台帐号下的唯一标识（unionid，若当前小程序已绑定到微信开放平台帐号）及本次登录的会话密钥（session_key）*/ wx.login({ success:ret=>{ // 获取code var code=ret.code; // 获取用户昵称 var nickName=res.userInfo.nickName; // 获取用户照片 var avatarUrl=res.userInfo.avatarUrl; // 发送至php后端 wx.request({ url: 'http://www.yan.com/api/xcx/login', //仅为示例，并非真实的接口地址 data: { code:code, nickName:nickName, avatarUrl:avatarUrl }, method:"POST", header: { 'content-type': 'application/json' // 默认值 }, // 数据返回json格式 success (res) { // 获取返回来的token，并将token进行保存至本地缓冲中 console.log(res.data.data); wx.setStorageSync('token', res.data.data.token) // 将用户id储存于本地 wx.setStorageSync('userid', res.data.data.id); } }) } }) }else{ console.log('用户拒绝啦'); } } }) }
小程序将用户信息发送至后台，所以要定义路由 route/api.php ，加入中间件进行检测
protected $routeMiddleware = [ 'auth' => \App\Http\Middleware\Authenticate::class, 'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class, 'bindings' => \Illuminate\Routing\Middleware\SubstituteBindings::class, 'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class, 'can' => \Illuminate\Auth\Middleware\Authorize::class, 'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class, 'password.confirm' => \Illuminate\Auth\Middleware\RequirePassword::class, 'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class, 'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class, 'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class, // 中间件 'jwt' => JwtToken::class ];
api.php定义路由：
Route::group(['namespace'=>'xcx','middleware'=>'jwt'],function (){ // 登录 Route::post('xcx/login','LoginController@login'); //商品添加 Route::post('xcx/getData','LoginController@getData'); //商品展示 Route::post('xcx/goodIndex','LoginController@goodIndex'); //图片 Route::post('xcx/xcxImg','LoginController@xcxImg'); });
控制器生成token，并发送至小程序进行本地缓冲
<?php namespace App\Http\Controllers\xcx; use App\Http\Controllers\Controller; use App\Models\GoodRelease; use App\Models\Wxuser; use App\Service\Token; use Illuminate\Http\Request; use Illuminate\Support\Facades\Storage; use Illuminate\Support\Facades\Validator; class LoginController extends Controller { // public function login(Request $request) { $params = $request->post(); // 获取appid $appid = "wx64832aa6eaea82b0"; // 从微信公众平台获得secret $secret = "95e2acaf355dbcb443f5cd4748a152ed"; // 发送请求换取openid和sessionkey $url = "https://api.weixin.qq.com/sns/jscode2session?appid=$appid&secret=$secret&js_code=" . $params['code'] . "&grant_type=authorization_code"; // 暂使用file_get_contents()发送请求，你可以使用CURL扩展的形式实现,获取opid和session_key $res = json_decode(file_get_contents($url), true); // 给$params追加openid $params['openid'] = $res['openid']; // 给$params追加session_key $params['session_key'] = $res['session_key']; // 查看数据库里是否有openid,有就修改，没有就添加 $res = Wxuser::where('openid', $params['openid'])->first(); //用查找到的用户信息的id生成token $token=(new Token())->createToken($res->id); // 将token发送至小程序，小程序进行缓冲token和用户id $res['token']=$token; // 有就修改用户的额openID if ($res) { Wxuser::where('openid', $params['openid'])->update($params); return ['code' => 201, 'meg' => '修改成功', 'data' => $res]; } else { // 没有就添加新用户 $add = Wxuser::create($params); return ['code' => 200, 'meg' => '添加成功', 'data' => $res]; } } }
这样就基本完成啦，再调用接口的时候使用就可以啦，小程序举例，看第8行，看第8行，看第8行重要的事情说3遍
1 find(res){ 2 let m_id = res.currentTarget.dataset.m_id; 3 let token = wx.getStorageSync('token') 4 wx.request({ 5 url: 'http://www.think2.com/movieFind', 6 method:'POST', 7 data:{m_id}, 8 header:{token}, 9 success:res=>{ 10 console.log(res); 11 wx.navigateTo({ 12 url: '../find/find?m_id='+ m_id, 13 }) 14 } 15 })
我在这里在进行举例：
l 小程序轮播图搭建
l 轮播图接口开发，要求符合规范，路由编写符合规范
1.首先我们将数据库放入3张图片
2.创建laravel 模型
3：控制器进行调用：
<?php namespace App\Http\Controllers\Task\task15; use App\Http\Controllers\Controller; use App\Http\Controllers\Task\Task13\BaseConttoller; use App\Models\Task\task15\Rotation; use Illuminate\Http\Request; class RotationController extends BaseConttoller { // public function rotation(){ $data=Rotation::get(); return $this->getJsonData('200','success',$data); } }
4，书写路由：
//task15 登录 创建token Route::post('task15/getlogininfo', 'Task\task15\TaskController@getUserInfo'); /*图片轮播*/ Route::group(['namespace' => 'Task', 'middleware' => 'jwt'], function () { Route::post('task15/rotation', 'task15\RotationController@rotation'); });
5：小程序js文件请求接口
// pages/homepage/homepage.js Page({ /** * 页面的初始数据 */ data: { rotation:[] }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { // 获取本地存储的token let token= wx.getStorageSync('token') wx.request({ url: 'http://www.yan.com/api/task15/rotation', //仅为示例，并非真实的接口地址 header:{token}, method:"post", success:res=> { this.setData({ rotation :res.data.data }) } }) },
6，页面渲染：
<!--pages/homepage/homepage.wxml-->
<view>
<swiper indicator-dots="{{true}}" circular="{{true}}" autoplay="{{true}}" interval="2000">
<block wx:for="{{rotation}}">
<swiper-item>
<image src="{{item.img}}"></image>
</swiper-item>
</block>
</swiper>
</view>
格式化shift+alt+f 进行格式化代码
