# Signin

doldory55

개발 프로젝트로 소셜 로그인을 구현해야하는 상황이 생겼다. 처음 해보는 소셜 로그인이기에 많은 구글링이 필요했다. 하지만 구현 방법은 굉장히 간단하다. 구현방법 깃허브 로그인을 하기 위해서는 먼저 react-router-dom을 이용해 redirect url 페이지를 만들어야 한다. 나는 아래사진처럼 https://localhost:3000/callback으로 라우팅 설정을 했다. 그다음 서버는http://api주소/oauth2/authorization/github 같은 이 url을 줄 것이다. 그러면 클라이언트는 이 url을 클릭했을 때 아래 사진처럼 깃허브 Sign in 페이지로 이동하는 로직을 구성한다. ![](https://velog.velcdn.com/images/doldory55/po

slow33

관련 Dto 생성 -> controller 생성 -> filterchain 설정(접속권한 부여) DTO 생성 @Data public class LoginDto { private String usernameOrEmail; private String password; } @Data public class SignUpDto { private String name; private String username; private String email; private String password; } controller 생성 @RestController @RequestMapping("/api/auth") public class AuthController { @Autowired AuthenticationManager authenticationManager; @Autowired UserRepository userRep

hackcuz

문제점 next-auth를 이용해 로그인을 구현하는데 아이디 혹은 비밀번호를 잘못 입력하는 경우 자꾸 내가 원하는 에러 핸들링 형태가 아닌 next-auth만의 Error 페이지가 출력되었다. 내가 원하는 에러 핸들링 "아이디 혹은 비밀번호가 일치하지 않습니다!" 라는 경고창을 띄우고 내가 만든 커스텀 /login 페이지에 머무르는것 현재 에러 핸들링 형태 아래와 같은 next-auth의 /api/auth/error 페이지가 출력됨. 해결법 res를 console로 출력해보면 아래와 같다. 해당

tygerhwang

Firebase Authentication 사용해 보기 2편 Firebase Authentication Documentation firebase_core | Flutter Package firebase_auth | Flutter Package Firebase Authentication 사용해 보기 1편 Firebase 세팅하기 - Flutter 3.0 이후 [Firebase 세팅하기 - Flutter 3.0 이전

tygerhwang

Firebase Authentication 사용해 보기 1편 Firebase Authentication Documentation firebase_core | Flutter Package firebase_auth | Flutter Package Firebase Authentication 사용해 보기 2편 Firebase 세팅하기 - Flutter 3.0 이후 [Firebase 세팅하기 - Flutter 3.0 이전

tygerhwang

Firebase 세팅하기 Firebase Firebase Documentation FlutterFIre firebase_core | Flutter Package Firebase 세팅하기 - Flutter 3.0 이전 버전 이번 글에서 Firebase 프로젝트를 생성하고 Firebase 프로젝트와 Flutter 프로젝트를 연결하는 방법에 대해서 작성하려고 한다. Mac OS를 기준으로 작성하였고, Flutter 3.0 부터 추가된 Flutter 플랫폼으로 등록을

knh4300

Overview > 이전 글 에서 회원 가입/탈퇴, 로그인/로그아웃, 자동로그인을 다뤄 보려 하였다.(과거형) 아니 근데 글쎄! android for Firebase가 아닌 Flutter 용이 따로 있다고 한다..! Flutter를 다루는 입장에서 반드시 확인하고 넘어가야 한다. 그래서 이전 글과 다르게 firebase for flutter 로 다시 연동을 시도하고 이전 글과 얼마나 다른지 비교, 나머지 기능들도 구현해보고자 한다. Firebase For Flutter firebase console로 이동한다. 앱 추가 flutter 버튼을 눌러 앱을 추가한다. ![](https://velog.velcdn.com/images/knh4300/post/7ac7f31b-83

aimzero9303

공통 세팅 yarn add firebase firebase.config.ts firebaseConfig는 보안 때문에 .env파일로 환경변수를 설정하여 불러오는 방식을 채택 당연히 .env 파일은 .gitignore에 제외 설정을 해준다. .env 로그인 세팅 login.container.tsx import login.container.tsx func 구글 로그인 login.container.tsx import login.container.tsx func > 이 외의 파이버베이스에서 로그인이 되었는지 확인해주는 함수 등등이 존재 하지만, 아직 사용하지 않았고, 나중에 그 함수를 이용하여 계속 검사해 주면서 setLoginStatus를 관리해주면 될 듯? 로그인 ![](https://velog.velcdn.com/images/aimzero9303/post/

tygerhwang

네이버 로그인 카카오 로그인 구글 로그인 - Firebase 없이 GCP로 로그인하기 네이버 로그인 이슈 네이버 로그인 이슈 - Android 이번 글에서는 네이버 로그인에 대해서 구현하는 방법을 알아보도록 하겠다. 네이버 로그인은 flutter에서 간단하게 처리할 수 있는 SDK를 제공하고 있어서 빠르게 구현할 수 있다. Naver Developer 네이버 개발자 센터를 방문하여 로그인을 진행한다. 상단 탭에 Applicatio

whitehyun

문서: https://developers.google.com/identity/sign-in/ios/start-integrating 1. 패키지 설치 2. OAuth 클라이언트 가져오기 구글 로그인을 구현하려면 GCP(Google Cloud Platform)에 project가 필요하다. GCP에서 직접 생성하거나, 문서 내에서 제공하는 OAuth 클라이언트 ID 만들기를 이용하여 간단하게 프로젝트 및 클라이언트 ID를 생성할 수 있다. 2-1. OAuth 클라이언트 ID 만들기 클릭

upisdown

코그니토로 계정을 생성해보았고, 이제 그 계정으로 로그인해본다 사실 로그인이라기 보단, >유효한 토큰을 얻고, 그 토큰으로 api를 호출할 수 있는 권한을 얻는다 라고 이해해야한다 로그인 이라는 개념자체가 그러니까.. 무튼 FE에서 입력된 정보로 코그니토에 권한을 체크받아서 JWT 토큰 등을 받아보자 코그니토 권한 https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_AdminInitiateAuth.html 소스 UserServiceImpl.java User 서비스 단에서 토큰을 얻고 그걸 FE로 반환해줘야함! AwsCognitoServiceImpl.java clientId 는 코그니토 설정중에 앱 클라이언트를 생성하면 거기에 ID를 발급해주는데, 그 값을 넣어준다. AuthFlow 는 AWS 문서를 보고 타입을 결정해주면 된다(플젝에서 저

tygerhwang

Google Login - without firebase 이번 글에서는 파이어베이스를 사용하지 않고 구글 로그인을 사용하는 방법에 대해서 설명하려고 한다. 구글 로그인은 스토어에 서비스 중인 많은 앱들이 기본적으로 사용하는 소셜 로그인 방법 중 하나이며, 새로운 프로젝트를 진입시 로그인 로직을 우선 개발해야 하는 경우 ADB/Simulator에서도 로그인을 사용하기 위해 구글 로그인을 활용하여 개발을 하고있다. Flutter에서 파이어베이스를 사용하지 않고 개발을 하기 위해서는 GCP(Google Cloud Platform)프로젝트를 생성하여야 한다. GCP 생성 구글 서비스를 사용하기 위해서는 GCP(Google Cloud Platform)프로젝트가 필요하다. 기존 프로젝트가 없다면 아래와 같이 새 프로젝트를 생성하면 된다. ![](https://velog.velcdn.com/images/tygerhwang/post/a2cc09a8-8082-4f1a-b3b7-

tygerhwang

Kakao Login Issue - 2 Flutter로 카카오 로그인시에 안드로이드에서는 발생하지만 IOS에서 자주 발생하는 이슈 중에 카카오 앱으로 동의항목 체크 후에 다시 앱으로 돌아오지 못하는 이슈가 있다. 해당 이슈는 딥링크 설정에서 발생하는 이슈이다. 카카오 앱 로그인 시도 후 IOS의 경우 카카오 앱을 오픈하여 동의항목을 체크를 받고 계속하기 버튼을 누르면 다시 앱으로 돌아와야 한다. 이 때 계속하기 버튼에는 서비스 중인 앱으로 다시 돌아올 수 있게끔 카카오가 딥링크를 심어놨기에 앱을 다시 오픈해줄 수 있는 것이다. 해결방법 XCode를 실행한 후 Info 탭 아래에 URL Types안에 딥링크를 넣어주어야 앱이 해당 딥링크를 받고 실행할 수 있게 된다. URL Types identifier : kakao scheme : kakao{NATIVEAPPKEY} 이렇게 세팅을 해주면 정상적으로 앱으로 돌아오게 된다. 카카오는 카카오 동의항목 계속하기

tygerhwang

Kakao Login Issue 이번 글에서는 카카오 로그인 또는 Flutter에서 외부 링크 진입시에 발생하는 이슈에 대해서 설명하려고 한다. Flutter를 사용해서 개발을 진행하다 보면 카카오 앱 로그인처럼 앱을 벗어났다가 다시 앱으로 진입하는 플로우를 따르는 경우가 많이 발생한다. 하지만 이러한 경우에 앱으로 다시 돌아오지 못하거나 앱에 진입한 이후에 다음 플로우가 진행되지 않는 경우에 대해서 몇가지 이슈를 정리하였다. Airbridge Deeplink Issue 내가 현재 개발하는 서비스는 Airbridge SDK를 사용하여 개발이 진행되고 있는데 Airbridge에서 제공되는 Tracking Link를 사용하고 있다. 이런 트래킹 링크를 사용해서 Custom Link를 사용하는 경우 Airbridge Deeplink Listener를 사용하여 딥링크를 수신받게 되는데 여기에 이슈가 많이 발생한다. Naver / Kakao Login 네이버와 카카

kimhyesu-_-

🍀프로젝트 2주차(왜 안되지..?의 연속이지만 이겨낸다!이겨냈다!/220530~220602) 로그인 / 회원가입 유효성 검사 기능 구현 마무리 Footer 레이아웃 완성 ✅Signin 페이지 기능 구현 > ✅ Signin 아이디, 비밀번호 validation 검사 ![](https://velog.velcdn.com/images/kimhyesu-_-/post/94efecd5-fc0a-4dcc-bf6c-37f8f6c92633/image.p

jhwang

1.. Decorator 사용 이유?? 통상적으로 웹사이트를 이용할 때, 우리는 최초 로그인을 한 이후부터 여러 권한을 필요로하는 기능을 재로그인 과정없이 사용한다. 사실, HTTP는 "stateless" 특성으로 인하여 이전의 요청이나 응답을 기억하지 못하고 있다. 데코레이터는 "그럼에도 불구하고 내가 로그인을 하여 토큰을 부여받은 사용자인 것을 어떻게 재로그인 과정없이도 인지하고 있는 것인가"에 대한 의문점으로부터 시작된다. HTTP REQUEST HEADERS 백엔드(서버)에서는 최초 로그인에 성공한 사용자에게 토큰(Token)을 발행하고, 프론트에서는 이 토큰을 Local Storage 또는 Sessiong Storage에 보관한다. 그리고 이 저장된 토큰을 새로운 요청때마다 HTTP request header에 넣어서 보내줌으로써 새로운 인증의 과정을 거치지 않은 채 로그인된 상태로 유지하게 만들어준다. 그리고 이 과정에서 Request header에 포함된

jhwang

::: 현재까지 진행 상황 ::: 초기 세팅 완료 Users 앱 생성 완료 models.py의 User 클래스 작성 완료 DB에 migrate까지 진행 회원가입 기능 구현 (정규표현식, 예외처리 사용) 로그인 기능 구현 (계정, 패스워드 필터링 적용) 회원가입 비밀번호 암호화 구현 (bcrypt 적용) 1.. Must Do.. 회원가입 과정에서 암호화를 진행했기 때문에, 로그인 또한 bcrypt를 이용한 로직으로 변경 bcrypt의 checkpw method를 이용하여 비밀번호 확인 로직 구성 인가(Authorization) 관련 내 벨로그 글 2.. install pyjwt 유의사항 :: 패키지명은 pyjwt 이지만, import할 때는 jwt

jhwang

::: 현재까지 진행 상황 ::: 초기 세팅 완료 Users 앱 생성 완료 models.py의 User 클래스 작성 완료 DB에 migrate까지 진행 회원가입 기능 구현 (정규표현식, 예외처리 사용) 1.. Must Do.. 로그인 시, 사용자 계정 & 비밀번호 필수 계정 혹은 패스워드 키가 전달되지 않을 경우, {"message":"KEY_ERROR"}, status=400 반환 계정 혹은 패스워드를 다르게 입력한 경우, {"message":"INVALID_USER}, status=401 반환 로그인 성공 시, {"message":"SUCCESS"}, status=200} 반환 2.. views.py 📌 내가 작성한 SignIn View 코드 📌 코드 설명 2-1.. 변수할당:: 2-2.. 이메일, 패스워드 필터링:: 2-3.. 예외처리:: `REF

changh950

🪨 무너지면 걸림돌, 이겨내면 디딤돌 오늘은 멘토님의 리뷰와 팀원들의 피어 리뷰를 받는 날이다. 어제까지 회원가입 화면을 잘 구현해두고 오늘 오전에는 기능을 구현하려고 했으나, 쉽게 풀리지 않았다. 그렇게 회원가입을 다 끝내지 못한 채 로그인에 대한 리뷰를 받았다. 멘토님께서 우리들이 생각하지 못한 부분까지 섬세하게 리뷰를 해주셨고 리뷰가 끝난 이후에도 팀원들끼리 긴 시간 회의를 통해서 앞으로의 피어 리뷰 방식을 정하고 바로 팀원 리뷰에 들어갔다. 팀원들끼리 서로의 코드를 보며 이해하는 눈을 키우며, 소통하는 법을 배웠고 즐겁게 팀 미팅을 통해서 각자의 진도 공유와 코드를 함께 보며 수정했다. >

changh950

🔥 1차 프로젝트 시작 프론트 엔드 - 로그인 및 회원가입 화면, 기능 구현 임무 간단한 로그인 창 화면을 구현하는 것을 1차 목표로 삼고 진행했다. > - 모르는 점 >- 모르는 점이라기 보다 아직도 flex를 활용한 레이아웃등 공간 배치하는 부분이 많이 미숙했었다. 그렇기에 flex🔑에 대해서 더욱 공부하고 초반에 너무 시간을 오래 끌면 안되겠다고 생각했다. - 배운점 >- 로그인 버튼