Blogブログ

タイトルの通り、Laravel + Vue.js でOauth認証を利用したサンプルSPAシステムの構築を行いました。 github https://github.com/shnr/laravel_oauth VM立ち上げ、Laravelインストール Laravel + Vue.js でOauth認証を利用したサンプルSPA構築 [1] VM立ち上げ、Laravelインストール BrowserSync連携 Laravel + Vue.js でOauth認証を利用したサンプルSPA構築 [2] BrowserSync連携 簡易CRUDの作成と認証機能の実装 Laravel + Vue.js でOauth認証を利用したサンプルSPA構築 [3] 簡易CRUDの作成と認証機能の実装 Oauthサーバの実装 Laravel + Vue.js でOauth認証を利用したサンプルSPA構築 [4] Oauthサーバの実装 Vue画面構築 Laravel + Vue.js でOauth認証を利用したサンプルSPA構築 [5] Vue画面構築

以下を参考に、実装を進めます。 https://readouble.com/laravel/5.7/ja/passport.html Laravel Passportを使ってみます。 このライブラリはOAuthサーバーとして有名なleague上に構築されているとのこと。 https://oauth2.thephpleague.com/ なお、Laravelのインストールとデフォルトのユーザー認証構築済みの前提。 インストール composerでインストール composer require laravel/passport client, accessTokenを格納するテーブル作成 php artisan migrate accessToken生成のためのキーを作成 php artisan passport:install Userモデルへ、traitの追加。 namespace App; use Laravel\Passport\HasApiTokens; use Illuminate\Notifications\Notifiable; use Illuminate\Contracts\Auth\MustVerifyEmail; use Illuminate\Foundation\Auth\User as Authenticatable; class User extends Authenticatable { use HasApiTokens, Notifiable; AuthServiceProviderへメソッドを追加。 AccessTokenの発行・失効をこれで管理するよう。 /oauth/authorizeなど一通り使えるURLがこれで設定されるとのこと。 AuthServiceProvider.php use Laravel\Passport\Passport; public function boot() { Passport::routes(); } 設定ファイルで、認証APIリクエストの方式を変更。 […]

ここでは公式サイトの中級チュートリアルを参考に。 https://laravel.com/docs/5.1/quickstart-intermediate 認証が手早く実装出来るのはとても楽。 データベース セットアップ データベースを作ったら、.envの編集をして接続確認をしておく。 ※MAMPの場合は、/config/database.phpでunix_socket の調整が必要。 ‘unix_socket’ => ‘/Applications/MAMP/tmp/mysql/mysql.sock’, テーブル作成 今回はUsers, Tasksが必要となる。 Usersは既にデフォルトでLaravel migrationsファイルが存在するのでそれを使う。 Tasksは下記の様にmigrationする。 php artisan make:migration create_tasks_table –create=tasks テーブルは、以下のように定義。 CreateTasksTable.php public function up() { Schema::create(‘tasks’, function (Blueprint $table) { $table->increments(‘id’); $table->integer(‘user_id’)->index(); $table->string(‘name’); $table->timestamps(); }); } 編集したら、migration. php artisan migrate show tablesして, Tableが出来ていることを確認。 認証 Laravelでの認証は超簡単 php artisan make:auth としたあとに、 php artisan migrate […]

Laravelに同梱されてるlaravel mixの設定まで。 まずはVM内で走らせてみる vagrant ssh cd /home/vagrant/code/myproject/ npm install npm run dev コンパイルはOK。 npm run watch このままだとエラーを吐く。cross-envが無いらしいのでインストール。 npm install –save-dev cross-env そしてwatch。 VM上だとwatch-pollとする必要があるそう。 npm run watch-poll 成功。VM上なのでブラウザを開かないため、手動で、、 なおbrowsersyncにはポートが必要になる。 http://myproject.test:3000/ 一見成功。 しかし、コンパイルに時間かかる。。。 さらに、viewsの変更には反応しない。。。 これではちょっと使えない。 VMに入らず、ローカルのディレクトリ上で走らせてみる node_modulesは再度インストールしなおす exit cd myproject rm -R node_modules/ npm install そして実行。 npm run watch ちゃんとviesにも反応。 しかも早いくて快適！

Laravelでの開発環境をHomesteadで構築する備忘録。 VirtualBoxはインストール済みの前提。 Laravel開発環境を整える 複数のプロジェクト管理と共有を考慮し、各ディレクトリごとにHomesteadをインストール。 Homesteadのインストール プロジェクトディレクトリを作成 $ cd my/projects/ $ mkdir project/ composer install $ composer require laravel/homestead –dev homesteadの設定 Vagrantfile, Homesteadをmakeする $ php vendor/bin/homestead make Homestead.yamlを編集。 $ vim Homestead.yaml foldersのmapは初期設定で作成したディレクトリとなっている。 あとでmyapiというディレクトリ名でlaravelをインストールすると想定し、sitesを変更。 また，node_modulesは同期しない。 Homestead.yaml folders: – map: /my/projects to: /home/vagrant/code sites: – map: myapi.test to: /home/vagrant/code/myapi/public type: “apache” options: rsync__args: [“–verbose”, “–archive”, “–delete”, “-zz”] rsync__exclude: […]

Laravelのルーティング api.phpを編集。 リソースコントローラを一度に登録する方法。 Crudメソッドが全て登録される。 URLやパラメータは、以下が詳しい。 https://readouble.com/laravel/5.7/ja/controllers.html#resource-controllers api.php // task全体を設定 Route::group([‘middleware’ => ‘auth:api’], function () { Route::resource(‘task’, ‘TaskController’); }); webはSPAにするので、 app.blade.phpを表示させるようにしておく。 web.php Route::get(‘/’, function () { return view(‘app’); }); Auth::routes(); // Route::get(‘/home’, ‘HomeController@index’)->name(‘home’); // Route::get(‘/tasks’, ‘TaskController@index’); // Route::post(‘/task’, ‘TaskController@store’); // Route::delete(‘/task/{task}’, ‘TaskController@destroy’); Vue開発 Topをvueに TOPページからSPAとなるので、Laravel テンプレートの修正。 app.blade.php <!doctype html> <html lang=”{{ app()->getLocale() }}”> <head> <meta charset=”utf-8″> […]