Password generator AngularJS

No Comments

Nuestros sistemas a menudo necesitan un generador de contraseñas automático, en la red encontré un script que hace esta función (el link es: http://angularscript.com/strong-password-generator-with-pure-angularjs/), es muy funcional, pero podemos mejorarlo sólo en la manera en que se utiliza dentro de nuestra aplicación AngularJS.

La forma en que podemos optimizarlo es crear un modulo a partir de la idea del script original, esto nos permitirá poder utilizarlo en cualquiera de nuestros proyectos con solo agregar la dependencia e inyectarla en nuestros controlladores, servicios, etc…

/**
 * Password Generator
 * Original Code: http://angularscript.com/strong-password-generator-with-pure-angularjs/
 * @author rsalvador
 * @email rsalvador@wat.mx
 */

angular.module('RDash')
	.factory('$password', [function() {
		return {
			passwordLength: 12,
			addUpper: true,
			addNumbers: true,
			addSymbols: true,
			lowerCharacters: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'],
			upperCharacters: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
			numbers: ['0','1','2','3','4','5','6','7','8','9'],
			symbols: ['!', '#', '$', '%', '&', '(', ')', '*', '+', ',', '-', '.', '/', ':', ';', '<', '=', '>', '?', '@', '[', '\', ']', '_', '{', '|', '}'],
			finalCharacters: [],
			password: '',
			createPassword: function(upper, numbers, symbolsOn, pLength) {

				upper |= this.addUpper;
				numbers |= this.addNumbers;
				symbolsOn |= this.addSymbols;
				pLength |= this.passwordLength;

				this.finalCharacters = this.lowerCharacters;
				if (this.addUpper && upper)
					this.finalCharacters = this.finalCharacters.concat(this.upperCharacters);
				if (this.addNumbers && numbers)
					this.finalCharacters = this.finalCharacters.concat(this.numbers);
				if (this.addSymbols && symbolsOn)
					this.finalCharacters = this.finalCharacters.concat(this.symbols);
				var passwordArray = [];
				for (var i = 1; i < pLength; i++)
					passwordArray.push(this.finalCharacters[Math.floor(Math.random() * this.finalCharacters.length)]);
				this.password = passwordArray.join("");
				return this.password;
			}
		}
	}]);

La manera en que se implementa la llamada en un código por poner un ejemplo y suponiendo que tengamos un formulario con los campos username y password, y que agreguemos un botón que se encargue de generar la nueva contraseña y asignarla al campo referente a password como se puede apreciar a continuación:

angular.module('app')
	.controller('UserCtrl', [
		'$scope',
		'$password',
		function ($scope, $password) {

			$scope.model = {
				username: '',
				password: ''
			}

			$scope.generatePassword = function() {
				$scope.model.password = $password.createPassword(true, true, true, 15);
			}

		}])

Nota: he eliminado algunos símbolos que a mi parecer son difíciles de encontrar para el usuario promedio. Recordar que siempre se debe de pensar en el usuario final.

This is author biographical info, that can be used to tell more about you, your iterests, background and experience. You can change it on Admin > Users > Your Profile > Biographical Info page."

About us and this blog

We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

Request a free quote

We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

Subscribe to our newsletter!

More from our blog

See all posts