Melaksanakan pengesahan dalam aplikasi sudut

mata utama

Melaksanakan pengesahan dalam aplikasi halaman tunggal (SPA) melibatkan pelayan yang mendedahkan titik akhir pengesahan yang mengesahkan kelayakan pengguna dan mengembalikan token akses. Token ini kemudiannya digunakan untuk semua permintaan API selamat yang dibuat ke pelayan.
Dalam sudut, token akses boleh disimpan dalam perkhidmatan atau dalam nilai kerana mereka adalah objek singleton pada pelanggan. Walau bagaimanapun, untuk mengelakkan kehilangan token apabila pengguna menyegarkan halaman tersebut, disyorkan untuk menggunakan mekanisme ketekunan pelayar (seperti sessionStorage) untuk menyimpan token.
Untuk mengelakkan kecurian data yang berpotensi, status pengguna harus dikekalkan dan disahkan pada sisi pelayan dan di sisi klien. Apabila pengguna log keluar, API yang sepadan harus dipanggil (token akses dimasukkan ke dalam header permintaan) dan data dalam sessionStorage juga harus dibersihkan.

Pengesahan dan kebenaran adalah bahagian penting dari hampir semua permohonan yang serius. Aplikasi halaman tunggal (SPA) tidak terkecuali. Permohonan tidak boleh mendedahkan semua data dan fungsinya kepada mana -mana pengguna. Pengguna mungkin perlu mengesahkan untuk melihat bahagian tertentu aplikasi, atau melakukan tindakan tertentu pada aplikasi. Untuk mengenal pasti pengguna dalam aplikasi, kita perlu log masuk.

Dalam aplikasi yang didorong oleh pelayan tradisional dan aplikasi satu halaman, pelaksanaan pengurusan pengguna adalah berbeza. Satu -satunya cara spa berinteraksi dengan komponen pelayannya adalah melalui Ajax. Ini benar walaupun untuk log masuk dan logout.

Pelayan yang bertanggungjawab untuk mengenal pasti pengguna mesti mendedahkan titik akhir pengesahan. Spa akan menghantar kelayakan yang dimasukkan ke pengguna ke titik akhir ini untuk pengesahan. Dalam sistem pengesahan berasaskan token yang tipikal, perkhidmatan boleh mengembalikan token akses atau objek yang mengandungi nama dan peranan pengguna log masuk selepas pengesahan kelayakan. Pelanggan mesti menggunakan token akses ini dalam semua permintaan API selamat yang dibuat ke pelayan.

Oleh kerana token akses akan digunakan beberapa kali, sebaiknya menyimpannya pada pelanggan. Dalam sudut, kita boleh menyimpan nilai dalam perkhidmatan atau nilai kerana mereka adalah objek singleton pada pelanggan. Walau bagaimanapun, jika pengguna menyegarkan halaman, nilai dalam perkhidmatan atau nilai akan hilang. Dalam kes ini, lebih baik menggunakan salah satu mekanisme ketekunan yang disediakan oleh penyemak imbas untuk menyimpan token;

mencapai login

mari kita lihat beberapa kod sekarang. Katakan kami telah melaksanakan semua logik sisi pelayan dan perkhidmatan mendedahkan titik akhir REST di /API /Login untuk memeriksa kelayakan log masuk dan mengembalikan token akses. Mari kita tulis perkhidmatan mudah yang melakukan operasi log masuk dengan mengakses titik akhir pengesahan. Kami akan menambah lebih banyak ciri untuk perkhidmatan ini kemudian:

app.factory("authenticationSvc", function($http, $q, $window) {
  var userInfo;

  function login(userName, password) {
    var deferred = $q.defer();

    $http.post("/api/login", {
      userName: userName,
      password: password
    }).then(function(result) {
      userInfo = {
        accessToken: result.data.access_token,
        userName: result.data.userName
      };
      $window.sessionStorage["userInfo"] = JSON.stringify(userInfo);
      deferred.resolve(userInfo);
    }, function(error) {
      deferred.reject(error);
    });

    return deferred.promise;
  }

  return {
    login: login
  };
});

