OAuth 과정

Github OAuth를 위한 두가지 전략

front layer에서 react-github-login 라이브러리 사용

👉 npm react-github-login

back layer에서 passport-github 라이브러리 사용

👉 npm passport-github 👉 passport-github

🧭 OAuth 흐름

이 프로젝트에서는 passport-github을 이용하였다. (passport-github2를 써도 무관)

위의 링크를 참고하여 해당 라이브러리를 사용하기 위한 base 코드를 작성한다.

1️⃣ front에서 깃허브 로그인을 위한 버튼 클릭시 서버/auth/github으로 URL요청

2️⃣ Github의 developer settings의 OAuth Apps를 잘 설정하였다면, Github 인증 화면 제공

3️⃣ Github의 ID, Password를 통해 authorization 하면, 등록한 callbackURL로 라우팅

4️⃣ GitHubStrategy에 등록한 callback함수 실행. 이때 cb는 반드시 (error,user)를 명시해서 return 해주어야 한다.

5️⃣ 4번에서 user를 return해 주기 전에 데이터베이스의 user테이블을 통해 없는 user라면 회원가입 처리 후 return 해준다.

6️⃣ /auth/github/callback에서 등록한 콜백함수의 req로 user가 들어오므로, 토큰처리 하여 front로 보내준다.

📌 iOS요청 시 redirect (🙏🏻 IssueTracker 1팀의 도움을 받아 해결하였습니다.)

Request Header

request message의 header에 있는 user-agent는 요청을 보내는 클라이언트의 OS 및 기기정보등을 담고 있다.

물론 이 user-agent값은 request message를 보낼때 수정하여 보낼 수 있다.

하지만, 대부분의 요청시 user-agent를 수정하지 않기 때문에 해당 값을 이용하여 웹의 요청인지 iOS의 요청인지를 분기처리 할 수 있었다.

즉, req.headers['user-agent'].includes('iPhone')를 통해 iOS의 요청임을 걸러낼 수 있었고

iOS에서 정해준 앱경로에 맞게 redirect 처리를 할 수 있었다.