Q&A
開発環境の情報と.envの中身があるといいかもしれません^^
前提・実現したいこと
現在Laravelにて音楽系アプリを制作しています。
その中でGoogleの認証機能を使ったログイン機能を実装したいと考えています。
アカウントを選択する場所まではいくのですが，アカウント選択後エラーが発生してしまいます。
皆様の知恵をお貸しいいただけると助かります
発生している問題・エラーメッセージ
404 Not Found
該当のソースコード
// config/app.php 'providers' => [ /* * Laravel Framework Service Providers... */ Illuminate\Auth\AuthServiceProvider::class, Illuminate\Broadcasting\BroadcastServiceProvider::class, Illuminate\Bus\BusServiceProvider::class, Illuminate\Cache\CacheServiceProvider::class, Illuminate\Foundation\Providers\ConsoleSupportServiceProvider::class, Illuminate\Cookie\CookieServiceProvider::class, Illuminate\Database\DatabaseServiceProvider::class, Illuminate\Encryption\EncryptionServiceProvider::class, Illuminate\Filesystem\FilesystemServiceProvider::class, Illuminate\Foundation\Providers\FoundationServiceProvider::class, Illuminate\Hashing\HashServiceProvider::class, Illuminate\Mail\MailServiceProvider::class, Illuminate\Notifications\NotificationServiceProvider::class, Illuminate\Pagination\PaginationServiceProvider::class, Illuminate\Pipeline\PipelineServiceProvider::class, Illuminate\Queue\QueueServiceProvider::class, Illuminate\Redis\RedisServiceProvider::class, Illuminate\Auth\Passwords\PasswordResetServiceProvider::class, Illuminate\Session\SessionServiceProvider::class, Illuminate\Translation\TranslationServiceProvider::class, Illuminate\Validation\ValidationServiceProvider::class, Illuminate\View\ViewServiceProvider::class, Laravel\Socialite\SocialiteServiceProvider::class, /* * Package Service Providers... */ /* * Application Service Providers... */ App\Providers\AppServiceProvider::class, App\Providers\AuthServiceProvider::class, // App\Providers\BroadcastServiceProvider::class, App\Providers\EventServiceProvider::class, App\Providers\RouteServiceProvider::class, 'aliases' => [ 'App' => Illuminate\Support\Facades\App::class, 'Arr' => Illuminate\Support\Arr::class, 'Artisan' => Illuminate\Support\Facades\Artisan::class, 'Auth' => Illuminate\Support\Facades\Auth::class, 'Blade' => Illuminate\Support\Facades\Blade::class, 'Broadcast' => Illuminate\Support\Facades\Broadcast::class, 'Bus' => Illuminate\Support\Facades\Bus::class, 'Cache' => Illuminate\Support\Facades\Cache::class, 'Config' => Illuminate\Support\Facades\Config::class, 'Cookie' => Illuminate\Support\Facades\Cookie::class, 'Crypt' => Illuminate\Support\Facades\Crypt::class, 'DB' => Illuminate\Support\Facades\DB::class, 'Eloquent' => Illuminate\Database\Eloquent\Model::class, 'Event' => Illuminate\Support\Facades\Event::class, 'File' => Illuminate\Support\Facades\File::class, 'Gate' => Illuminate\Support\Facades\Gate::class, 'Hash' => Illuminate\Support\Facades\Hash::class, 'Lang' => Illuminate\Support\Facades\Lang::class, 'Log' => Illuminate\Support\Facades\Log::class, 'Mail' => Illuminate\Support\Facades\Mail::class, 'Notification' => Illuminate\Support\Facades\Notification::class, 'Password' => Illuminate\Support\Facades\Password::class, 'Queue' => Illuminate\Support\Facades\Queue::class, 'Redirect' => Illuminate\Support\Facades\Redirect::class, 'Redis' => Illuminate\Support\Facades\Redis::class, 'Request' => Illuminate\Support\Facades\Request::class, 'Response' => Illuminate\Support\Facades\Response::class, 'Route' => Illuminate\Support\Facades\Route::class, 'Schema' => Illuminate\Support\Facades\Schema::class, 'Session' => Illuminate\Support\Facades\Session::class, 'Storage' => Illuminate\Support\Facades\Storage::class, 'Str' => Illuminate\Support\Str::class, 'URL' => Illuminate\Support\Facades\URL::class, 'Validator' => Illuminate\Support\Facades\Validator::class, 'View' => Illuminate\Support\Facades\View::class, 'Socialite' => Laravel\Socialite\Facades\Socialite::class, ],
// config/services.php 'google' => [ 'client_id' => env('GOOGLE_CLIENT_ID'), 'client_secret' => env('GOOGLE_CLIENT_SECRET'), 'redirect' => env('APP_URL') . '/login/google/callback', ],
// Auth/LoginController.php <?php namespace App\Http\Controllers\Auth; use App\Http\Controllers\Controller; use App\Providers\RouteServiceProvider; use Illuminate\Foundation\Auth\AuthenticatesUsers; use App\User; use Socialite; class LoginController extends Controller { /* |-------------------------------------------------------------------------- | Login Controller |-------------------------------------------------------------------------- | | This controller handles authenticating users for the application and | redirecting them to your home screen. The controller uses a trait | to conveniently provide its functionality to your applications. | */ use AuthenticatesUsers; protected $redirectTo = RouteServiceProvider::HOME; /** * Create a new controller instance. * * @return void */ public function __construct() { $this->middleware('guest')->except('logout'); } public function getGoogleAuth() { return Socialite::driver('google')->redirect(); } public function authGoogleCallback() { $gUser = Socialite::driver('google')->stateless()->user(); $user = User::where('email', $gUser->email)->first(); if ($user == null) { $user = $this->createUserByGoogle($gUser); } \Auth::login($user, true); return redirect('/'); } public function createUserByGoogle($gUser) { $user = User::create([ 'name' => $gUser->name, 'email' => $gUser->email, 'password' => \Hash::make(uniqid()), ]); return $user; } }
// web.php Auth::routes(); Route::get('login/google', 'Auth\LoginController@getGoogleAuth'); Route::get('login/callback/google', 'Auth\LoginController@authGoogleCallback'); Route::get('/', 'MypageController@index') -> middleware('auth'); Route::get('/artists', 'ArtistController@index'); Route::get('/artists/search', 'ArtistController@search'); Route::get('/artists/{artist_id}/{song_title_id}', 'LyricController@show'); Route::get('/artists/{artist}', 'SongTitleController@index'); Route::post('/artists/{artist_id}/{song_title_id}', 'PostController@store'); Route::delete('/artists/{artist_id}/{song_title_id}/{post_id}', 'PostController@destroy');
// login.blade.php <a class=”btn btn-block btn-social btn-google” href=login/google> <i class=”fab fa-google” aria-hidden=”true”> Googleアカウントでログイン</i> </a>
// database/migrations/2014_10_12_000000_create_users_table.php <?php use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; class CreateUsersTable extends Migration { public function up() { Schema::create('users', function (Blueprint $table) { $table->bigIncrements('id'); $table->string('name'); $table->string('email')->unique(); $table->timestamp('email_verified_at')->nullable(); $table->string('password'); $table->rememberToken(); $table->timestamps(); }); } public function down() { Schema::dropIfExists('users'); } }
APP_NAME=G-CHORD APP_ENV=local APP_KEY=****** APP_DEBUG=true APP_URL=https://*************aeada1fb430.vfs.cloud9.us-east-2.amazonaws.com LOG_CHANNEL=stack DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=gchord DB_USERNAME=g-chord DB_PASSWORD=***** BROADCAST_DRIVER=log CACHE_DRIVER=file QUEUE_CONNECTION=sync SESSION_DRIVER=file SESSION_LIFETIME=120 REDIS_HOST=127.0.0.1 REDIS_PASSWORD=null REDIS_PORT=6379 MAIL_DRIVER=smtp MAIL_HOST=smtp.mailtrap.io MAIL_PORT=2525 MAIL_USERNAME=null MAIL_PASSWORD=null MAIL_ENCRYPTION=null MAIL_FROM_ADDRESS=null MAIL_FROM_NAME="${APP_NAME}" AWS_ACCESS_KEY_ID=****** AWS_SECRET_ACCESS_KEY=***** AWS_DEFAULT_REGION=us-east-1 AWS_BUCKET=g-chord PUSHER_APP_ID= PUSHER_APP_KEY= PUSHER_APP_SECRET= PUSHER_APP_CLUSTER=mt1 MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}" MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}" GOOGLE_CLIENT_ID=***** GOOGLE_CLIENT_SECRET=*****
試したこと
これらはLaravel で作ったアプリに Google アカウントでログインする方法（OAuth 2.0）を参考に実装しました。
補足情報（FW/ツールのバージョンなど）
補足情報ですが，現在はAWSのcloud9を用いたローカル環境にて実装を行なっています。ブラウザはGoogle Chromeを用いています。
また，実際のFQDNはhttps://*************aeada1fb430.vfs.cloud9.us-east-2.amazonaws.com/となっています。
Laravel 6.2
Socilite 5.2
追記：8/28現在ですが，localhostの拒否は無くなったのですがloclahostのエラーと同じ場面（Googleアカウントを選択後，web.phpでいうlogin/google/callback）で404エラーが起きてしまっています。ddにて$gUser及び$userの情報取得を試みましたが，取得する前にエラーが発生しています。
追加の情報が必要でしたら何なりと仰ってください。
閲覧いただきありがとうございます。
開発環境に関しましては追加いたしました。また.envの中身があると良いとおっしゃられていましたが，どの部分でしょうか？一応誰でも閲覧可能な場ですので，ものによっては提示出来ない場合もございます。ご容赦くださいませ。
環境情報が書かれていないので、ちょっと分からないですね。これは開発環境で、質問者のローカルPC上で開発を行っているのでしょうか？ GCPという単語が出てきてるので、そうするとGCP上の話でしょうか？ もしGCP上で動かしてるのだとすればlocalhostを指定してもだめですよね（GCP上のWEBブラウザを使ってるなら別ですが・・・）。
ということで、kawa_kawawakaさんとかぶりますが、現在の環境情報をもう少し丁寧に書いてください。おそらく環境に依存した問題かと思います。どこで開発しているのか？ ブラウザからどういうFQDNでアクセスしてるのか？ その辺の情報が必要かと思います。
提示したくないものは***とかhogehogeとかにするなどしてもいいので、.envの情報を可能な限り出して頂くと解決が早いと思います。
閲覧及び詳細なご指摘ありがとうございます。
Abe様が仰られた開発環境と.envの情報をただいま追加いたしました。開発環境に関する情報はこれで足りましたでしょうか？無知で大変申し訳ないのですが，さらに詳細な情報が必要でしたら何なりと仰ってくださいませ。よろしくお願い致します。
一つ聞きたいのですが、Googleアカウントを選択する画面の前（認証開始画面）も"http://localhost:8080/***/***"のようにアクセスしてますか？ であればローカルPC内（のDockerとか仮想環境とか？）でLaravelが稼働しているということでいいですよね？ もしそうならGCPというワードが出てくるのがちょっとよく分からないですし（GCPではいったい何をしてるのでしょうか？）、「localhost で接続が拒否されました」というのが出るのもちょっと意味がわかりません。.envの"APP_URL"は通常時にLaravelにアクセスするURLを記載しないとなりませんが（使われてなければ影響はないため、間違っていても不具合が露呈しにくい）、実際にそうなっているでしょうか？
kawa_kawawakaさんもおそらくまったく同じ疑問を持ってると思います。Laravelがどこで動いていて、どのブラウザからどのようにアクセスしているか？の情報がほしいです。通常なら.envをみるとたいていは分かるのですが、今回はコールバックの設定も絡んでいるので、その辺がちょっと分からないのです。ということで、質問文に情報を追記頂ければと思います。
追記ありがとうございます。であれば
APP_URL=http://localhost:8080 ではダメで
APP_URL=https://*********aeada1fb430.vfs.cloud9.us-east-2.amazonaws.com/ とするべきかと。コールバックのURLにlocalhostを渡しても自分のPC内にアクセスしちゃうので、「このサイトにアクセスできません localhost で接続が拒否されました。」が出るのは自明かと思います。
Abe様，ありがとうございます。
言葉足らずで申し訳ありません。GCPと言ったのはGCP内のOAuthの承認済みURIの場所にポート番号を追加したもの（ここではhttp://localhost:8080/login/google/callbackのこと)を新たに追加したという意味でした。誤解を招き申し訳ありません。
行き違いなってしまいました。失礼いたしました。
Abe様が仰られたようにAPP_URLの中身を変更したところ，先程のエラーは出なくなりました。ただその代わりに404エラーが起きてしまいました。これは先程とはまた違った理由でのエラーであると解釈して良いのでしょうか?
そうですね。コールバックの設定はおそらく上手くいったので、404に関してはまったくの別問題かと思います。Laravelやサーバのログを確認してみてください。
おそらく認証に使うコールバックの仕組みの理解が足りてなさそうなので（これが分かっていたらすぐにエラーの原因が分かったはず・・・）、こちらも合わせて読まれると良いかもしれません。
参考）
https://qiita.com/sachiko-kame/items/fd44e52d46d92d67cd06
確認ですが、「承認済みのリダイレクトURL」の変更はお済みですか？？><
ご指摘ありがとうございます。
承認済みのリダイレクトURLに関しましては，正直localhostと実際のFQDNどちらが反映されているかがわからなかったので一応両方入れておりました。
404って、以下のようなURLに飛んでるからじゃないでしょうか?w 「”」が邪魔かと思います
https://*******.herokuapp.com/”auth/google”
引き続き閲覧いただきありがとうございます。
すいません！実はそこ僕も投稿した後に気がついて，web.phpに合わせて変更していました。なのでweb.phpでいうところのlogin/googleには飛べています。実際にアカウントを選択することはできているので！ただその後のlogin/google/callbackのところで404エラーが発生します。誤解を招いてしまい申し訳ないです。修正加えておきますのでよろしければ確認していただけると幸いです。
あなたの回答
tips
プレビュー
