Blogブログ

Month: October 2018

Uncategorized

Laravel + Vue.js でOauth認証を利用したサンプルSPA構築 [5] Vue画面構築

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″> […]

Laravel

Laravel 5.7 OAuth実装

Laravel5.7でOauth認証を実装します。 https://readouble.com/laravel/5.7/ja/passport.html LaravelではPassportを使うことで、非常に簡単にOAuth2サーバの実装が可能になります。 Passportはleague/oauth2-serverというライブラリ上に構築されています。 cakephpなど他のフレームワークでも利用されており、信頼性の高いライブラリです。 https://oauth2.thephpleague.com/ 実装 インストール composerでインストールします。 composer require laravel/passport Migration client, accessTokenを格納するテーブルを作成します。 これもコマンド打つだけです。 php artisan migrate accessToken生成のため、キーを作成しておきます。 強固なセキュリティにするため重要です。 php artisan passport:install Model Userモデルへ、traitを追加します。 User.php 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 AuthServiceProviderへ、メソッドを追加します。 ここでAccessTokenの発行・失効を管理出来るようになります。 AuthServiceProvider.php public function boot() { […]

js

javascript, jquery, vue.js でajaxする方法MEMO

<article id=”content” class=”markdown-body”> <h1>jsでajax 3パターン</h1> Javascript function getJSON() { var req = new XMLHttpRequest(); req.onreadystatechange = function() { if(req.readyState == 4 && req.status == 200){ console.log(req.responseText) obj = JSON.parse(req.responseText); console.log(obj) } }; req.open("GET", "myjson.json", false); req.send(null); } getJSON(); vue axios.get('myjson.json') .then( function(response) { console.log(response) }) .catch( function() { console.log(response) }) JQuery var jqxhr = $.getJSON( […]

12