Hapicode

# nuxtjs と codeigniter で jwt システム構築

laravel や lumen で api サーバー建てることが多く、今回バックエンドは codeigniter でやってみました。

構造

  • フロントエンド nuxt2.11
  • バックエンド codeigniter3.10

# codeigniter 側の設定

ユーザー認証でトークン発行して、その後トークンで認証とってデータやり取りする仕組み。バックとフロントが分離することで、サーバーサイドの仕事がシンプルになります。

# composer firebase php jwt 入れる

jwt 暗号化エンコードとデコード用に自前で作成することも一つの選択肢ですが、自前で作るより時間短縮できるし、バグ修正などの手間もなく、google 製で安心などのメリットがあって firebase のライブラリ使用

composer require firebase/php-jwt

使い方はシンプル

$jwt = JWT::encode($payload, $key);
$decoded = JWT::decode($jwt, $key, array('HS256'));

print_r($decoded);
参考:firebase/php-jwt (opens new window)

Config 設定変更

application/config/config.php

// composer autoload
$config['composer_autoload'] = APPPATH . '../vendor/autoload.php';

// jwt 用エンクリプトキー設定
$config['encryption_key'] = 'abc123';

# MY_Controller 作成

MY_Controller 作成してグローバル関数や設定します。

application/core/MY_Controller.php

<?php
class MY_Controller extends CI_Controller
{
    protected $post;

    public function __construct()
    {
        parent::__construct();

        // cors optionsリクエスト対策
        if ($this->input->method() == 'options') {
            return $this->json([]);
        }

        // json リクエスト array post 変換
        $this->post = $this->input->raw_input_stream ? json_decode($this->input->raw_input_stream) : null;

    }

    public function json(array $response, int $status = 200)
    {
        // json export
        $this->output
            ->set_status_header($status)
            ->set_header('Access-Control-Allow-Origin: http://localhost:3000')
            ->set_header('Access-Control-Allow-Headers: *')
            ->set_header('Access-Control-Request-Method: POST,GET')
            ->set_content_type('application/json', 'utf-8')
            ->set_output(json_encode($response, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES))
            ->_display();
        exit;
    }
}

Auth コントローラー

<?php
defined('BASEPATH') or exit('No direct script access allowed');
use \Firebase\JWT\JWT;

class Auth extends MY_Controller
{
    public function login()
    {

        if (!$this->post) {
            return $this->json(['result' => false]);
        }

        // テスト用トークン発行
        $token = JWT::encode($this->post, $this->config->item('encryption_key'));

        $response = ['result' => true, 'token' => $token];

        $this->json($response);
    }

    public function logout(){

    }

    public function user()
    {
        $token = $this->input->get_request_header('Authorization', true);

        // トークンでデータ返却
        $response = ["user" => ["username" => "asdf", "picture" => "https://github.com/nuxt.png", "level" => 2]];
        $this->json($response);
    }
}

# おまけ：codeigniter index.php 省略

index.php を省略するための htaccess 設定
public/.htaccess の設定

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /

    #Removes access to the system folder by users.
    #Additionally this will allow you to create a System.php controller,
    #previously this would not have been possible.
    #'system' can be replaced if you have renamed your system folder.
    RewriteCond %{REQUEST_URI} ^system.*
    RewriteRule ^(.*)$ /index.php?/$1 [L]

    #When your application folder isn't in the system folder
    #This snippet prevents user access to the application folder
    #Submitted by: Fabdrol
    #Rename 'application' to your applications folder name.
    RewriteCond %{REQUEST_URI} ^application.*
    RewriteRule ^(.*)$ /index.php?/$1 [L]

    #Checks to see if the user is attempting to access a valid file,
    #such as an image or css document, if this isn't true it sends the
    #request to index.php
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ index.php?/$1 [L]
</IfModule>

<IfModule !mod_rewrite.c>
    # If we don't have mod_rewrite installed, all 404's
    # can be sent to index.php, and everything works as normal.
    # Submitted by: ElliotHaughin

    ErrorDocument 404 /index.php
