Blogブログ

Archives

Laravel

Laravel + Vue.js でOauth認証を利用したサンプルSPA構築 [4] Oauthサーバの実装

以下を参考に、実装を進めます。 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リクエストの方式を変更。 […]

Laravel

Laravel + Vue.js でOauth認証を利用したサンプルSPA構築 [3] 簡易CRUDの作成と認証機能の実装

ここでは公式サイトの中級チュートリアルを参考に。 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 […]

Uncategorized

Laravel + Vue.js でOauth認証を利用したサンプルSPA構築 [2] BrowserSync連携

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にも反応。 しかも早いくて快適！

Uncategorized

Laravel + Vue.js でOauth認証を利用したサンプルSPA構築 [1] VM立ち上げ、Laravelインストール

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

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

Laravel

Laravel Task List

Laravel Practice Laravelをざっと理解するために、公式サイトの中級TaskListを読んでみました。 https://laravel.com/docs/5.1/quickstart-intermediate 基本的なCRUDに、ログイン機能がついたものです。 なおこのチュートリアルは5.1だったので、5.4に合わせて各所調整しています。 github https://github.com/shnr/laravel_tasklist 目標とする仕様 ユーザ管理の実装 各ユーザーごとのタスクの閲覧が可能 サーバ仕様 PHP 7.2 mysql 5.7 Laravel Version Laravel Framework 5.4.36 インストール composer install https://getcomposer.org/download/ プロジェクトディレクトリを作って、composerをダウンロードします。 $ mkdir myproject-dir $ cd myproject-dir $ php -r “copy(‘https://getcomposer.org/installer’, ‘composer-setup.php’);” $ php -r “if (hash_file(‘SHA384’, ‘composer-setup.php’) === ‘544e09ee996cdf60ece3804abc52599c22b1f40f4323403c44d44fdfdd586475ca9813a858088ffbc1f233e9b180f061’) { echo ‘Installer verified’; } else { echo ‘Installer corrupt’; […]

git

Gitレポジトリを別レポジトリへコピー

memo. git レポジトリのコピー base__gulpをコピーして、別のレポジトリを作りたかったのでメモ。 なおコミット履歴、そのたbranchの引き継ぎは考慮しない。 予め、githubで新規レポジトリを作っておく ローカルにコピー元のレポジトリを落とし、リネームしておく $ git clone https://user_name@github.com/shnr/base__gulp.git $ mv base__gulp new_repo $ cd new_repo gitを削除し、再度イニシャライズ $ rm -rf .git $ git init その後、新しく作ったレポジトリにコミットする $ git add . $ git commit -m 'first commit' $ git remote add origin git@github.com:shnr/new_repo.git $ git push –set-upstream origin master 以上で終了。

VPS

VPS間でのサーバ引っ越し : 2 バーチャルホスト設定と、SSL化

前回からの続き。 ドメインのDNS変更と、バーチャルホストの設定 先にバーチャルホストの設定から。conf.d/配下にサイトごとに設定を行った。まとめても良かったんだけど。 # vim /etc/httpd/conf.d/mydomain.com.conf 内容 <VirtualHost *:80>    ServerName mydomain.com    DocumentRoot “/var/www/mydomain.com/public_html”    DirectoryIndex index.html index.php    ErrorLog /var/log/httpd/mydomain.com_error_log    CustomLog /var/log/httpd/mydomain.com_access_log combined    AddDefaultCharset UTF-8</VirtualHost> 次はSSL。 SSLの設定 無料のLets Encryptを使うことにします。事前に少し調査。 Lets Encryptについて 参考：https://ssl.sakura.ad.jp/column/free-or-paid/ 無料でも問題ないのか？ 同じSSL証明書である以上、強度は同等らしい。 何故無料で運営できているのか？ Lets Encryptは寄付により運用できている。 無料であることのデメリットは？ フィッシングサイトなどで悪用される場合がある。このため永久的に暗号化を保証できるか微妙ではある。90日で更新が必要。なので自動化が必要になる。寄付なので、サービス終了が起こり得るリスクがある。 導入手順 基本はこれに従ってやればOK.https://letsencrypt.jp/usage/ mod_sslの確認 このコマンドで、 # httpd -M この表示があればOK. ssl_module (shared) 443ポートの確認 iptableで開放されているか確認。 iptables -L httpsの表示があればOK。 ACCEPT     tcp  —  anywhere             anywhere            tcp dpt:https Certbot クライアント準備 Epelを有効に yum install epel-release certbot-autoをインストール # wget https://dl.eff.org/certbot-auto# chmod a+x certbot-auto# ./certbot-auto ./certbot-auto を実行することで、必要なパッケージがダウンロードされる。その後自動的に対話式で証明書作成が始まる。virtualhost設定を取得してドメインリストが表示されるので、該当のものを選択してEnter. 成功すると以下のような表示に。 Congratulations! You have successfully enabled xxxx.com~ pemファイルの格納場所や有効期限も記される。pemは、以下にあるらしい。 /etc/letsencrypt/live/ オプションで、sslの設定ファイルも自動生成可能。今回は生成した。 /etc/httpd/conf.d/mydomain.com-le-ssl.conf で、アクセスしてみるのだが、Virtualhostが反映されない。。。いろいろ調べたところ、自動生成されるSSL用confファイルの、ここだった。。 <IfModule mod_ssl.c><VirtualHost *:443> </VirtualHost></IfModule> これを #<IfModule mod_ssl.c><VirtualHost *:443> </VirtualHost>#</IfModule> これでOK.mod_sslは入っているはずなのだが、どういう意味だったのだろう。。。 ラクしたはずが逆に時間を食うという好例。。 とにかく、これでSSL化はOK.自動更新の設定だな。 自動更新設定 更新は、このコマンド一発でいけそう。 […]

12345…13