패스트캠퍼스 챌린지 18일차 - 소셜로그인을 위한 passport

0. 공부인증

공부시작 22 : 28

공부종료 23 : 40

저번에 복습이 필요해서 잠깐 미뤘던 소셜 로그인 기능이다.

사실 너무나 필요한 기능이고 어디에서나 필요한 소셜 로그인 기능이라서, 절대 포기할 수는 없지만,,,,,

아직도 어렵다.

그래도 전반적인 프로세스는 이해해서... 희망을 가지고 공부해ㅑㅑㅑㅑ지ㅣ...

 

 

1. 소셜 로그인 패스포트로 구현하기

지난번 시간과 달리 패스포트를 활용해서 페이스북 로그인을 구현하는 내용이다.

패스포트를 활용해서, 보다 간편하게 소셜 로그인을 구현할 수 있는 것은 맞지만, 필수는 아니다.

 

패스포트를 구현하기 위해서는 몇가지 지켜주어야 하는 사항들이 있다.

 

우선 패스포트 라우팅으로 들어오면,

  // 로그인이 시작되는 곳
  app.get(
    '/passport/facebook',
    passport.authenticate('facebook', { session: false })
  )

 

이후에, 페이스북에서 관련 정보를 callback 라우팅으로 보내줌.

주석을 참고하기.

  // 로그인이 끝나고 들어온 정보를 어떤식으로 처리하는지에 대한 로직
  app.get(
    '/passport/facebook/callback',
    // 이 메소드를 통해서, passport의 done 함수쪽으로 이동함.
    // 그리고 이후, 4개의 인자를 반환하여, done 함수를 실행하고,
    // 이후에 시리얼라이즈, 디시리얼라이즈를 실행함.
    passport.authenticate('facebook', {
      session: false,
    }),
    // 그리고 아래 로직을 수행하는데,
	// 위에서 실행한 각종 메소들 덕에 req.user에 정보가 들어 있음!
    async (req, res) => {
      // @ts-ignore
      const fbAccessToken = req.user?.facebook?.accessToken
      if (fbAccessToken) {
        const accessToken = await getUserAccessTokenForFacebookAccessToken(
          fbAccessToken
        )
        res.cookie('access_token', accessToken, {
          httpOnly: true,
          secure: true,
        })
        res.redirect('/')
      }
    }
  )

 

위 함수가 거치는 첫번째 관문

  passport.use(
    new FacebookStrategy(
      {
        clientID: FB_APP_ID,
        clientSecret: FB_CLIENT_SECRET,
        callbackURL: '~~~/passport/facebook/callback', // TODO: Use correct callback URL
      },
      // 콜백 함수를 통해 받은 데이터를 여기서 처리함.
      (accessToken, refreshToken, profile, done) => {
        //  done에 에러가 없고, 우리는 이런 유저를 만들었다라는 것을 내려주는 것.
        // 두번째 인지에 사용자 유저 정보가 포함됨.
        done(null, {
          facebook: {
            accessToken,
          },
        })
      }
    )
  )

그리고 위 과정을 끝내고,

 // 항상 사용해주어야 하는 두가지 함수.
  // 보통의 경우에는 위에서 받은  facebook.accessToken을 활용하여,
  // 데이터베이스 조회를 하거나 각종 로직을 실행할 수 있음
  passport.serializeUser((user, done) => {
    done(null, user)
  })

  passport.deserializeUser((user, done) => {
    done(null, user)
  })

을 과정을 통해서

다시 '/passport/facebook/callback' 을 통해서, 남은 로직을 처리함.

 

그리고 해당 로직 중에 getUserAccessTokenForFacebookAccessToken 을 실행하게 됨.

해당 과정은 전 블로그 포스팅에 정리해두었음....

 

 

2. 프론트엔드 마지막 챕터 - 웹앱에서 사용할 로그인 구현하기

로컬, 페이스북, 카카오, 네이버 로그인 구현할 예정

비밀번호 초기화 로직, 이메일 회원가입 시 이메일 인증 절차 진행하기.

 

!여기서 알아야 하는 것-> 이메일 인증 관련,-> 비밀번호 초기화 관련,-> 패스포트를 활용한 카카오, 네이버 소셜 로그인 구현

 

3. API와 아키텍처 설계, 데이터베이스 모델링

-OAuth Flow->네이버, 카카오, 페이스북-> 각각의 OAuth Provider에 개발자 계정을 만들고 설정을 해야 함.-> accessToken -> (platformUserId, platform) ->  회원가입/로그인 처리-> https 필요함. (ngrok 를 통해서 처리가 가능함)

 

-이메일 가입-> 인증상태를 확인할 필요가 있음 -> 유저정보에 'verified' 라는 필드가 있어야 함.-> 이메일 인증은 특수한 코드와 함께 이메일을 보내서 그 링크로 접속했을 때만, 인증이 되게 처리.     -> https://~~~/verify_email?code=aksd-sdfas-sdfsdf

     -> 위의 링크로 GET요청이 들어오면은 'verified'를 true로 바꿔줌

-> 아마존의 SES(Simple Email Service) 로 인증메일을 보낼 것

 

- 비밀번호 초기화

-> 비밀번호 찾기는 지원하지 않음. 

-> 유저가 처음 가입한 해당 이메일로 인증 메일과 비슷하게 초기화 링크를 담은 메일을 보냄.

-> 해당 링크를 타고 들어오면 비밀번호를 갱신할 수 있도록 함.

 

-배포

-> AWS EC2 - git 레파지토리를 clone해서 배포

-> HTTPS 지원 - 아마존 인증서

-> ELB(Elastic Load Balencer)를 사용해 여기에 인증서를 물리고, ELB 뒤의 EC2가 작동

-> SES 를 이용해서 메일 작업을 처리할 것.

-> MongoDB 를 활용하여 작업할 예정.

 

 

환급 챌린지 (18/30)

 

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

https://bit.ly/37BpXiC

The RED : 김영하 작가의 내 안의 숨은 이야기를 찾아 쓰는 법 | 패스트캠퍼스

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는Node.js웹프로그래밍초격차패키지