각도 응용 프로그램에서 인증 구현-JS 튜토리얼-php.cn

Implementing Authentication in Angular Applications

키 포인트

단일 페이지 애플리케이션 (SPA)에서 인증 구현에는 서버가 사용자 자격 증명을 검증하고 액세스 토큰을 반환하는 인증 엔드 포인트를 드러내는 것이 포함됩니다. 그런 다음이 토큰은 서버에 대한 모든 보안 API 요청에 사용됩니다. 각도에서 액세스 토큰은 클라이언트의 싱글 톤 객체이기 때문에 서비스 또는 값에 저장 될 수 있습니다. 그러나 사용자가 페이지를 새로 고칠 때 토큰 손실을 방지하기 위해 브라우저 지속 메커니즘 (예 : SessionStorage)을 사용하여 토큰을 저장하는 것이 좋습니다.

잠재적 데이터 도난을 방지하려면 서버 측과 클라이언트 측에서 사용자의 상태를 유지하고 확인해야합니다. 사용자가 로그 아웃하면 해당 API를 호출해야하며 (액세스 토큰이 요청 헤더에 포함되어 있음) SessionStorage의 데이터도 지워야합니다.

인증 및 승인은 거의 모든 심각한 응용 프로그램의 중요한 부분입니다. 단일 페이지 응용 프로그램 (SPA)도 예외는 아닙니다. 응용 프로그램은 모든 데이터와 기능을 사용자에게 노출시킬 수 없습니다. 사용자는 응용 프로그램의 특정 부분을 보거나 응용 프로그램에서 특정 작업을 수행하려면 인증해야 할 수도 있습니다. 응용 프로그램에서 사용자를 식별하려면 로그인해야합니다.
사용자를 식별하는 서버는 인증 엔드 포인트를 노출해야합니다. 스파는 검증을 위해 사용자 입력 자격 증명을이 엔드 포인트로 보냅니다. 일반적인 토큰 기반 인증 시스템에서 서비스는 자격 증명을 확인한 후 액세스 토큰 또는 로그인 사용자의 이름 및 역할을 포함하는 객체를 반환 할 수 있습니다. 클라이언트는 서버에 대한 모든 보안 API 요청 에서이 액세스 토큰을 사용해야합니다.

액세스 토큰은 여러 번 사용되므로 클라이언트에 저장하는 것이 가장 좋습니다. Angular에서는 고객의 싱글 톤 객체이기 때문에 값을 서비스 또는 값으로 저장할 수 있습니다. 그러나 사용자가 페이지를 새로 고침하면 서비스 또는 값의 값이 손실됩니다. 이 경우 브라우저가 제공 한 지속 메커니즘 중 하나를 사용하여 토큰을 저장하는 것이 가장 좋습니다.

로그인을 달성하십시오

지금 몇 가지 코드를 봅시다. 모든 서버 측로 로직을 구현했으며 서비스가 로그인 자격 증명을 확인하고 액세스 토큰을 반환하기 위해 /API /로그인에서 REST 엔드 포인트를 노출한다고 가정합니다. 인증 엔드 포인트에 액세스하여 로그인 작업을 수행하는 간단한 서비스를 작성해 봅시다. 나중에이 서비스에 더 많은 기능을 추가 할 것입니다.

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

로그인 후 복사

<,> 실제 코드에서는 데이터를 SessionStorage에 별도의 서비스에 저장하는 진술을 리팩터링 할 수 있습니다.이 작업을 수행하면이 서비스가 여러 책임을 맡게되므로. 데모를 간단하게 유지하기 위해 동일한 서비스에 보관합니다. 이 서비스는 응용 프로그램 로그인 기능을 처리하는 컨트롤러에서 사용할 수 있습니다.

<🎜 🎜> <<> 경로 보호

