Can I use a php variable in an Angular if statement?

Question

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?

Answer 1

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.");
}