Dalam kod sebenar, anda mungkin mahu refactor pernyataan yang menyimpan data ke sessionStorage ke dalam perkhidmatan yang berasingan, kerana jika kita melakukan ini, perkhidmatan ini akan mengambil pelbagai tanggungjawab. Untuk memastikan demo mudah, saya menyimpannya dalam perkhidmatan yang sama. Perkhidmatan ini boleh digunakan oleh pengawal yang mengendalikan fungsi log masuk aplikasi.

Melindungi laluan

Kami mungkin mempunyai satu set laluan yang dilindungi dalam permohonan kami. Jika pengguna tidak log masuk dan cuba memasukkan salah satu laluan ini, pengguna harus diarahkan ke halaman log masuk. Ini boleh dilakukan menggunakan blok penyelesaian dalam pilihan penghalaan. Coretan kod berikut menggambarkan pelaksanaan:

$routeProvider.when("/", {
  templateUrl: "templates/home.html",
  controller: "HomeController",
  resolve: {
    auth: ["$q", "authenticationSvc", function($q, authenticationSvc) {
      var userInfo = authenticationSvc.getUserInfo();

      if (userInfo) {
        return $q.when(userInfo);
      } else {
        return $q.reject({ authenticated: false });
      }
    }]
  }
});

Blok penyelesaian

boleh mengandungi pelbagai blok pernyataan yang mesti mengembalikan objek janji setelah selesai. Hanya untuk menjelaskan, nama yang ditakrifkan di atas tidak ditakrifkan oleh rangka kerja; Anda boleh menukar nama ke mana -mana nama berdasarkan kes penggunaan.

Terdapat beberapa sebab yang boleh menyebabkan penghalaan diluluskan atau ditolak. Bergantung pada senario, anda boleh lulus objek apabila parsing/menolak janji. Kami belum melaksanakan kaedah getLoggedInuser () dalam perkhidmatan. Ini adalah cara mudah untuk mengembalikan objek loggedinuser dari perkhidmatan.

app.factory("authenticationSvc", function() {
  var userInfo;

  function getUserInfo() {
    return userInfo;
  }
});

Objek yang dihantar oleh janji dalam coretan kod di atas disiarkan melalui $ ROOTSCOPE. Sekiranya laluan telah diselesaikan, acara $ RouteChangeSuccess disiarkan. Walau bagaimanapun, jika penghalaan gagal, acara $ RouteChangeError disiarkan. Kami boleh mendengar acara $ RouteChangeError dan mengalihkan pengguna ke halaman log masuk. Oleh kerana peristiwa berada di tahap $ Rootscope, lebih baik untuk melampirkan pengendali acara di blok larian.

app.run(["$rootScope", "$location", function($rootScope, $location) {
  $rootScope.$on("$routeChangeSuccess", function(userInfo) {
    console.log(userInfo);
  });

  $rootScope.$on("$routeChangeError", function(event, current, previous, eventObj) {
    if (eventObj.authenticated === false) {
      $location.path("/login");
    }
  });
}]);

Memproses halaman Refresh

Apabila pengguna mengklik pada butang penyegaran halaman, perkhidmatan kehilangan statusnya. Kami perlu mendapatkan data dari sessionStorage penyemak imbas dan menyerahkannya kepada pembolehubah pembolehubah. Oleh kerana kilang dipanggil hanya sekali, kita boleh menetapkan pembolehubah ini dalam fungsi permulaan seperti yang ditunjukkan di bawah.

function init() {
  if ($window.sessionStorage["userInfo"]) {
    userInfo = JSON.parse($window.sessionStorage["userInfo"]);
  }
}

init();

Batal

Apabila pengguna log keluar dari aplikasi, API yang sepadan mesti dipanggil dan token akses dimasukkan ke dalam tajuk permintaan. Selepas pengguna log keluar, kami juga harus membersihkan data dalam sessionStorage. Contoh berikut mengandungi fungsi logout yang mesti ditambah kepada perkhidmatan pengesahan.

function logout() {
  var deferred = $q.defer();

  $http({
    method: "POST",
    url: logoutUrl,
    headers: {
      "access_token": userInfo.accessToken
    }
  }).then(function(result) {
    $window.sessionStorage["userInfo"] = null;
    userInfo = null;
    deferred.resolve(result);
  }, function(error) {
    deferred.reject(error);
  });

  return deferred.promise;
}