우리는 응용 프로그램에 보호 된 경로 세트가있을 수 있습니다. 사용자가 로그인하지 않고 이러한 경로 중 하나를 입력하려는 경우 사용자는 로그인 페이지로 이동해야합니다. 라우팅 옵션에서 Resolve 블록을 사용하여 수행 할 수 있습니다. 다음 코드 스 니펫은 구현을 보여줍니다 <🎜 🎜> 해상도 블록에는 완료되면 약속 객체를 반환 해야하는 여러 문장 블록이 포함될 수 있습니다. 명확히하기 위해 위에서 정의한 이름은 프레임 워크에 의해 정의되지 않습니다. 유스 케이스에 따라 이름을 모든 이름으로 변경할 수 있습니다. 라우팅을 통과하거나 거부 할 수있는 몇 가지 이유가 있습니다. 시나리오에 따라 약속을 구문 분석/거부 할 때 객체를 전달할 수 있습니다. 서비스에서 getLoggedInuser () 메소드를 구현하지 않았습니다. 이것은 서비스에서 로그인 거대한 개체를 반환하는 쉬운 방법입니다.

위의 코드 스 니펫에서 Promise에 의해 보낸 객체는 $ rootscope를 통해 방송됩니다. 경로가 해결되면 이벤트 $ loutechangesuccess가 방송됩니다. 그러나 라우팅이 실패하면 이벤트 $ lourchangeerror가 방송됩니다. $ lourchangeerror 이벤트를 듣고 사용자를 로그인 페이지로 리디렉션 할 수 있습니다. 이벤트는 $ Rootscope 레벨이므로 런 블록에 이벤트 핸들러를 첨부하는 것이 가장 좋습니다.

$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 });
      }
    }]
  }
});

로그인 후 복사

<🎜 🎜> <<> 프로세싱 페이지 새로 고침

<🎜 🎜> 사용자가 페이지의 새로 고침 버튼을 클릭하면 서비스가 상태를 잃습니다. 브라우저의 세션 스토리지에서 데이터를 가져와 변수 로그인 user에 할당해야합니다. 공장은 한 번만 호출되므로 아래와 같이 초기화 함수 에서이 변수를 설정할 수 있습니다.

<<> 취소

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

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

로그인 후 복사

<🎜 🎜> 사용자가 응용 프로그램에서 로그 아웃하면 해당 API를 호출하고 액세스 토큰이 요청 헤더에 포함됩니다. 사용자가 로그 아웃하면 SessionStorage의 데이터도 지우십시오. 다음 예제에는 인증 서비스에 추가 해야하는 로그 아웃 기능이 포함되어 있습니다.

<🎜 🎜> <<> 결론

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

로그인 후 복사

단일 페이지 응용 프로그램에서 인증을 구현하는 방법은 기존 웹 응용 프로그램의 방법과는 매우 다릅니다. 대부분의 작업은 클라이언트에서 수행되므로 사용자의 상태는 클라이언트 어딘가에 저장되어야합니다. 해커는 클라이언트 시스템에 저장된 데이터를 훔칠 수 있으므로 상태를 서버 측에서 유지하고 확인해야한다는 점을 기억하는 것이 중요합니다. 이 기사의 소스 코드는 github에서 다운로드 할 수 있습니다. 각도 응용 분야에서 인증 구현에 대한 FAQ

angular에서 withedentials 속성을 사용하는 방법은 무엇입니까?

여기에는 서버 전에 전송 된 쿠키가 포함됩니다.

각도에서 Httpinterceptor의 목적은 무엇입니까?

httpinterceptor는 서버로 전송하기 전에 HTTP 요청을 전 세계적으로 가로 채고 수정할 수있는 각도의 기능입니다. 모든 요청에 인증 토큰을 추가하거나 글로벌 오류를 처리하는 등 다양한 작업에 매우 유용합니다. this.http.get(url, { withCredentials: true }).subscribe(...); 범죄 적으로 처리 할 맞춤형 httpinterceptor를 만드는 방법은 무엇입니까?

사용자 정의 httpinterceptor를 만들려면 httpinterceptor 인터페이스를 구현하는 서비스를 만들어야합니다. 예는 다음과 같습니다.

이 인터셉터는 각 요청을 클론하고 withCredentials 속성을 true로 설정합니다.

와 함께 사용할 때 왜 CORS 오류를 받습니까?