Firefox 中保存的密码发送空字段 [英] Saved password in Firefox send empty fields

问题描述

我在保存浏览器凭据时遇到问题.我第一次使用我的应用程序登录时，浏览器要求我保存字段，我按确定，但是当我第二次登录并且浏览器使用保存的凭据填写表单字段时，我按登录，浏览器发送一个没有参数的请求.

HTML

<script type="text/ng-template" id="登录"><form ng-submit="login()" class="login"><input type="text" ng-model="data.username" placeholder="username" value="username" class="form-control" popover="inserisci qui il tuo username" popover-trigger="focus"popover-placement="right"/><br><input id="pwd" type="password" ng-model="data.password" placeholder="password" value="password" class="form-control" popover="inserisci qua la tua password" popover-trigger="focus" popover-placement="right"/><br><input class="btn-primary btn-lg" type="submit" value="登录"></表单>

JS

modalController.controller('modalCtrl',function ($scope, $modal) {var 打开 = 函数 () {var modalInstance = $modal.open({templateUrl: '登录',控制器:this.loginCtrl，背景:'静态'});};打开();});var loginCtrl = function ($scope, $http, $modalInstance, $state) {$scope.data = {username: this.username, password: this.password};var 数据 = $scope.data;$scope.login = 函数 () {$http.post(server[0] + '/bbi-api/sauth/1', {name: data.username, password: data.password}).then(函数(){$state.go('home');$modalInstance.close();},功能(响应){警报(响应.状态)；});};};

奇怪的是，如果我重写凭据一切正常，但如果我简单地按下带有浏览器放置的凭据的按钮，应用程序会发送一个带有空白参数的帖子.

解决方案

问题是浏览器的自动填充没有触发正确的事件，因此 Angular 可以绑定到它.

一种解决方案是为您的输入触发更改事件，这是我从此处自定义的指令(http://victorblog.com/2014/01/12/fixing-autocomplete-autofill-on-angularjs-form-submit/):

咖啡脚本:

angular.module('app').directive 'formAutoFillFix', ->(范围，元素，属性)-># 修复 Chrome 错误:https://groups.google.com/forum/#!topic/angular/6NlucSskQjYelem.prop '方法', 'POST'# 修复 Angular 不知道自动填充输入的自动填充问题如果 attrs.ngSubmit设置超时 ->elem.unbind('submit').bind 'submit', (e) ->e.preventDefault()elem.find('input').triggerHandler('change')scope.$apply attrs.ngSubmit, 0

Javascript:

angular.module('app').directive('formAutoFillFix', function() {返回函数(范围，元素，属性){//修复 Chrome 错误:https://groups.google.com/forum/#!topic/angular/6NlucSskQjYelem.prop('方法', 'POST');//修复 Angular 不知道自动填充输入的自动填充问题如果(attrs.ngSubmit){设置超时(函数(){elem.unbind('submit').bind('submit', function(e) {e.preventDefault();elem.find('input').triggerHandler('change');scope.$apply(attrs.ngSubmit);});}, 0);}};});

该网站上发布的解决方案使用了 jQuery，而上述解决方案并不依赖它.

像使用任何其他指令一样使用它:

I have a problem with the browsers credentials saving. The first time that I login with my app, the browser ask me to save the fields, I press ok, but when I login the second time and the browser fullfill the form fields with the saved credentials, I press login, and the browser send a request without parameters.

HTML

<div ng-controller="modalCtrl">
    <script type="text/ng-template" id="login">
    <form ng-submit="login()" class="login">
        <input type="text" ng-model="data.username" placeholder="username" value="username" class="form-control" popover="inserisci qui il tuo username" popover-trigger="focus" popover-placement="right"/><br>
        <input id="pwd" type="password" ng-model="data.password" placeholder="password" value="password" class="form-control" popover="inserisci qua la tua password" popover-trigger="focus" popover-placement="right"/><br>
        <input class="btn-primary btn-lg" type="submit" value="Login">
        </form>
    </script>
</div>

JS

modalController.controller('modalCtrl',function ($scope, $modal) {
var open = function () {
    var modalInstance = $modal.open({
        templateUrl: 'login',
        controller:this.loginCtrl,
        backdrop:'static'
        });
};
open();

});
var loginCtrl = function ($scope, $http, $modalInstance, $state) {  
    $scope.data = {username: this.username, password: this.password};
    var data = $scope.data;
    $scope.login = function () {
    $http.post(server[0] + '/bbi-api/sauth/1', {name: data.username, password: data.password})
        .then(function () {
            $state.go('home');
            $modalInstance.close();

        },
        function (response) {
            alert(response.status);
        });
    };
};

The strange is that if I rewrite the credentials everything goes ok, but if I simply press the button with the credentials put by the browser, the app send a post with blank parameters.

解决方案

The problem is that the browsers' autofill is not triggering the correct event so that Angular can bind to it.

One solution is triggering a change event for your inputs, here is a directive I customized from here (http://victorblog.com/2014/01/12/fixing-autocomplete-autofill-on-angularjs-form-submit/):

Coffeescript:

angular.module('app')
  .directive 'formAutoFillFix', ->
    (scope, elem, attrs) ->
      # Fixes Chrome bug: https://groups.google.com/forum/#!topic/angular/6NlucSskQjY
      elem.prop 'method', 'POST'

      # Fix autofill issues where Angular doesn't know about autofilled inputs
      if attrs.ngSubmit
        setTimeout ->
          elem.unbind('submit').bind 'submit', (e) ->
            e.preventDefault()

            elem.find('input').triggerHandler('change')

            scope.$apply attrs.ngSubmit
        , 0

Javascript:

angular.module('app').directive('formAutoFillFix', function() {
  return function(scope, elem, attrs) {
    // Fixes Chrome bug: https://groups.google.com/forum/#!topic/angular/6NlucSskQjY
    elem.prop('method', 'POST');

    // Fix autofill issues where Angular doesn't know about autofilled inputs
    if(attrs.ngSubmit) {
      setTimeout(function() {
        elem.unbind('submit').bind('submit', function(e) {
          e.preventDefault();
          elem.find('input').triggerHandler('change');
          scope.$apply(attrs.ngSubmit);
        });
      }, 0);
    }
  };
});

The solution posted on that website uses jQuery, whereas the above solution does not rely on it.

Use it as you would any other directive:

<form role="form" ng-submit="login()" form-auto-fill-fix>

这篇关于Firefox 中保存的密码发送空字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！