Kesimpulan

Kaedah pelaksanaan pengesahan dalam satu aplikasi halaman sangat berbeza daripada aplikasi web tradisional. Oleh kerana kebanyakan kerja dilakukan pada pelanggan, status pengguna juga harus disimpan di suatu tempat pada klien. Adalah penting untuk diingat bahawa Negeri juga mesti dikekalkan dan disahkan di sisi pelayan, kerana penggodam boleh mencuri data yang disimpan pada sistem klien.

Kod sumber dalam artikel ini boleh dimuat turun di GitHub.

Soalan Lazim untuk Melaksanakan Pengesahan dalam Aplikasi Angular

Bagaimana menggunakan harta dengan Sudut?

Hartanah dengan

dengan menggunakan cookies pengesahan dalam permintaan HTTP. Dalam sudut, anda boleh menggunakannya dalam modul httpclient. Apabila membuat permintaan, anda boleh menetapkan harta dengan benar. Berikut adalah contoh:

this.http.get(url, { withCredentials: true }).subscribe(...);

Ini akan mengandungi sebarang kuki yang mungkin telah dihantar sebelum pelayan.

Apakah tujuan httpinterceptor dalam sudut?

HttpInterceptor adalah ciri dalam Angular yang membolehkan anda memintas secara global dan mengubah suai permintaan HTTP sebelum menghantarnya ke pelayan. Ia sangat berguna untuk pelbagai tugas, seperti menambah token pengesahan kepada semua permintaan atau mengendalikan kesilapan global.

Bagaimana untuk membuat httpinterceptor tersuai untuk mengendalikan dengan kredensi?

Untuk membuat httpinterceptor tersuai, anda perlu membuat perkhidmatan yang melaksanakan antara muka httpinterceptor. Berikut adalah contoh:

app.factory("authenticationSvc", function($http, $q, $window) {
  var userInfo;

  function login(userName, password) {
    var deferred = $q.defer();

    $http.post("/api/login", {
      userName: userName,
      password: password
    }).then(function(result) {
      userInfo = {
        accessToken: result.data.access_token,
        userName: result.data.userName
      };
      $window.sessionStorage["userInfo"] = JSON.stringify(userInfo);
      deferred.resolve(userInfo);
    }, function(error) {
      deferred.reject(error);
    });

    return deferred.promise;
  }

  return {
    login: login
  };
});

Pemintas ini mengklon setiap permintaan dan menetapkan harta dengan benar.

Kenapa anda menerima ralat CORS semasa menggunakan dengan pemalsuan?

CORS (Perkongsian Sumber Sumber Asas) adalah ciri keselamatan yang membatasi cara sumber dikongsi di seluruh domain. Jika anda menerima ralat CORS, pelayan tidak dikonfigurasi untuk menerima permintaan dari domain anda. Untuk menyelesaikannya, anda perlu mengkonfigurasi pelayan untuk memasukkan domain anda dalam header "Access-Control-Allow-Origin" dan menetapkan "akses kawalan-alow-credentials" kepada benar.

Bagaimana menggunakan harta XMLHTTPREQUEST WithCredentials?

XMLHTTPREQUEST WithCredentials Property berfungsi sama dengan HttpClient WithCredentials Sudut. Ia digunakan untuk memasukkan kuki dalam permintaan. Berikut adalah contoh:

$routeProvider.when("/", {
  templateUrl: "templates/home.html",
  controller: "HomeController",
  resolve: {
    auth: ["$q", "authenticationSvc", function($q, authenticationSvc) {
      var userInfo = authenticationSvc.getUserInfo();

      if (userInfo) {
        return $q.when(userInfo);
      } else {
        return $q.reject({ authenticated: false });
      }
    }]
  }
});

Ini akan menghantar permintaan GET yang mengandungi kuki ke URL yang ditentukan.

Baki Soalan Lazim berkaitan dengan penggunaan HttpClientModule dan tidak ada kaitan dengan topik teras artikel (pelaksanaan pengesahan dalam sudut), sehingga mereka ditinggalkan di sini. Soalan -soalan ini boleh didapati dengan mudah melalui enjin carian.

Atas ialah kandungan terperinci Melaksanakan pengesahan dalam aplikasi sudut. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!