質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.87%

  • Laravel 5

    1604questions

    Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

  • React.js

    651questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

  • Redux

    88questions

簡単な、カスタマイズ、マルチ認証システムを React Redux ←→ Laravel間で統合実装する方法を教えていただきたいです。

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 461

前提・実現したいこと

React Redux axios Laravel の構成で、React Redux で作ったフロントエンドの認証(ログイン画面)をLaravelでPassportを使用・不使用問わずどうにかして、データベースのテーブル構造をうまく渡してLaravelと合体させたい。最終的には、React Reduxで作るSPAのアプリ制作なのでReact ReduxのログインページをLaravelでアクセストークンを持たせて管理者ユーザと一般ユーザーからのマルチ認証システムが作りたい。Laravelは、APIサーバーとして、サイボウズLiveのAPIからスケジュールデータを抜き取る為に使用します。

疑問点・分からない事

Passportは使った方が、アクセストークンや、認証・認可のシステムは作りやすいのは、チュートリアルを使用して分かりました。しかし、カスタマイズする時に、Vue.jsでなく、Reactを使いたいので、php artisan preset reactを使用したら、Vue.jsのスキャフォールディングページが一括削除されたため、チュートリアルで用意されているページが表示できなくなった。

Passportを使用したいのであれば、Vue.jsとReactの両方の導入をしないといけないのか?
Passportを使わずに、Vue.js抜きで、Reactで作ったアプリのページを表示させることに集中した方がいいのか?が分かりません。

解決したい事

簡単な、カスタマイズ、マルチ認証システムを React Redux ←→ Laravel間で統合実装する方法を教えていただきたいです。

発生している問題・エラーメッセージ

axios.jsでbaseURLに任意のURLを指定していて、React Routerでルーティング、Laravelのweb.phpでもルーティングしています。そこの画面表示だけでなくデータの結合方法が分からないです。

該当のソースコード

//axios.js

import axiosBase from 'axios'

const baseUrl = NODE_ENV === 'dev' ? 'http://cra-trip.dev' : ''

const axios = axiosBase.create({
  baseURL: baseUrl,
  headers: {
    'ContentType': 'application/json',
    'X-Requested-With': 'XMLHttpRequest'
  },
  responseType: 'json'
})

export default axios
//web.php(Laravel5.5)

<?php
use Illuminate\Http\Request;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/welcome', function () {
    return view('welcome');
});

Auth::routes();

Route::get('/home', 'HomeController@index')->name('home');

Route::get('/', function () {
    $query = http_build_query([
        'client_id' => '1',
        'redirect_uri' => 'http://cra-trip.dev/callback',
        'response_type' => 'code',
        'scope' => '*',
    ]);

    return redirect('http://cra-trip.dev/oauth/authorize?'.$query);
});

Route::get('/callback', function (Request $request) {
    $http = new GuzzleHttp\Client;

    $response = $http->post('http://cra-trip.dev/oauth/token', [
        'form_params' => [
            'grant_type' => 'authorization_code',
            'client_id' => '1',
            'client_secret' => 'DIEObJnz84zOkYsyLz1fDBmNPiywYLFNtQOlMeeN',
            'redirect_uri' => 'http://cra-trip.dev/callback',
            'code' => $request->code,
        ],
    ]);

    return json_decode((string) $response->getBody(), true);
});

Route::get('/api_test', function (Request $request) {
    $client = new GuzzleHttp\Client;
    $accessToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjhkZjc5NjQ4MTFiNWE5NjA4ODNhMGVmYTViNTg5YWNjMzEwNTM0ZGJmMGRmYjI4NDI2NWE0NTY1YjY4MjNkYjBlZDRkOTlkODg3YzJkMGE2In0.eyJhdWQiOiIxIiwianRpIjoiOGRmNzk2NDgxMWI1YTk2MDg4M2EwZWZhNWI1ODlhY2MzMTA1MzRkYmYwZGZiMjg0MjY1YTQ1NjViNjgyM2RiMGVkNGQ5OWQ4ODdjMmQwYTYiLCJpYXQiOjE1MTI5NTkwMDMsIm5iZiI6MTUxMjk1OTAwMywiZXhwIjoxNTQ0NDk1MDAzLCJzdWIiOiIxIiwic2NvcGVzIjpbXX0.6Ojx3cdSwAoinfj1ADo6iVoihB5dp6Mbm8--mq5zHdmyb5iY6RWWjofs4bmedxMuRj1r42YQ5PrrX9qmFfPh-xXiJyaHeBlPeeY8-f471DW02kjRc_lTjgd-_e443c2K1ou2G-brLUOG283oiBGS7EHBVT8_BLeIAxdb0_1xAr4BfihMRg51oD1GzOo4is3wuKhB_ozmOCtftg1cLA9i8fe-frDesVvaGNPdpDrimQ3GnB0Tnpe4r_1bGdKCpiRSIp25gAriAFnAaWYnLUleFG8TtSV-LPQoUIFzt3A4AOlU_myojMrezEuJ9Hr8GKSGT0sN2yvqGeL4XZExs0wWs7w-UaV56bALnNLkAzEzXl1Ue3o58UrqeheCxCGnoVRIxsxu3ls8iFKjCtwMn-uUCXVi1wNvE1qd24E6Cq4T8neUAjDeWREjph7seKxKTqUs4vgDDGzKYOc5nUfubm8Ec4lo07MgmDk67o-QkcabTjZyMD9mXA4_oe82C29qYpGFrGCHIbp3QBuZNzRZ-L0K0YEPDk8B8WEvCGeaRJ4FOlAUK-029RD6aXjIgHkS9y6y4MRhIrwPV2UpqlR_8JafXLZXU6Air-iaBBHFeDAqmgZwcIxiP_qS58Cnqr8ZK32GgY1d7jHaKGyPUKeJyBANNKQZZHhpbFVXplJSAfpLUgI";

    $response = $client->request('GET', 'http://cra-trip.dev/api/user', [
        'headers' => [
            'Accept' => 'application/json',
            'Authorization' => 'Bearer ' . $accessToken,
        ],
    ]);

    return json_decode((string)$response->getBody(), true);
});
//api.php(Laravel5.5)