</IfModule>

codeigniter のいいところはシンプルでわかりやすい、作業効率が上がるし、面倒な設定がない、ちょっとしたすぐに実現したいシステムならぴったり

# Nuxtjs 側 auth module 設定

nuxt の公式モジュール Auth Module @nuxtjs/auth を使います。@nuxtjs/auth は非常によくできている認証系モジュールです。このモジュール一つで通常のユーザー認証と google 認証 github facebook などはあっという間にできてしまうので、Auth Module 公式サイト (opens new window)確認するだけで使えます。

サポートしているプロバイダー

  • Auth0
  • Facebook
  • Github
  • Google
  • Laravel Passport

# ログイン画面

ユーザー登録のタイミングで google ログイン github ログインなどしてもらって本登録するシステムなので、ログイン画面はローカル認証のみ

<template>
  <b-card class="my-login">
    <b-alert v-if="error" show variant="danger">{{ error + '' }}</b-alert>
    <b-form-group label="Email" label-for="loginID" label-class="text-left">
      <b-form-input id="loginID" v-model="email" type="email" class="bg-danger" required />
    </b-form-group>
    <b-form-group label="Password" label-for="loginPW" label-class="text-left">
      <b-form-input id="loginPW" v-model="password" type="password" required />
    </b-form-group>
    <b-button
      variant="warning"
      :class="['d-block w-100 mt-5',{'animated shake':error}]"
      @click.prevent="login"
    >ログイン</b-button>

    <!-- パスワードを忘れた場合 -->

    <div class="mt-3 small a-divider-break"></div>
    <div class="my-2 small">
      新しいお客様ですか？
      <n-link to="/register">アカウント作成</n-link>
    </div>
    <!-- <div class="my-2 small">
          <n-link to="/register">パスワードを忘れた場合</n-link>
    </div>-->
  </b-card>
</template>

