본문 바로가기
Oauth1. 개념과 용어정리 목차 Oauth 개념 각 개체들의 역할 개념 이해를 위한 용어 정리 (scope, contsent) 인가 작업 수행을 위한 5가지 grant 유형 #1 Oauth API(Open API)로 제공되는 인가(authorization) 를 위한 산업 표준의 프로토콜 서버 구성의 요소 > 즉 아키텍쳐라고 보면됨 어플리케이션이나 웹사이트들이 다른 웹사이트로부터 사적 데이터에 접근할 수 있도록 하는 인가의 흐름(flow/process)을 제공 고객 발자들의 사용 편의성에 집중 #2 Oauth 개념에서 각 개체들의 역할 - 사용자 (Resource owner) 어플리케이션이 사용자 계정의 일정 부분에 접근하도록 허락하는 개개의 사용자들. (휴먼...) 어플리케이션의 사용자 계정에 대한 접근권은 사용자가 수여한 인가의.. 2022. 3. 17.
Ajax4-5. Axios - 응답 스키마 목차 요청에 대한 응답 정보 응답 정보 확인 #1. 요청에 대한 응답 정보 { data: {}, status: 200, statusText: 'OK', headers: {}, config: {}, request: {} } data : 서버가 제공하는 응답 status : HPPT 응답 상태 코드 statusText : HTTP 상태 메시지 headers : HTTP 헤더 config : 요청을 위해 Axios가 제공하는 옵션 request : 응답으로 생성된 요청 / 브라우저에서 XMLHttpRequest / node js에서는마지막 ClientRequest 인스턴트 [참고] 모든 헤더 이름은 소문자, 객체의 속성에 접근하는 괄호표기법 ['']를 통해 접근 가능 response.headers['conte.. 2022. 3. 7.
Ajax4-4. Axios - config 기본값 설정 목차 전역 기본값 설정 커스텀 인스턴트 기본값 설정 #1. 전역 기본값 설정 방법 -모든 요청에 적용될 config 기본값 설정 1. 문법 axios.defaults.옵션명 = '' 2. 예시 axios.defaults.baseURL = 'https://api.example.com'; axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; #2. 커스텀 인스턴트 기본값 설정 1. 문법 (1) 인스턴스 생성 시 기본값 설정 const 변수명 = axios.create({ 옵션명 : 내용' }); (2) 인스.. 2022. 3. 7.
Ajax4-3. Axios - API 목차 axios()의 매개변수 인 config 옵션 설정 axios 인스턴스 생성 요청 config의 옵션 #1. axios객체 속성 및 메서드의 매개변수 기본적으로 명령어 메소드 사용 시에는 url, method, data 속성을 config에서 지정할 필요가 없다. 즉, 요청 메소드 명령어 사용 시 아래의 1~3의 방법중 하나로 url, method, data 속성 지정 가능하다. 1. 속성값으로 요청 메서드 작성 후 나머지는 config로 지정 axios.get(config) 또는 2. 속성값으로 요청메서드 작성, 첫번째 매개변수로 url, 나머지는 config로 지정 axios.post(url[,config]) 또는 3. 속성값으로 요청 메서드 작성, 첫번째 매개변수로 url, 나머지는 confi.. 2022. 3. 7.
Ajax2-2. 코드_로그인페이지 #4-2를 전부 읽어볼 시간이 없고, 코드만 확인하고 싶다면 이 글을 보면 된다! signin.html 아이디 : 비밀번호 : userController.js exports.signInPost = (req, res) => { const {userid, userpw} = req.body const param = [ userid, userpw ] try { pool.getConnection((err, conn) => { conn.query(SQL.signInPost, param, (error, result) => { if(result[0]!= undefined){ delete result[0].pw const item = result[0] const token = createToken(item) res.se.. 2022. 3. 7.
Ajax2-1. 기본_로그인 페이지 AJAX 통신으로 로그인 페이지 구현 사용자, 로그인페이지에서 아이디와 비밀번호 입력 후 제출 사용자가 입력한 데이터, 바로 백엔드 서버로 전달되는 것이 아니라 AJAX통신을 통하여 프론트에서 백엔드로 요청객체로 전달 프론트의 요청을 전달받은 백엔드는 연결되어 있는 DB의 정보와 비교하여 로그인 검증 백엔드, 로그인 검증 결과를 프론트에 응답 프론트, 응답받은 내용에 대한 처리를 사용자에게 제공 목차 백엔드 서버에 요청보내기 요청 바디에 내용 넣기 요청 헤더 조작 응답받고 응답에 대한 처리 작성해보기 1. 요청 보내기 1-1. XMLHttpRequest 메서드 사용 function ajax() { const xhr = new XMLHttpRequest() //1. 요청보내기 xhr.open('POST',.. 2022. 3. 7.
AJax1. 기본 개념 목차 Ajax란? HTTP 요청객체 생성 서버로 부터 받은 응답 처리 방법 #1. AJAX란? Asynchronous JavaScript and XML의 줄임말 즉, 서버와 통신하기 위해 자바스크립트의 특정함수 인 XMLHTTPRequest 객체를 사용한다는 뜻 AJAX는 JSON, XML, HTML, and text files를 포함한 다양한 형식으로 정보를 주고받을 수 있다 가장 두드러지는 특징은 '비동기' 통신이란 점. 즉 전체 브라우저 페이지를 새로고침할 필요 없이 서버와 통신하고, 데이터를 주고받으며 페이지를 업데이트 할 수 있다 Ajax는 어플리케이션을 좀 더 빠르고, 유저의 행동의 더 반응적이게 만들었다. 과거의 Ajax모델에서는 XML을 통하여 정보를 담았지만, 요즘에는 JSON을 주로 사.. 2022. 3. 4.
JWT3. 하드코딩으로 JWT 생성 및 사용(2) 목차 생성한 JWT 응답으로 내보내기 구조분해 할당 디코딩 진위 여부를 비교할 서명 생성 쿠키의 서명과, 디코딩한 서명 일치 확인 # 1. JWT 내보내기 생성한 JWT를 미들웨어를 통하여 응답 객체에 실어서 클라이언트에 내보내자 응답으로 헤더를 생성하는 setHeader 메서드를 사용 // Controller.js exports.main = (req,res)=>{ res.setHeader("Set-Cookie",token:jwt) } 자, 이렇게 쿠키 생성으로 클라이언트에 JWT를 내보냈다면, 클라이언트는 서버에게 매 요청 시마다 쿠키를 동봉하여 요청할 것이다. 그럼 이제 요청 객체와 함께 동봉된 JWT 토큰이 들어있는 쿠키를 사용해보자 #2. 구조분해 할당 const [ head,pay,sign ] .. 2022. 3. 3.
JWT3. 하드코딩으로 JWT 생성 및 사용(1) 목차 진수변환(인코딩) 해쉬값 생성 실습(헤더,페이로드 선언>인코딩>해쉬값부여>JWT생성) # 1. 진수 변환(인코딩) 1 -1 . 진수 변환 (1) 버퍼의 두번째 매개변수로 진수 넣기 -버퍼 : 컴퓨터가 데이터 저장 시 바이트(16진수) 형태로 저장하는 공간 Buffer.from(변환할 대상, `진수`) -매개변수 1 : 변환할 대상 변수인 경우 그대로 작성 스트링인 경우 일반 스트링 작성법과 동일하게 작성 객체인 경우 아래의 메서드를 매개변수 1자리에 넣어서 스트링으로 변환 JSON.stringify(스트링으로 변환할 객체) -매개변수 2 : 진수 기본적으로 디폴트 값이 UTF-8 64진수 변환 : `base64` (2)toString 메서드의 매개변수로 진수 넣기 Buffer.from(변환할 대상).. 2022. 3. 3.

티스토리툴바