小程序授權登錄並 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遍

find(res){
  let m_id = res.currentTarget.dataset.m_id;
  let token = wx.getStorageSync('token')
  wx.request({
    url: 'http://www.think2.com/movieFind',
    method:'POST',
    data:{m_id},
    header:{token},
    success:res=>{
     console.log(res);
     wx.navigateTo({
       url: '../find/find?m_id='+ m_id,
     })
    }
  })

 我在這里在進行舉例：

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 進行格式化代碼