본문 바로가기

분류 전체보기24

웹 기반 통합 인증 (SSO) 구현 통합 인증 (SSO) 구현최근 여러 자사 서비스들을 개발하면서 전체 서비스들에 대한 통합 로그인 솔루션이 필요하게 되었습니다.통합 인증(SSO) 서비스 개발을 진행하면서 얻은 지식들을 정리하고 공유해보려고 합니다. SSO란?먼저 SSO(Single Sign-On)은 1회 사용자 인증으로 다수의 서비스에 로그인을 허용하는 통합 로그인(인증) 솔루션입니다.SSO는 여러 서비스들이 독립적으로 동작하지만 같은 회사에서 제공하는 서비스일 때 유용합니다. 기존 방식SSO를 사용하지 않고 기존 방식대로 세개의 서비스에 로그인 로직을 따로 구현할 때의 문제점은 다음과 같습니다.사용자: 세 쌍을 기억해야 합니다.서비스 개발자: 로그인 화면 세 개, 데이터 베이스 세 개, 로그인 프로세스 세 개를 각각 구현 해야 합니다.. 2024. 10. 11.
세션 기반 로그인 vs 토큰 기반 로그인 세션 기반 로그인 vs 토큰 기반 로그인유효한 사용자만 시스템 자원에 접근할 수 있도록 하는것을 접근 제어라고 합니다. 세션과 토큰에 관해 알아보기 전에 접근 제어의 개념에 대해 짚고 넘어가도록 하겠습니다. 인증과 인가접근 제어는 인증(Authentication)과 인가 (Authorization)라는 두가지의 개념을 포함하는데 두 개념이 비슷해서 혼동하는 경우가 많습니다.1. 인증인증은 사용자가 본인이 맞는지를 검증하는 절차를 의미합니다. 예시로는 아이디와 비밀번호를 통해 로그인을 하는 과정이 있습니다. 2. 인가인가는 인증된 사용자가 시스템 자원에 대한 접근 권한이 있는지 확인하는 절차를 의미합니다. 예시로는 게시글을 삭제하거나 수정할 때 작성자가 맞는지 확인하는 과정을 생각해보시면 됩니다. 세션과 .. 2024. 10. 11.
JSFiddle에서 Vue 사용하는 방법 JSFiddle에서 Vue3 사용하는 방법 기존에 포스팅했던 게시글들 중 JSFiddle을 이용해 올린 Vue 코드들이 어느센가부터 동작하지 않는 것을 발견했습니다. JSFiddle이 기본 Vue 버전을 Vue3로 업데이트해서 생기는 오류같습니다. 기존에 인터넷에서 쉽게 찾을 수 있는 방법은 Vue2 방식으로, 수정된 자료는 많이 없어서 제가 한번 공유해보려고 합니다. 1. 업데이트된 방식 (Vue3) - 23.03.28 1. JSFiddle 화면에서 Language로 Vue를 선택하고, Frameworks&Extensions 등은 따로 선택하지 않습니다. (그냥 Vue를 선택해도 Vue3가 적용됩니다) 2. 아래와 같이 Vue의 createApp를 사용하여 vue instance를 만든 후, 요소에 m.. 2023. 3. 28.
5. HTML - 중급 (Semantic Tag) HTML Semantic Tag HTML 입문 포스팅에서 가장 기본적인 HTML 태그들을 알아봤었습니다. https://bellmir.tistory.com/20 (2) HTML 입문 HTML 입문 참고 링크 : 1. 생활코딩 - https://opentutorials.org/course/3084 2. Heropy - https://heropy.blog/2019/04/24/html-css-starter/ 3. w3schools - https://www.w3schools.com/html/ 들어가기 전에 H.. bellmir.tistory.com 해당 포스팅에서 레이아웃을 잡을 때 단순히 div 태그를 사용한다고 설명했었는데, 사실 div 태그를 사용하는것 보다 더 권장되는 태그들이 있습니다. 오늘은 HTML.. 2022. 7. 17.
4. CSS - 중급 (Inline vs Block) Inline vs Block 요소 참고 링크 : 1. display 속성 - https://developer.mozilla.org/ko/docs/Web/CSS/display 2. inline 속성 - https://developer.mozilla.org/ko/docs/Web/HTML/Inline_elements 3. block 속성- https://developer.mozilla.org/ko/docs/Web/HTML/Block-level_elements 4. inline-block 속성 - https://www.w3schools.com/css/css_inline-block.asp 이전에 올린 CSS 입문 포스팅을 먼저 읽고 보는 것을 추천합니다. https://bellmir.tistory.com/22?c.. 2022. 7. 17.
3. CSS - 입문 CSS 입문 참고 링크 : 1. 생활코딩 - https://opentutorials.org/course/3086/18318 2. CSS 개요- https://heropy.blog/2019/04/24/html-css-starter/ 3. CSS 속성 - https://happy-noether-c87ffa.netlify.app/presentations/level1/css/properties/ 3. w3schools - https://www.w3schools.com/css/default.asp 이전에 올린 HTML 입문 포스팅을 먼저 읽고 보는 것을 추천합니다. https://bellmir.tistory.com/20 (2) HTML 입문 HTML 입문 참고 링크 : 1. 생활코딩 - https://opentu.. 2022. 7. 17.