<?php

use Illuminate\Http\Request;

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| is assigned the "api" middleware group. Enjoy building your API!
|
*/

Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});
//login.js(React)

import { connect } from 'react-redux'
import { Redirect } from 'react-router-dom'
import UserAction from 'actions/UserAction'

const Login = ({ user, doLogin }) => {
   const submitting = (e) => {
    e.preventDefault()
    let name = e.currentTarget.inputName.value
    let password = e.currentTarget.inputPassword.value
    doLogin(name, password)
  }

  return user ?
    <Redirect to="/" />
    : (
      <div className="Login container">
        <form className="form-signin" onSubmit={ e => submitting(e) }>
          <h2 className="form-signin-heading">Please sign in</h2>
          <label htmlFor="inputEmail" className="sr-only">Email address</label>
          <input type="text" id="inputName" name="inputName" className="form-control" placeholder="Your name" required="" autoFocus="" />
          <label htmlFor="inputPassword" className="sr-only">Password</label>
          <input type="password" id="inputPassword" name="inputPassword" className="form-control" placeholder="Password" required="" />
          <div className="checkbox">
            <label>
              <input type="checkbox" value="remember-me" /> Remember me
            </label>
          </div>
          <button className="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
        </form>
      </div>
    )
}

Login.propTypes = {
  user: PropTypes.object,
  doLogin: PropTypes.func.isRequired
}

function stateToProps(state) {
  return {
    user: state.user
  }
}

function dispatchToProps(dispatch) {
  return {
    doLogin: (name, password) => dispatch(UserAction.login(name, password))
  }
}

export default connect(stateToProps, dispatchToProps)(Login)
//フロントエンドのpackage.json一部抜粋
  "dependencies": {
    "axios": "^0.17.0",
    "bootstrap": "^3.3.7",
    "immutable": "^3.8.2",
    "jquery": "^3.2.1",
    "moment": "^2.19.1",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-redux": "^5.0.6",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0"
  },

試したこと

index.htmlとbundle.jsをバックエンドのweb.phpのルーティングで、/loginに持ってきたらReactのログインページは表示されたものの、ログインが出来ない状態だったので、一旦、Reactのページは表示されないように設定し、Laravel5.5のPassportの/register 、/login、/welcomeからログイン、アクセストークン発行などをしている状態。Laravelのstorage/framework/views以下に、ページのキャッシュがたまるので、それを削除しないと、たとえ、web.phpでルーティングから、Reactのページを外しても、延々とReactで作成したログインページが表示され続けるエラーが出ました。

補足情報(言語/FW/ツール等のバージョンなど)

Mac OS Sierra
vagrant
virtualbox
Laravel5.5
react 16.0.0
redux 3.7.2
axios 0.17.0

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

SPA型のWebアプリ+LaravelのAPI型認証で構築する場合は、以下の記事がVue.jsとPassportでなくjwt-authですがわかりやすいので一度こなした後にReact.js等に挑むと把握がしやすいかもしれません。
Laravel 5.4 と Vue.js 2.2 と JWTAuth で、ログインできる SPA アプリケーションのチュートリアル 1/4

ただjwt-authの最新版は、Wikiが更新されていないので以下のイシューを参考に導入設定などを調整をする必要があります。
Laravel 5.5 + Vue.js 2 + JWT Auth 1.0.0-rc.1

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/14 09:56

    ご回答ありがとうございます!
    承知しました。一度、参考記事をこなしてから実装に挑んでみようと思います。
    分かりにくい質問内容にも関わらずありがとうございます!

    キャンセル

  • 2017/12/14 14:28 編集

    案件でReact.jsを使うようになっていれは変更は難しいかと思いますが、LaravelではLaravel mixを使うとVue.js開発環境が簡単に導入できて、Vue.jsはドキュメントが充実しており日本語訳も活発に行われているので初期学習の敷居は低いかと思います。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.87%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • Laravel 5

    1604questions

    Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

  • React.js

    651questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

  • Redux

    88questions

  • トップ
  • Laravel 5に関する質問
  • 簡単な、カスタマイズ、マルチ認証システムを React Redux ←→ Laravel間で統合実装する方法を教えていただきたいです。