Laravel 微信扫码登录

随着移动互联网的普及，微信扫码登录已经成为许多网站和应用的标准功能之一。介绍如何在Laravel项目中实现微信扫码登录功能，并提供多种实现思路。

解决方案

在Laravel项目中实现微信扫码登录，主要涉及以下几个步骤：
1. 注册微信开放平台账号并创建移动应用。
2. 安装Laravel微信SDK。
3. 实现扫码登录的前端页面。
4. 处理后端逻辑，包括生成二维码、处理回调和验证用户信息。

安装Laravel微信SDK

我们需要安装Laravel微信SDK。推荐使用 overtrue/laravel-wechat 这个包，它提供了丰富的功能和良好的文档支持。

安装步骤

1. 使用Composer安装包：

   bash
composer require overtrue/laravel-wechat


2. 发布配置文件：

   bash
php artisan vendor:publish --provider="Overtrue\LaravelWeChat\ServiceProvider"


3. 配置微信相关信息，在 .env 文件中添加以下内容：

   env
WECHAT_APP_ID=your_app_id
WECHAT_SECRET=your_app_secret
WECHAT_TOKEN=your_token
WECHAT_AES_KEY=your_aes_key


4. 在 config/services.php 中添加微信配置：

   php
'wechat' => [
'default' => [
'app_id' => env('WECHAT_APP_ID', 'your_app_id'),
'secret' => env('WECHAT_SECRET', 'your_app_secret'),
'token' => env('WECHAT_TOKEN', 'your_token'),
'aes_key' => env('WECHAT_AES_KEY', 'your_aes_key'),
'response_type' => 'array',
'log' => [
'level' => 'debug',
'file' => storage_path('logs/wechat.log'),
],
],
],


实现前端页面

生成二维码

在前端页面中，我们需要一个按钮或链接来触发生成二维码的过程。可以使用JavaScript来实现这一点。

html
</p>



    
    <title>微信扫码登录</title>


    <button id="login-btn">微信扫码登录</button>
    <div id="qrcode"></div>

    
    
        document.getElementById('login-btn').addEventListener('click', function() {
            fetch('/generate-qrcode')
                .then(response => response.json())
                .then(data => {
                    const qrcode = QRCode.generateSVG(data.url, { width: 200, height: 200 });
                    document.getElementById('qrcode').innerHTML = qrcode;
                })
                .catch(error => console.error('Error:', error));
        });
    



<p>

处理后端逻辑

生成二维码

在后端，我们需要一个路由和控制器方法来生成二维码。

路由

php
// routes/web.php
use AppHttpControllersWeChatController;</p>

<p>Route::get('/generate-qrcode', [WeChatController::class, 'generateQrCode']);

控制器

php
// app/Http/Controllers/WeChatController.php
namespace AppHttpControllers;</p>

<p>use IlluminateHttpRequest;
use EasyWeChatFactory;</p>

<p>class WeChatController extends Controller
{
    public function generateQrCode()
    {
        $app = Factory::officialAccount(config('wechat.official_account.default'));</p>

<pre><code>    // 生成授权URL
    $responseType = 'code';
    $scope = 'snsapi_login';
    $redirectUri = urlencode(env('APP_URL') . '/wechat/callback');
    $state = uniqid();
    session(['wechat_login_state' => $state]);

    $url = $app->oauth->getRedirectUrl($redirectUri, $state, $scope);

    return response()->json(['url' => $url]);
}

}

处理回调

当用户扫描二维码并授权后，微信会重定向到我们指定的回调URL。我们需要处理这个回调并获取用户信息。

路由

php
// routes/web.php
Route::get('/wechat/callback', [WeChatController::class, 'handleCallback']);


控制器

php
// app/Http/Controllers/WeChatController.php
public function handleCallback(Request $request)
{
    $app = Factory::officialAccount(config('wechat.official_account.default'));</p>

<pre><code>// 获取授权码
$code = $request->input('code');
$state = $request->input('state');

if ($state !== session('wechat_login_state')) {
    return redirect('/')->with('error', '非法请求');
}

try {
    // 通过授权码获取用户信息
    $user = $app->oauth->userFromCode($code);

    // 处理用户信息，例如保存到数据库或设置会话
    session(['wechat_user' => $user->toArray()]);

    return redirect('/')->with('success', '登录成功');
} catch (Exception $e) {
    return redirect('/')->with('error', '登录失败: ' . $e->getMessage());
}

}

多种实现思路

使用中间件

为了简化授权流程，可以使用中间件来处理微信用户的登录状态。

创建中间件

php
php artisan make:middleware WeChatAuth


中间件逻辑

php
// app/Http/Middleware/WeChatAuth.php
namespace AppHttpMiddleware;</p>

<p>use Closure;
use IlluminateHttpRequest;
use EasyWeChatFactory;</p>

<p>class WeChatAuth
{
    public function handle(Request $request, Closure $next)
    {
        if (!session('wechat_user')) {
            return redirect('/generate-qrcode');
        }</p>

<pre><code>    return $next($request);
}

}

注册中间件

php
// app/Http/Kernel.php
protected $routeMiddleware = [
// 其他中间件
'wechat.auth' => AppHttpMiddlewareWeChatAuth::class,
];


使用中间件

php
// routes/web.php
Route::get('/protected', [WeChatController::class, 'protectedPage'])->middleware('wechat.auth');


使用缓存

为了提高性能，可以将微信用户信息缓存起来，避免每次请求都调用微信API。

修改控制器

php
// app/Http/Controllers/WeChatController.php
use IlluminateSupportFacadesCache;</p>

<p>public function handleCallback(Request $request)
{
    $app = Factory::officialAccount(config('wechat.official_account.default'));</p>

<pre><code>$code = $request->input('code');
$state = $request->input('state');

if ($state !== session('wechat_login_state')) {
    return redirect('/')->with('error', '非法请求');
}

try {
    $user = $app->oauth->userFromCode($code);

    // 缓存用户信息
    Cache::put('wechat_user_' . $user->getId(), $user->toArray(), now()->addMinutes(30));

    session(['wechat_user' => $user->toArray()]);

    return redirect('/')->with('success', '登录成功');
} catch (Exception $e) {
    return redirect('/')->with('error', '登录失败: ' . $e->getMessage());
}

}

通过以上步骤，我们可以在Laravel项目中实现微信扫码登录功能。希望对您有所帮助！