Inviare richieste POST in AngularJS

Solo dopo mi sono accorto che le funzioni success e error sono deprecate in favore di then.

Il tutto è comunque funzionante, ma prima o poi riscrivo l'articolo per bene!

Oggi vediamo come inviare richieste POST usando AngularJS; sul server useremo PHP.

Facciamo però alcune considerazioni:

• invieremo e riceveremo dati in formato JSON
• faremo la codifica (e la decondifica ovviamente) dei dati in BASE64
• nel mio caso specifico siamo su una app (Ionic) e, quindi le richieste sono di tipo Cross-Domain-Origin; imposteremo gli header in PHP, ma non è obbligatorio se non siete in ambito Cross-Domain-Origin

A questo punto direi di cominciare.

Cominciamo con l'HTML (sempre relativo a Ionic):

<ion-view view-title="Login" hide-nav-bar="true">
    <ion-content>
        <div class="list">
            <label class="item item-input">
                <input type="text" name="username" ng-model="user.username" placeholder="Username">
            </label>
            <label class="item item-input">
                <input type="text" name="password" ng-model="user.password" placeholder="Password">
            </label>
            <div class="padding">
                <button type="button" class="button button-block button-royal" ng-click="login();">Login</button>
            </div>
        </div>
    </ion-content>
</ion-view>

Questo invece il controller:

        .controller('LoginCtrl', function ($scope, $http) {
            $scope.user = {
                username: '',
                password: ''
            }
            $scope.login = function () {
                $http.post("http://www.sito.com/login.php", {username: btoa($scope.user.username), password: btoa($scope.user.password)})
                        .success(function (data, status, headers, config) {
                            console.log(atob(data.username));
                        })
                        .error(function (data, status) {
                            console.log("ERRORE");
                        });
            }
        });

Come vedete, usiamo la funzione btoa su entrambi i parametri per codificarli in BASE64.

Nella funzione di callback success, raccogliamo la risposta, usando atob per la decodifica.

Come vedremo, anche il server ci manderà la risposta in BASE64.

Ovviamente non è strettamente necessario, ma è un livello di sicurezza in più.

A questo punto vediamo il PHP:

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');

$data = json_decode(file_get_contents("php://input"));
if (!empty($data)) {
    $username = base64_decode($data->username);
    $password = base64_decode($data->password);
    $res = array('username' => base64_encode($username), 'password' => base64_encode($password));
    echo json_encode($res);
}

Prima di tutto impostiamo due header per il Cross-Domain-Origin: non sono necessari se le richieste sono nello stesso dominio.

Sotto leggiamo la risposta:

• prima decodifichiamo i dati spediti
• poi creiamo un array per il JSON con i dati, codificandoli di nuovo
• sotto esponiamo i dati in formato JSON

Ovviamente, per il PHP, ho fatto un esempio banale; in un esempio più reale dovreste passare quei dati al db e controllare le credenziali, e poi spedire una risposta a seconda delle credenziali corrette.

Enjoy!