SNS연동
github으로 연동하기
깃헙의 오른쪽 상단 profile > setting click하여 Public profile로 이동
scrollDown하여 Developer Settings > OAuth Apps 선택
https://github.com/settings/developers 로 이동해도 된다.
Register a new application 클릭하고 필요한 정보를 입력한다.
다른 부분은 대충 입력해도 되지만 Authorization callback URL은 꼭 Firebase에서 제공한 url을 입력해야한다.
모두 입력했으면 Register application 버튼 클릭.
Client ID와 Client secrets를 복사해서 Firebase에 붙여넣기하면 된다.
참고로 Client secrets는 단 한 번만 보여지고 다시는 볼 수 없기 때문에 주의해야한다.
만약 Client secrets을 사용하지 못했다면 다시 만들어서 생성해야하며, 이름대로 비밀이기 때문에 타인과 공유해서는 안된다.
연결완료✨
추가로 지메일로 연동도 진행해보았다.
프로젝트 활성화
Firebase에서 활성화 한 다음에는 프로젝트에서도 활성화시켜야 온전히 기능을 사용할 수 있다.
signInWithPopup으로 팝업을 열거나 signInWithRedirect로 페이지를 redirect해서 로그인할 수 있다.
자세한 사용방법은 공식문서 참조.
SNS의 로그인 계정이 이미 가입된 mail일 때?
signInWithPopup을 통해 깃헙으로 로그인을 시도했을 때, 깃헙의 계정이 이미 프로젝트에 가입된 이메일과 동일할 때 account-exists-with-different-credential(다른 자격증명을 이용한 로그인 시도)이라는 에러가 출력된다. 당연히!
이미 가입되어있으니 메일로 로그인하라는 메세지를 보여주면 될 것 같다.
❌signInWithRedirect() not working❌
signInWithPopup은 팝업이 차단된 경우나 모바일에서는 사용할 수 없기 때문에 팝업이 아닌 redirect로 회원가입을 하고 로그인을 하고싶은데, signInWithRedirect()를 사용하면 redirect가 이뤄지지않는다. 심지어 콘솔에 에러도 출력되지 않는다. 왜일까?
공식문서를 찾아보니 권장사항이 따로 있다고 한다.
이것이 바로 권장사항.
다양한 방법이 있지만 이것이 가장 간결하고 쉬워보였다.
현재 커스텀 도메인을 갖고있지 않기 때문에 프로젝트를 완성한 다음에 재시도 해보겠다.
CODE CHALLENGE : RESET PASSWORD
일단 UI를 조금 예쁘게 변경했다.
react의 createGlobalStyle로 웹폰트까지 적용시켜봤는데 상당히 재미있었다.
모든 플랫폼들이 그러하듯 로그인 정보를 잊어버릴 때를 대비하여 비밀번호 찾기, 아이디찾기가 존재한다. 비밀번호 재설정로 비밀번호를 다시 세팅할 수 있도록 해보았다.
비밀번호 재설정
공식문서를 살펴보니 비밀번호를 변경할 수 있는 메일을 보내주는 메소드가 존재했다.
해야할 일
- 비밀번호를 잊으셨나요? 버튼을 클릭하면 비밀번호 재설정 모달 출력
- 모달에는 비밀번호를 재설정할 이메일 주소 입력폼 존재
- 이메일은 실제 가입되어있는 정보인지 확인
- 취소버튼을 누르면 모달이 닫히고, 재설정 버튼을 누르면 메일이 전송되도록.
3번째 항목인 실제가입여부를 확인하는 것을 아직 못찼았다.
일단은 메일이 전송되는 것까지 확인 완료.
