0

I am not sure if this is best practice or not, but I am just trying to create a simple login system just for me on a website that I have. I don't want to use a database to store one password, and I'm using Angular across the site. I don't want the password to be in plain text in the javascript for anyone to see.

One solution that I thought of was doing something like this:

  $scope.loginValue = false;
  $scope.loginFunction = function(password){
    if(password == <?php echo 'test123' ?>){
      $scope.loginValue = true;
    }
  }

Does anyone know how I might be able to accomplish this? Right now I get an error because JavaScript doesn't like the '<' character in my if statement. Again, I don't want the password to be visible in the javascript, but I'm not using and databases or API calls. I'm up for suggestions as well. :)

Other thoughts I had, were using a hash, which I've never done before....yeah, I'm open to ideas. :)

Thank you all in advance.

**********************UPDATE BELOW**********************

So, I ended up going with the answer that @musicfuel suggested. I am now trying to get this to work. As suggested, my login.php file has the following:

<? echo $_POST['password'] == 'test123' ? true : false ?>

The password is $scope.password coming from user input. When they submit their credentials it calls this function

$scope.loginFunction = function(){
    loginService.getLogin().then(function(response){
      console.log(response);
    }, function(error){
      $rootScope.loggedIn = false;
    });
};

And here is the loginService:

myApp.controller('myController', ['$scope', '$rootScope', 'loginService', function myController($scope, $rootScope, loginService) {

.service('loginService', ['$http', '$q', '$rootScope', function($http, $q, $rootScope){
    var getLogin = function() {
      $http.post('login.php'), {
          password: $scope.password
      }, function (success) {
          console.log("Login result: " + success);
      }, function (error) {
          console.log("Couldn't complete the login request.");
      } 
    }
  }])
}]);

When this function runs, I get the following error:TypeError: loginService.getLogin is not a function Do you know why it can't find it?

Jaromjj
  • 326
  • 3
  • 17
  • *"I don't want the password to be visible in the javascript, but I'm not using and databases or API calls"* You have to make an API call or compute the value somehow if you don't want it to appear in the JS source. Even if you managed to get `` working, it would simply put that value into the JS source sent to the browser. – Felix Kling Apr 25 '16 at 16:54
  • I think you should read http://stackoverflow.com/q/13840429/218196 to get a better understand of how client side JS and server side PHP work together. – Felix Kling Apr 25 '16 at 16:58
  • Thanks @Felix Kling. Decided to make a simple login.php file. Thanks for the help! – Jaromjj Apr 25 '16 at 18:27

2 Answers2

0

You'd have to generate syntactically valid javascript, which means your code is generating a syntax error. e.g. once php has finished processing the page, you'd end up with

 if (password == test123) {

and test123 is EXTREMELY likely to be an undefined/unknown variable.

Basic rule of thumb: Never EVER directly dump text from PHP into a javascript context. Always use json_encode:

if (password == <?php echo json_encode('test123'); ?>) {

which produces:

if (password = 'test123') {
               ^-------^---note these quotes.
Marc B
  • 356,200
  • 43
  • 426
  • 500
  • Doesn't solve the *"I don't want the password to be visible in the javascript,"* problem. Also I think the root issue in this case is that the JS is not passed through PHP. – Felix Kling Apr 25 '16 at 16:55
  • indeed. but at least the javascript will work, instead of dying with a syntax error. – Marc B Apr 25 '16 at 16:56
  • Thanks for the quick comments. So is it even possible to pull a variable or string from php and use for password validation in javascript without being able to see it's value in the script or when debugging? – Jaromjj Apr 25 '16 at 17:04
  • if that JS is executed on the client, then the password is visible to the client, because the code is in their browser. – Marc B Apr 25 '16 at 17:07
0

The reason for the error is that your *.js files are likely not processed by PHP and are served statically. Your solution to hard-coding the value and checking directly in JavaScript is flawed in that JavaScript will always be visible in plain text. You can obfuscate it and do some trickery, but all code to manage that will also be visible and be reverse engineered.

You really should look to creating a PHP endpoint and passing the value entered to that, then handle the response. For example, you could create a simple login.php file that only checks a single value in the GET or POST against test123, then returns the string true or false in the body. This is a simple solution, but would prevent clear text access and could be easily extended to eventually support database access.

Let's say the variable you are sending is password and it is sent via POST. Your login.php could be:

<? echo $_POST['password'] == 'test123' ? true : false ?>

On the Angular side, you would leverage the $http service to send the variable and handle the response:

$http.post('login.php', {
    password: $scope.password // Assuming you use ng-model for text entry binding
}, function (success) {
    console.log("Login result: " + success);
}, function (error) {
    console.log("Couldn't complete the login request.");
}
musicfuel
  • 1,532
  • 10
  • 7