auth0을 사용한 쉬운 angularjs 인증

이 기사는 Auth0의 API 변경을 반영하도록 업데이트되었습니다 (11.05.2017). 단일 페이지 애플리케이션 (SPA) 보안은 어려울 수 있습니다. SPA는 종종 별도의 프론트 엔드 (예 : AngularJS)와 백엔드 데이터 API로 구성됩니다. 전통적인 세션 기반 인증은이 아키텍처에 상태를 API에 소개하고 휴식 원칙을 위반하고 모바일 앱 통합을 방해하기 때문에이 아키텍처에 부적합합니다. 이 접근법의 핵심 장점 :

무국적 부정증 인증 : JSON Web Tokens (JWT)는 안전하고 무국적자 인증을 활성화하고 모바일 백엔드와 완벽하게 통합됩니다. 단순화 된 사용자 관리 : auth0 소셜 로그인 및 다중 프로파일 지원을 포함하여 사용자 인증 관리를 단순화합니다. 간소화 된 통합 : Auth0의 라이브러리 및 AngularJS 모듈은 인증 프로세스, 토큰 처리 및 세션 관리 자동화 프로세스를 단순화합니다. 강화 된 보안 : JWTS는 보호 된 API 엔드 포인트에 액세스 할 때 로컬 스토리지에 안전하게 저장됩니다. 쉬운 소셜 로그인 통합 : 간단한 Auth0 대시 보드 토글로 인기있는 소셜 로그인을 활성화합니다. 보안 API 엔드 포인트 : JWT 유효성 검증이있는 Nodejs 서버는 API 엔드 포인트를 보호하여 인증 된 사용자 만 민감한 데이터에 액세스 할 수 있도록합니다.

JSON Web Tokens (JWTS) : 무국적 솔루션

JWT는 세션 기반 인증의 한계를 극복합니다. 이 개방형 표준은 AngularJS 프론트 엔드에서 백엔드 API에 대한 요청을 인증합니다. 결정적으로 JWT에는 사용자 지정 청구가있는 JSON 페이로드가 포함되어 있으며 변조 방지에 디지털로 서명했습니다.
• AngularJS 인증 구현 JWT는 AngularJS 인증에 이상적입니다. 보안 API 엔드 포인트는 사용자의 JWT를 로컬 스토리지에 저장하고 HTTP 요청의 승인 헤더에 포함하여 액세스합니다. 유효하지 않거나 누락 된 JWT는 액세스 거부를 초래합니다 기본 인증을 넘어서, 강력한 Angularjs 구현은 다음을 요구합니다 조건부 렌더링 : JWT 유효성을 기반으로 요소를 표시/숨기기 (로그인/로그 아웃 버튼) 경로 보호 : 인증되지 않은 사용자가 특정 경로에 액세스하는 것을 방지합니다 UI 업데이트 : 사용자 상태를 변경할 때 UI를 업데이트합니다 (JWT 만료, 로그 아웃).
이 튜토리얼은 보호 된 리소스 액세스를위한 Nodejs 서버를 포함하여 완전한 AngularJS 인증 구현을 보여줍니다. 사용자 데이터베이스 및 JWT 발행을 구축하는 대신 Auth0의 무료 계층 (최대 7,000 명의 활성 사용자)을 활용합니다. 소셜 로그인 통합도 표시됩니다 (이미지 : Auth0 대시 보드)
• auth0 설정
  auth0 계정 생성 :
  1. 도메인 이름을 선택하여 Auth0 계정에 가입하십시오 (예 : ). 이것은 나중에 변경할 수 없습니다. 기본 앱 구성 : auth0 대시 보드에서 클라이언트 섹션으로 이동하여 기본 앱에 액세스하십시오. 허용 원산지 yourcompany.auth0.com 및
  허용 콜백 URLS (예 :이 튜토리얼의 경우 )를 구성하십시오. API를 만듭니다. 응용 프로그램). 소셜 정체성 제공 업체 활성화 (선택 사항) : 연결에서 옵션을 토글하여 소셜 로그인 (예 : Google, Facebook)을 활성화 & gt; 소셜 섹션. 설치 및 구성 필요한 패키지 설치 (Github Repo를 포기한 경우 사용) : 를 사용하여 서버를 시작하십시오. auth0을 통합하려면 및 http://localhost:8080를 구성하십시오. 자리 표시 자 값을 Auth0 자격 증명으로 바꾸십시오 :
• 파일은 인증 후 해시를 구문 분석하는 파일을 처리합니다 (이미지 : AngularJS 로그인 페이지) (이미지 : AngularJS 로그인 상태) (이미지 : Angularjs 로그 아웃 상태) 홈페이지 생성 파일은 로그인/로그 아웃 버튼과 API 통화 버튼이있는 간단한 UI를 제공합니다. 파일은 : 를 사용하여 API 호출을 처리합니다
인증 서비스 ()
• 이 서비스는 로그인, 로그 아웃 및 인증 상태 관리를 처리합니다 nodejs 서버 생성 express, , 및 : 를 사용하여 Nodejs 서버를 만듭니다.
로 서버를 시작하십시오. AngularJS 앱은 이제 보호 된 API 엔드 포인트를 요청할 수 있습니다.

추가 고려 사항 및 faqs 이 기사는 추가 Auth0 기능 (SSO, 암호없는 로그인, MFA) 및 기타 지원되는 백엔드 및 모바일 SDK에 대한 섹션으로 끝납니다. 포괄적 인 FAQ 섹션은 소셜 로그인, 세션 관리, 노선 보안, 토큰 새로 고침, 오류 처리, 사용자 정의, 다중 인증 인증, 후크, 테스트 및 디버깅과 관련된 일반적인 질문을 다룹니다. 및 와 같은 자리 표시자를 실제 Auth0 값으로 바꾸는 것을 잊지 마십시오.

위 내용은 auth0을 사용한 쉬운 angularjs 인증의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!