带有社交名流头像的 Laravel 8 Jetstream 个人资料照片

Posted 2023-03-14

【中文标题】带有社交名流头像的 Laravel 8 Jetstream 个人资料照片

【英文标题】：Laravel 8 Jetstream Profile Photos with Socialite Avatars

【发布时间】：2021-06-23 07:54:06

【问题描述】：

我正在尝试 Laravel 8 Jetstream 和 Laravel Socialite。 问题是当我检索头像并将其 URL 用于 profile_photo_path 时。刀片文件附加了导致头像不显示的 http://localhost:8000/storage/。 screenshot here

我已启用 jetstream 的个人资料照片 config/jetstream.php

'features' => [
    Features::profilePhotos(),
    Features::accountDeletion(),
],

这是我存储用户的方式app/Http/Controllers/LoginController.php

    protected function registerOrLoginUser($user, $driver=null)
    
        if(!is_null($driver))
            $whereColumn = null;
            if($driver == 'facebook')
                $whereColumn = "facebook_id";
            
            if($driver == 'google')
                $whereColumn = "google_id";
            

            try
                $findUser = User::where($whereColumn, $user->id)->first();
                if($findUser)
                    Auth::login($findUser);
                 else
                    $newUser = new User();
                    $newUser->name = $user->name;
                    $newUser->email = $user->email;
                    $newUser->password = encrypt('');
                    $newUser->$whereColumn = $user->id;
                    $newUser->profile_photo_path = $user->getAvatar();
                    $newUser->save();
                    Auth::login($newUser);
                

我在这里看到了问题resources/views/navigation-menu.blade.php

<button class="flex text-sm border-2 border-transparent rounded-full focus:outline-none focus:border-gray-300 transition duration-150 ease-in-out">
   <img class="h-8 w-8 rounded-full object-cover" src=" Auth::user()->profile_photo_url "  />
</button>

所以我尝试修复这个刀片文件并在此处添加一个 if 语句：

<button class="flex text-sm border-2 border-transparent rounded-full focus:outline-none focus:border-gray-300 transition duration-150 ease-in-out">
    <img class="h-8 w-8 rounded-full object-cover" src=" (Auth::user()->google_id !== null ||  Auth::user()->facebook_id !== null ) ? Auth::user()->profile_photo_path : Auth::user()->profile_photo_url "  />
</button>

“If 语句”有缺陷，当社交名流登录用户决定更改他们的图片时，它就会中断。我试过这个solution，但它只将数值存储到我的 profile_photo_path 中。知道如何让社交名流和 Jetstream 的内置个人资料照片发挥作用吗？

【参考方案1】：

我从vendor/laravel/jetstream/src/HasProfilePhoto.php 复制了getProfilePhotoUrlAtrribute 方法 到App\Models\User 并修改它以接受来自社交网站的头像网址或检索上传的照片。

<?php
    public function getProfilePhotoUrlAttribute()
    

        $path = $this->profile_photo_path;

        if (Storage::disk($this->profilePhotoDisk())->exists($path))
            return Storage::disk($this->profilePhotoDisk())->url($this->profile_photo_path);
         
        elseif (!empty($path))
            // Use Photo URL from Social sites link... 
            return $path;
        
        else 
            //empty path. Use defaultProfilePhotoUrl
            return $this->defaultProfilePhotoUrl();
        
    
?>

Jetsream docs reference