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
参照サイト:
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: {} }