<script>
export default {
  data() {
    return {
      email: null,
      password: null,
      error: null
    };
  },
  methods: {
    async login() {
      this.error = null;
      return this.$auth
        .loginWith("local", {
          data: {
            email: this.email,
            password: this.password
          }
        })
        .catch(e => {
          this.error = e + "";
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.my-login {
  max-width: 320px;
  width: 100%;
  position: fixed;
  left: 50%;
  transform: translate(-50%, -50%);
  bottom: 150px;
}
</style>

# nuxt.config.js 設定

  modules: [
    // Doc: https://bootstrap-vue.js.org
    "bootstrap-vue/nuxt",
    // Doc: https://axios.nuxtjs.org/usage
    "@nuxtjs/axios",
    "@nuxtjs/pwa",
    // Doc: https://github.com/nuxt-community/dotenv-module
    "@nuxtjs/dotenv",
    "@nuxtjs/auth"
  ],
  auth: {
    strategies: {
      local: {
        endpoints: {
          login: {
            url: process.env.API_URL + "/auth/login",
            method: "post",
            properryName: "token"
          },
          logout: {
            url: process.env.API_URL + "/auth/logout",
            method: "post"
          },
          user: {
            url: process.env.API_URL + "/auth/user",
            method: "get",
            propertyName: "user"
          }
        },
        tokenRequired: true,
        tokenName: "Authorization",
        tokenType: false, //Bearer
        sameSite: "None",
        Secure: true
      }
    }
  }

# auth module の使い方

自動的に auth という名前の middleware 作成されるので、該当ページに貼っておくと自動的リダイレクトしてくれます。
デフォルトの設定では、ログインページは/loginログイン後のリダイレクトページは/。トークン切れの場合自動的に/loginへリダイレクトされる仕組み。

ログインしたら返却されたデータは vuex store とクッキーに保存されます。

ログイン後使える vuex store $auth 情報

// Access using $auth
this.$auth.user;

// Access using vuex
this.$store.state.auth.user;

// Access using $auth
this.$auth.loggedIn;

// Access using vuex
this.$store.state.auth.loggedIn;

user はオブジェクト
loggedIn は boolean 型

複数のメソッド

loginWith(strategyName, ...args)

this.$auth
  .loginWith("local" /* .... */)
  .then(() => this.$toast.success("Logged In!"));

login(...args)

this.$auth.login(/* .... */).then(() => this.$toast.success("Logged In!"));

logout(...args)

await this.$auth.logout(/* .... */);

fetchUser()

await this.$auth.fetchUser();

hasScope(scopeName)

// Returns is a computed boolean
this.$auth.hasScope("admin");
2020-01-23
  • javascript
  • php

関連記事

Javascript 非同期処理 async と await のメモ

javascript async await 使って非同期処理のいろいろ...

Laravel メンテナンスモード

Laravelのメンテナンスモードの使い方 Artisan down コマンド使ってメンテナンスモー...

Laravel でカテゴリー作成 テーブル構築と再帰クエリ

カテゴリ関係を管理するためのテーブルを設計...

Laravel を API サーバーとしての初期設定

Laravel インストールからローカル環境のSail docker開発、初期設定までプロジェクト構...

Nuxt.js と Ant Design Vue 2 テーマカスタマイズ

Nuxt.jsとAnt Design Vue 2を使用してテーマカスタマイズしてみました。...

Laravel リクエストログ出力

Laravelでリクエストログを出力する手順をまとめました。...

JavaScript ライブラリ aos.js 使ってスクロール連動アニメーション

aos.js ライブラリ使ってHTML要素がスクロールと連動してアニメーションをします。...

Carbon で php date 日付の日数・月数差を計算

Laravel Carbonは、DateTimeクラスよりもシンプルで読みやすいコードを書くことがで...

Laravel 429 Too Many Requests

Laravel 19使ってAPIサーバー構築とフロントはReact nextjsで構築しています。複...

Laravel Email バリデーションについて

Laravel Validation Email チェックする際の注意点、バリデーションルールオプシ...

Laravel Sanctum 使って API トークン JWT 認証と SPA 認証

Laravel JWT APIトークンの仕組みと Laravel Sanctum SPA認証使って認...

Laravel logger でエラーログを chatwork に自動送信

Laravel 使ってエラー発生した場合、chatworkにエラー内容をリアルタイムで連絡するcha...

php CSV データ取得は fgetcsv 使う

PHP csvアップロードしてデータインポート作業がありましたが、fgetcsv使ってcsv処理につ...

Laravel tinker 使って DB データベース接続とコマンド

Laravel tinker REPLツール使ってDBアクセス、環境確認など対話式で楽しく遊べる...

Laravel Test についてのメモ

Laravel自動テスト行う際のコマンドと設定 faker 使ってデータ生成...

Laravel Log の基本設定＆使い方

Laravel Logの基本設定 エラー発生時にslackに連絡通知する設定方法 tailコマンド使...

Exception: Class 'ZipArchive' not found

エクセル操作でZipArchive classが見つからないエラーがあったので、対応しました。...

Cookie localStorage sessionStorage の違い

Cookie とWeb Storage localStorage sessionStorageの違い...

Laravel Sail で Docker 環境構築

Laravel Sail で Docker 開発環境PHP Mysql phpMyAdmin構築 s...

PHP 文字列長さ・文字列の幅を取得方法

PHP 文字列操作関数 マルチバイト文字列日本語韓国語中国語の長さ取得など...

Codeigniter 画像アップロードとリサイズ

Codeigniter アップロード画像リサイズと回転するなど画像操作するライブラリの使い方...

Laravel Lumen Faker 日本語設定

Laravel Faker 日本語化設定 fakerphpの使い方とよく使うオプション 名前や住所の...

大きいファイルをスライス分割してアップロード

大きいファイルを分割アップロードする方法、並行処理と失敗した際の自動アップロードします。...

Javascript DataTables で excel 風 table 作る

JQueryでエクセル風テーブルの一部だけ横スクロールできるようにDataTables使ってみました...

javascript 配列 重複排除

javascriptで配列重複排除の複数やり方をまとめ、よく使うfilterとEcmaScript ...

laravel method の基本 get post put options

Laravel Routeでget post メソッド同時に設定したい！Laravel ルート制約の...

bootstrap vuejs 使って generate する際に babel が icons ファイル max 500KB エラー
Laravel schedule 設定

Laravel スケジュール管理の基本とtimezone設定などlaravel 8最新メソッド説明...

Class 'Imagick' not found Error

phpで画像操作したらimagickエラーで動かなくなったため、imagickモジュールをインストを...

Laravel eloquent model の規約

最新Laravel開発eloquent model設定資料まとめ...

PHP mbconvertkana 全角半角英数カナ変換

php カナコンバートなら mb_convert_kana を使う！全角半角、英数字や記号など簡単に...

Codeigniter APPPATH BASEPATH FCPATH 各種パスと URL 取得

codeigniter host url取得方法と APPPATH BASEPATHの意味を紹介...

Laravel timestamp() auto update 有効化無効化

Laravel updated_at timestamp自動にしたい！MysqlはすぐにできるけどS...

Lumen8 で JWT ユーザー認証

Lumen8でJWT認証のAPIサーバー構築してみた、便利になった時代だなあ...

Laravel toSql パラメータ付きで出力

Laravel Query Builder toSqlで出力したsql文にパラメータを自動でセット...

Lumen8 で API 開発

codeigniter 愛用者がLumenでAPIサーバーを立ててみた...

php Exception エラーキャッチでメール送信

エラーメッセージ、エラーコード、エラー詳細取得、php例外処理exceptionのいろいろ...

Smarty HTTP URL 取得できるサーバー関数

スマーティで取得するサーバー関数URLとenvなど...

Laravel blade foreach loop と current url

laravel blade foreach loop変数とurlのプロパティ対照表...

laravel session を制する

laravel sesssion 使い方を紹介、読込保存削除を使えるようになったらsession制覇...

PHP empty isset is_null の違い

PHP empty, isset, is_nullの違い よく使うPHP isset と if の違...

PHP 8 リリース新機能と変更

php8がリリースされたので、新機能と特徴などの資料まとめました。25周年迎えたPHPは更に速いプロ...

FlattenException deprecated

laravelバージョンアップ作業する際にFlattenException deprecatedにつ...

php.ini 初期設定のいろいろ

php ini ローカル環境や新規リモート環境の初期設定...

Laravel 5.1 から 8.1 にバージョンアップ

laravel5 から8にアップグレードする際に遭遇したエラーとカスタマイズauth認証の設定を修正...

PHP 7.4 にアップグレードして使えなくなる機能

php 5 から php7.4 にアップする作業があったので、アップグレード時のエラーと7.4では動...

開発時によく使うゼロ埋めパディング作業まとめ

mysql twig phpとjavascriptでよく使うゼロ埋めのいろいろ...

解決！phpMyAdmin テーブル構造の内容が表示されない問題

phpmyadmin5.0.1のxampp入れたら テーブル構造メニューが真っ白になって表示されない...

Composer コマンドとオプション

composer install updateの違い post-install-cmdとpost-u...

爆速軽量フレームワーク codeigniter PHP 開発

ルーター設定もなく、初期設定も少ない！軽量と爆速で動いてくれるフレームワーク codeigniter...

Lumen と Laravel 違い比較

軽量で速いマイクロフレームワークlumenとlaravelの違い、使い方比較と本当にlumen必要か...

HTML から PDF に変換 PHP ライブラリ mPDF の設定

HTMLレンダリングしてPDFに変換出力するライブリmpdfを使いこなせるための設定いろいろ...

twig 3 人気 PHP テンプレートエンジンがバージョンアップ

以前からtwigテンプレートエンジン使っていて、非常にパワーフルで使いやすさに魅了しました。15日に...

javascript 日本語 shift-js 対応 CSV ダウンロード

javascript shift-jsエンコード CSVダウンロードが必要になったので、作ってみまし...

開発におけるコーディングルール・規約

コーディングルールと規約を大事にする、複数人で開発しても、一人で開発してもメンテナンスやコードのわか...

Laravel Error についてのメモ

laravelを使う時に出てくるエラー対応...

laravel に vuejs 使うための初期設定

PHPフレームワークlaravelにvuejs入れる時の初期設定まとめ、備忘録的...

php curl 使って クリックなしで POST 送信

PHP curl_setopt使ってシンプルにデータ転送してpost投げます。PHPは本当に短いソー...

allowurlinclude の設定で ftp_connect()エラー

FTPサーバーとやりとりする時にftp_connect()エラーが発生、PHP７にアップしたばかりで...

javascript 　指定場所にスムーズにスクロールする方法

クリックして指定のアンカーにスクロールするjavascript作成しました。scrollToとscr...

react 強制的にレンダリングする方法

React使って値は変更されるけど、画面描写されないトラブルの対応方法...

Jsconfig と Tsconfig

javascriptで開発する際に使うjsconfigとtsconfigのjsonファイルとはなにか...

Javascript var let const 変数宣言の違い

javascript varとlet 違い これからはvarよりlet constを書くようにすべき...

Javascript 電話番号フォーマット

固定電話 携帯電話 フリーダイヤルなどの電話番号をハイフォン入で自動フォーマットしてくれるjavas...

国際化 i18n と地域化 L10N

i18n が internationalization の略で国際化という意味で、地域化は L10n...

javascript 文字列と配列検索 indexOf findIndex find some includes 関数の違い

よく使う文字列と配列検索関数比較 javascript 文字列と配列検索 indexOf findI...

vuejs back to top button component 作成

vue でトップに戻るボタンを作ることがよくありますが、ライブラリー使わずに実現してみました。...

Nuxtjs 動的なルーティング静的ページ自動生成

Nuxtjs 動的なルーティング使ってAPIとJSONで静的ページ一括生成してSEO対策...

キーコード取得 ＆ キーコード一覧

javascriptで Tabキー 無効化をする仕事があり、キーコードの一覧を備忘録的にメモ...

Sweet Alert swal に複数 content

javascriptアラートを綺麗に表示する粋なライブラリSweetAlertのswalの中のcon...

moment.js 使って日本語曜日対応

momentjsの日本語表示、曜日の日本語表示と略称表示について...

javascript 開発で出会った TypeError

vuepress で Cannot read property 0 of undefinedのタイプ...

ReferenceError: location is not defined

ssrレンダリングする時に出る location is not defined エラー##...

vuejs で omisejapan の決済フォーム作成した時のメモ

フロント開発 omisejapan カードペイメント vuejs でフォーム開発する時のメモ...

ブラウザーで動く javascript のクッキー操作ライブラリ js-cookie

フロントのブラウザー側で動くjs cookieについて...

codeigniter email ライブラリでメール送信 日本語対応

codeigniterメール送信で日本語文字化け対策、改行コードとSMTP項目設定...

javascript reduce 連想配列の合計計算覚えよう

javascript 配列 sum 合計計算、reduce 使ってやってみて覚える連想配列の落とし穴...

nodejs 使う時のエラーたち

node学習しながらエラーの原因などを調べてメモります。...

javascript で作る html から PDF 変換 pdfmake の日本語対応

html pdf 変換する際に使っていたjavascriptライブラリpdfmakについて調べたこと...

javascript 楽しく遊ぼう!メッセージつぶやくウシ cowsay

楽しくjavascriptを遊ぶ用のパッケージcowsayについてのメモ...

Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ

電話番号チェック・メールアドレスチェック・文字チェック・郵便番号のチェックに使えるjavascrip...

正規表現一覧 よく使う検索・置換のパターン

よく使う正規表現、文字検索・置換をまとめてみました。...

javascript password generator ランダム文字列パスワード作成

javascriptで大文字・小文字・数字・記号対応のランダムパスワードつくることがありますが、vu...

Apache 初期設定メモ

LAMP環境のApache初期設定メモ...