ajaxとHMVCを使用してCodeigniter 2.0で認証を行う

こんにちは、Habrachitateli様。

少し前、私はサイトに認証ウィジェットを実装するタスクに直面しました。 アイデアは新しいものではなく、私は平凡なものとさえ言いますが、ひどくグーグルで検索したか、解決策が非常に明白であるため、それについて書くのは意味がありません。 いずれにせよ、初心者であっても問題が発生する可能性があるため、この記事を書くことにしました。



ですから、まず、これがどのように実装されているかを理解するには、CodeigniterのHMVC拡張機能に慣れる必要があります（詳しくない人のために）。 ここでできます 。



すべてを非常に明確にしようとするので、プロジェクトのファイル構造から始めます。







ご覧のとおり、ファイルシステム全体を指定したわけではありません。



承認フォームの出力をモジュール/ウィジェットに送信し、それによりHMVCを使用しますが、すべてのロジックをアプリケーション/コントローラーおよびアプリケーション/モデルに実装しました。 なぜこれをしたのですか？ 正直なところ、わかりません。 もちろん、これらすべてをモジュール/ウィジェットで実行できますが、私はそれを行うことにしました。 誰もあなたが自分のことをすることを気にしません。



それでは、ファイルシステムを見てみましょう



アプリケーション/コントローラー/ユーザー-承認および終了イベントのajax処理が発生するコントローラー。

application / model / userModel-ユーザーの存在を確認し、ユーザーデータを使用して目的の配列を生成するモデル。

アプリケーション/モジュール/ウィジェット/ログイン/コントローラー/ログイン-セッションデータの転送先のウィジェットコントローラー。

アプリケーション/モジュール/ウィジェット/ログイン/コントローラー/ userLogin-認証ウィジェットのビュー。

アプリケーション/ビュー/レイアウト/ヘッド、アプリケーション/ビュー/レイアウト/フッター-文書の先頭を含むヘッダー、およびフッター

application / views / header-認証ウィジェットが表示されるサイトのヘッダー。 これをすべて表示するコントローラーはありませんが、これは当たり前のことと思います。

js / custom / scripts-ajaxメソッドを呼び出すスクリプトファイル。

そしてもちろんjqueryライブラリ。



さて、それはすでに開始する時間です。 アプリケーション/モジュール/ウィジェット/ログイン/コントローラー/ログインにウィジェットを作成することから始めます

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class CustomWidgets extends MX_Controller { public function userLogin() { $this->load->view('userLogin'); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ウィジェットのビューを作成します。

 <form role="form" id="login-form" class="login-form"> <input type="text" name="login" placeholder=" "> <input type="password"name="pass" placeholder=" "> <button type="button" id="signIn"></button> </form>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、ヘッダービューに渡します。

 <div id="header" class="row"> <div class="col-xs-3" id="account"> <?=Modules::run('widgets/login/login/userLogin')?> </div> <div class="col-xs-9"> <!--  --> </div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

私のプロジェクトの例では、もちろんスタイリングの後、次のようになります：







それで、私たちの認可を書く時です。 もちろん、その前にあなた自身でそれを実装しました。



最初にユーザーコントローラーに移動し、2つの方法でプレハブを作成します。

 class User extends MX_Controller { public function __construct() { parent::__construct(); $this->load->model('userModel'); } public function ajax_login() { } public function ajax_logout() { } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

事前に、userModelモデルに空白を作成します。

 <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class TemplateModel extends CI_Model { //    public function __construct() { parent::__construct(); $this->load->database(); } //  public function check_user($log) { } public function user_login($login) { } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、フォームデータを送信する準備ができました。 やってみましょう！

 $(document).ready(function(){ // Ajax login $('#account').on('click', '#signIn', function(){ var params = $('#login-form').serialize(); console.log(params); //  ,       ,  .   . $.post('user/ajax_login', params, function(data){ if(data == 'denied') { //   ,    ,    alert('    '); } else { $('#login-form').remove(); $('#account').append(data); } }); }); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

データを送信しました。ajax_loginメソッドで処理しましょう。

  public function ajax_login() { $log['login'] = trim(strip_tags($_POST['login'])); $log['pass'] = sha1(md5($_POST['pass'])); $check = $this->TemplateModel->check_user($log); if($check) { $data['user_info'] = $this->TemplateModel->user_login($log['login']); $ses_data = array( 'login' => $data['user_info']['login'], ); $this->session->set_userdata($ses_data); } else { echo 'denied'; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

現時点ではダークスポットが残っていますが、今はそれらを分散します。 モデルに入り、check_userメソッドを作成して、$ log配列を渡します。

  public function check_user($log) { $this->db->where('login', $log['login']); $this->db->where('password', $log['pass']); $query = $this->db->get('user'); if($query->num_rows > 0) { return TRUE; } else { return FALSE; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このメソッドでは、そのようなフィールドが存在するかどうかを確認し、その数が0より大きい場合はTRUEを返します。



次に、user_loginメソッドの操作を$ data ['user_info']配列に戻し、そこに$ log ['login']配列を転送します

  public function user_login($login) { $this->db->where('login', $login); $query = $this->db->get('energy_user'); return $query->row_array(); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして最後に、必要な値をセッションに書き込みます。 そして、行の後：

 $this->session->set_userdata($ses_data);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

マジックラインを挿入します。これにより、必要な結果が得られます。

 redirect(base_url().'widgets/login/login/userLogin');
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでは、実際には、ほとんどすべてのものが、セッション値をウィジェットコントローラーに転送するためにのみ残っています。

 <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); class CustomWidgets extends MX_Controller { public function userLogin() { $data['user_info'] = $this->session->userdata('login'); $this->load->view('userLogin',$data); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これですべてが機能しました！ ほぼ利益。 同様のログアウトを行うことが残っています。 次に、コードの2つのセクションを提供します。 あなたはあなた自身がそれらをどこに挿入するかを理解すると思います。



ただし、その前に、ウィジェットの外観をわずかに変更する必要があります。

 <?if(!empty($user_info)):?> <div id="userWidget"> <span>, <?=$user_info?></span><br> <a href="">   </a> <button type="button" href="<?=base_url()?>user/logout" id="logout"></button> </div> <?else:?> <form role="form" id="login-form" class="login-form"> <input type="text" name="login" placeholder=" "> <input type="password"name="pass" placeholder=" "> <button type="button" id="signIn"></button> </form> <?endif;?>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、ここにコードの2つの約束されたセクションがあります：

 public function ajax_logout() { $logout = $_POST['logout']; if($logout) { $this->session->unset_userdata('login'); redirect(base_url().'widgets/login/login/userLogin'); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 $('#account').on('click', '#logout', function(){ $.post('user/logout', {logout : true}, function(data){ $('#userWidget').remove(); $('#account').append(data); }); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

一般に、これが私が話したかったことのすべてです。 もちろん、たとえば、自分の個人アカウントにいる、誤って、またはウィジェットの終了ボタンを特別に押してしまった場合など、多くのことを完了することができます。



専門家の批判を聞いてうれしいです。