소셜 로그인

안녕하세요 프론트엔드 개발자 ken입니다. 오늘은 애플 로그인 동작방법과 간단한 예제에 대해 알아보겠습니다.애플 로그인은 OAUTH 2.0을 기반으로 동작합니다.애플 로그인 프로세스로그인 프로세스는 다음과 같습니다.사용자가 계정 정보를 입력 후 로그인 요청을 합니다.애플은 사용자의 아이디와 이메일을 암호화 하고 해당 정보들을 포함하는 ID 토큰을 생성합니다.ID 토큰과 함께 사용자를 웹 사이트로 리디렉션 합니다.리디렉션 된 웹의 URL에서 토큰을 추출하고 디코딩 하면 사용자의 애플 계정 정보를 가져옵니다. 해당 정보를 바탕으로 웹에서 사용자를 인증하고 세션이 생성됩니다.애플 로그인 설정애플 로그인 시 service ID, client ID, redirect URL등을 설정해야 합니다..

안녕하세요 프론트엔드 개발자 ken입니다. 오늘은 카카오 로그인 동작 방식과 간단한 구현 예제에 대해 알아보겠습니다.카카오 로그인은 기본 방식인 권한 부여 승인 코드 방식을 채택하고 있습니다작동 방식1. 사용자가 서비스에서 카카오 로그인 버튼을 클릭하면 카카오 인증 서버로 인가 코드 발급을 요청합니다.2. 카카오 인증 서버는 사용자에게 인증을 요청합니다.- 카카오톡으로 로그인: 카카오톡 실행, 카카오톡에 연결된 카카오계정의 자격정보(Credentials)로 사용자 인증- 카카오계정으로 로그인: 계정 정보를 입력해 로그인하는 화면 출력, 해당 카카오계정의 자격정보로 사용자 인증3. 카카오 인증 서버는 사용자 인증 성공 시, 서비스 앱의 동의 항목 설정을 바탕으로 사용자에게 동의 화면을 출..

안녕하세요 프론트엔드 개발자 ken입니다. 오늘은 구글 로그인 동작 방식과 간단한 예제 코드에 대해 알아보겠습니다.구글 로그인은 기본 방식인 권한 부여 승인 코드 방식을 채택하고 있습니다.Google Developers 설정1. https://console.cloud.google.com 접속2. API 및 서비스 -> 사용자 인증 정보 -> OAuth 2.0 클라이언트 ID에서 id 생성필수 정보 입력애플레이케이션 유형 항목에 '웹 애플리케이션' 선택애플리케이션 이름 입력승인된 자바스크립트 원본 항목에 구글 로그인을 사용할 홈페이지 주소 입력승인된 리디렉션 URI 항목에 구글 로그인 후 Redirect할 주소 입력로컬에서 테스트가 필요하므로 https://localhost:3000을..

안녕하세요 프론트 엔드 개발자 ken입니다. 회사 프로젝트에서 소셜 로그인 기능을 추가하면서 알아간 사실을 적어봅니다.카카오, 구글, 애플 소셜 로그인을 구현했는데 각각 다른거 같으면서도 모두 다 OAUTH2.0을 기반으로 동작하는것을 알았습니다.OAUTH란?인터넷 사용자들이 비밀번호를 제공하지 않고 다른 웹사이트 상의 자신들의 정보에 대해 웹사이트나 애플리케이션의 접근 권한을 부여할 수 있는 공통적인 수단으로서 사용되는, 접근 위임을 위한 개방형 표준쉽게 말해, 서비스를 이용하는 유저의 타사 플랫폼 정보에 접근하기 위해서 권한을 타사 플랫폼으로부터 위임 받는 것이다.흐름도사용자(User) : 서비스 제공자와 소비자를 사용하는 계정을 가지고 있는 개인소비자(Conusmer) : Open ..