9. twitter clone 하기 - 파이어베이스 로그인 설정(1)

1. 파이어베이스 로그인 설정하기

• console.firebase.google.com 에 접속한 다음 이전에 만들었던 twitter 파이어베이스 프로젝트를 선택합니다.
  => 이곳을 파이어베이스 콘솔이라 합니다.

• Authentication 을 누릅니다.

• Authentication 화면으로 이동하면 최초 화면에서 시작하기를 누른 다음에 User 탭을 누릅니다.

• 로그인 방법 설정을 누르면 sign-in method 탭으로 넘어갑니다.
• 다양한 로그인 방법 중에서 여기서는 이메일, 비밀번호, 구글, 깃허브 소셜 로그인을 사용합니다.

• 첫 번째로 이메일 / 비밀번호를 클릭합니다.
  
  • 옵션에서 '사용 설정'을 체크합니다.
  • 이메일 링크(비밀번호가 없는 로그인)는 체크하지 않습니다.
    => 비밀번호를 사용한 로그인 기능을 구현하기 위해서

• 저장 후 새 제공업체 추가를 클릭합니다.

• 구글을 선택해서 클릭합니다.
  • 옵션에서 '사용 설정'을 체크하고 프로젝트 공개용 이름은 그대로 두고 프로젝트 지원 이메일에는 기본값을 설정합니다.

• 구글을 선택하는 동일한 방법으로 깃허브 선택해서 클릭합니다.
• 깃허브 소셜 로그이는 파이어베이스 말고 깃허브에서도 몇 가지를 추가로 설정해야 사용이 가능합니다.
• 파이어베이스 설정에 옵션에서 '사용 설정'을 체크하면 클라이언트 아이디와 보안 비밀번호가 입력되지 않은 상태에서 그 아래 '설정을 완료하려면 승인 콜백 URL을 GitHub 앱 구성에 추가하세요' 아래에 URL 값을 복사합니다.
  => 클라이언트 아이디와 클라이언트 보안 비밀번호는 깃허브 설정을 마쳐야 얻을 수 있는 값입니다.

• 깃허브에 접속해서 로그인 관련 설정을 합니다.
  => 이 과정을 진행하고 나면 구글 소셜 로그인 외에 다른 소셜 로그인도 어려움 없이 적용이 가능합니다.
• 깃허브 오른쪽 위에 있는 사용자 메뉴를 열어 <Settings>를 클릭합니다.

• 메뉴 중에서 <Developer settings> 메뉴를 클릭합니다.

• 왼쪽에 있는 메뉴 중 <OAuth apps> 메뉴를 클릭합니다.
  => 여기서 OAuth 기능을 설정할 수 있습니다.
• OAuth를 사용한 적이 없었다면 아래의 화면이 보입니다.

- OAuth는 다른 사이트의 계정 정보의 접근 권한만 받아 해당 계정을 이용해 로그인할 수 있게 해주는 기능, 구글이나 깃허브 계정으로 가입한 사용자에게는 별도의 아이디나 비밀번호를 가입자에게 요구하지 않아도 됨
-  OAuth는 아마존, 구글, 페이스북 마이크로소프트, 트위터, 카카오, 네이버 등 많은 곳에서 제공하고 있음

• <Register a new application> 버튼을 눌러서 설정을 진행합니다.
• 아래와 같이 소셜 로그인이 필요한 사이트의 정보를 입력해야 합니다.
  • Application name 은 "twitter"를 입력합니다.
  • Homepage URL은 파이어베이스의 Authentication 화면에서 스크롤바를 내리면 '승인된 도메인' 이라는 항목에서 "firebaseapp.com"으로 끝나는 도메인을 복사해서 "http://~.firebaseapp.com"와 같이 "http://"를 붙여서 입력합니다.
  • Authorization callback URL은 깃허브 설정에 있던 값을 복사해서 사용합니다.
• 설정을 마치면 <Register application>이 활성화되면 누릅니다.

Github 설정

• 설정을 마치면 클라이언트 ID를 복사하고 Generate a new client secret 버튼을 눌러서 보안 비밀번호를 생성하고 Client sercret 에 있는 값을 복사합니다.

• 깃허브에서 복사한 값을 파이어베이스에 클라이언트 ID와 클라이언트 보안 비밀번호를 복사하여 붙여 넣습니다.

이 글은 Nomad Coder의 "클론코딩 트위터" 책을 바탕으로 작성되었습니다.