読者です 読者をやめる 読者になる 読者になる

Djangoroidの奮闘記

python,django,angularJS1~三十路過ぎたプログラマーの奮闘記

AngularJS1 + Django REST Frameworkに再挑戦 その5 Login with Angular & Django Rest Framework

概要

AngularJS1 + Django REST Frameworkに再挑戦 その5 Login with Angular & Django Rest Framework

参考動画

Django + AngularJS | Coding For Entrepreneurs

Login with Angular & Django Rest Framework

  • Json Web TokenというDRFの仕組みを利用して、ログイン画面を作成する。

参照サイト:

Django で API のトークンベースの認証を JWT で行なう - Qiita

  • まず、src/static/js/login-detai.module.jsを作成する。
'use strict';

angular.module('loginDetail', []);
  • 次に, src/static/js/login-detail.component.jsを作成する。これは、他のangularのコードからコピペしてくる。
'use strict';

angular.module('loginDetail').
    component('loginDetail', {
        templateUrl: '/api/templates/login-detail.html',
        controller: function(Post, $location, $routeParams, $rootScope, $scope){

        }
})
  • さらに、login-detail.component.jsにコードを書いていく。
'use strict';

angular.module('loginDetail').
    component('loginDetail', {
        templateUrl: '/api/templates/login-detail.html',
        controller: function(Post, $location, $routeParams, $rootScope, $scope){
            var loginUrl = '/api/auth/token/' //http://127.0.0.1:8000/api/auth/token/にアクセスする。
            $scope.user = {

            } // scope.userで、userを指定する。
            $scope.doLogin = function(user){
                console.log(user)
            } // これでloginを実行する関数を作成する。
            // $http.post()

        }
})
  • ここで一旦テストをしたいので、home.htmlにlogin-detailのファイルを読み込ませる。
<script src='{% static "js/app/login-detail/login-detail.module.js" %}' ></script>
    <script src='{% static "js/app/login-detail/login-detail.component.js" %}' ></script>
  • さらに、app.module.jsに追記する。
'use strict';

angular.module('try', [
    // external
    'angularUtils.directives.dirPagination',
    'ngResource',
    'ngRoute',
    'ui.bootstrap',
    // internal
    'blogDetail',
    'blogList',
    'confirmClick',
    'loginDetail',
    'tryNav',
]);
  • app.config.jsにログイン画面のurlとtemplateを追記する。
  when("/login", {
                  template: "<login-detail></login-detail>"
              }).  
  • login-detail.component.jsで指定した、templateUrl: '/api/templates/login-detail.html',を作成する。
<div class='col-sm-6 col-sm-offset-3'>
    <form ng-submit='doLogin(user)'>
    <input type='text' ng-model='user.username' class='form-control'>
    <input type='password' ng-model='user.password' class='form-control'>
    <input type='submit' value='Login' class='btn btn-default' />
</form>
  • ここまで設定したら、http://127.0.0.1:8000/loginにアクセスすると、ログインフォームが表示されるようになる!

  • ng-model=userの値を、doLogin(user)のuserに代入して、doLoginのfunctionを実行することになると思われる。

  • userと、passwordを入れて送信ボタンを押すと、doLoginファンクションが起動して、console.logに、password: "****"username: "****"という形で、表示されることがわかる。

  • doLogin(user)functionに追記する。

...
$scope.doLogin = function(user){
                console.log(user)
                var requestAction = $http.post(loginUrl, user)
                // $http.post は、httpモジュールのpostメソッドで、loginUrlに、userデータを送付するという意味だと思われる。
                requestAction.success(function(r_data, r_status, r_headers, r_config){
                    console.log(r_data) //これは実はtokenをゲットできる!
                })
                // successだった場合の
                requestAction.error(function(e_data, e_status, e_headers, e_config){
                    console.log(e_data) //error
            }
...
  • これで、ログイン画面に戻って操作してみる。すると、user認証ができた場合には、consoleに、Object {token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkI…20ifQ.Quq-mALFfGd09JS9OuxcZqKukY6qniU1RGWoEgoYbmg"}という形で、トークンが表示されて、errorの場合は、表示されない!なるほど、これで認証してるのか!

  • doLogin functionにreqConfigという辞書型のリストを追記する。これはデータをusernameなどの情報をまとめて$http.postなどをするためだと思う。

            $scope.doLogin = function(user){
                console.log(user)

                var reqConfig = {
                    method: "POST",
                    url: loginUrl,
                    data: {
                        username: user.username,
                        password: user.password
                    },
                    headers: {}
                }
  • そして、var requestAction = $http(reqConfig)に修正する!

  • とりあえず、今回はここまでで、次回にcookieの設定やらを完了させるらしい。

  • データバインドと、DIがかなりの鍵だからそこはしっかり押さえておかないとな。