기상천외한 PassPort 모듈 에러

req.user 가 없어요!!! 세션도 만들어지지 않아요!! 구버전 모듈이에요!!

그동안 패스포트 모듈을 가지고 놀면서 만난 온갖 에러 십색기들!

로그를 분명히 찍어놨는데 어따 팔아먹었는지 안보여서 그냥 구두로 서술함

미래의 내가 알아서 잘 써먹겠지 뭐

 

 

 

문제 발생 1.  제대로 동작하지 않는 트위치 로그인 모듈

요요요 공식문서에 나온 두 십색기는 절대 쓰지말자

 

트위치 소셜 로그인을 구현하고자 하면 겪게될 첫번째 문제

패스포트 공식문서에 있는 모듈은 절대 쓰지말자

 

트위치의 정책이 바뀌었는데 공식문서의 모듈은 그걸 반영하지 않아서 뭘 하든 동작조차 하질 않는다

기억상으론 유저가 없니 어쩌니 저쩌니 했던거 같다

이걸로 2일을 허비함 이게맛냐!?

 

만약 채 - 신 모듈을 설치했는데 토큰이 없니 어쩌니 하는 에러가 뜬다면

그건 로그인 후 리다이렉트를 이상한 곳으로 해둬서 그렇다

 

문제 해결 1. 현재 정책에서 지원하는 패스포트 모듈 설치

npm i @d-fischer/passport-twitch

@d-fischer/passport-twitch npm 문서

 

이거 말고도 여러모듈이 있으니 입맛에 맞게 주워서 쓰면 된다

 

 

 

문제 발생 2. 회원 테이블이 2개면 어떻게 설계하지?

테이블이 1개면 알겠다 이거야

근데 2개는 어떻하지? 응? passport의 index.js가 두개로 나눠지나? 오또카지?

 

문제 해결 2. 일단 갈라치고 보자

그런 짓은 하지 말아야 했는데 난 그 사실을 몰랐어

 

//index.js
//Passport 설정

const passportConfig = require("./routes/passportRouter");

passportConfig.passport1();
passportConfig.passport2();

 

당장의 문제는 해결 했으나 이렇게 작성한걸 나중엔 후회하게 된다 갸아악

 

 

 

문제 발생 3. 회원 테이블이 2갠데.. 하나의 소셜로그인을 어떻게 대응하지?

A회원 테이블과 B회원 테이블이 있다면

같은 구글계정으로 A회원 테이블과 B회원 테이블 둘 다 가입이 되야하는데

1개의 구글계정으로 1개의 회원 테이블만 가능한게 아닐까!? 싶어서 멘탈이 터져버릴뻔한 문제...가 될 뻔 했다

 

문제 해결 3. 로그인 프로젝트도 갈라치면 되겠네!

구글 클라우드 프로젝트 선택창 & 내 계정에 액세스할 수 있는 앱

 

1개의 회원 테이블 === 1개의 프로젝트로 대응하니 쉽게 해결됨

 

 

 

문제 발생 4. B 회원 테이블로 로그인 했는데 기존에 가입해둔 A 회원 테이블 정보가 뜨는 경우??

분 - 명히 갈라둘 수 있는건 갈라뒀는데 뷰어로 로그인 (회원정보가 없으면 회원가입 자동 진행) 시도를 하니

기존에 테스트용도로 넣어뒀던 크리에이터 회원 정보로 로그인이 되는 기현상이 발생됐다

 

아니 ㅋㅋㅋㅋ 분기 시킬건 다 했잖아!

 

문제 해결 4. passport 모듈은 라벨링으로 식별이 가능하다

//controller/userController.js
//크리에이터 구글 로그인
router.get(
...
  passport.authenticate("AGoogle", { scope: ["profile", "email"] })
);
router.get(
...
  passport.authenticate("AGoogle", { failureRedirect: "/" }),
//AGoogle 요놈!
...

//뷰어 구글 로그인
router.get(
...
passport.authenticate("BGoogle", { scope: ["profile", "email"] }));
router.get(
...
  passport.authenticate("BGoogle", { failureRedirect: "/" }),
//BGoogle 요놈!
...

//passport/creator/google.js
const GoogleStrategy = require("passport-google-oauth20").Strategy;
const passport = require("passport");
...

module.exports = () => {
  passport.use(
    "AGoogle", //요놈!
    new GoogleStrategy(
      {
...


//passport/viewer/google.js
const GoogleStrategy = require("passport-google-oauth20").Strategy;
const passport = require("passport");
...

module.exports = () => {
  passport.use(
    "BGoogle", //요놈!
    new GoogleStrategy(
      {
 ...

 

요놈! 이라고 표시된 부분들을 잘 보자

처음엔 저것들을 Google로 통합시켜 놨는데 저렇게 분리를 시켜줘야 서로 다른 로직이라고 인식하게 된다

 

 

 

문제 발생 5. req.user가 들고 있는건 고유값이 아니다 ???

A 테이블로 로그인한 유저가 A 테이블에 해당하는 메인페이지가 아닌

임의의 URL 입력을 통해 B 테이블 유저에 해당하는 메인페이지로 이동하게되면

두 테이블간의 계정 소유권이 각각 다른 회원 일지라도 id가 같아버리면 해당 유저의 정보를 불러오게 된다

 

왜?? 회원 테이블이 2개인데 결국 이것을 합쳐서 보면

A 회원이 소유한 A 테이블의 id = 1은

B 회원이 소유한 B 테이블의 id = 1과 동일한 1이니까!

즉, const { id } = req.user을 이용해서 DB정보를 불러오기때문에 발생되는 문제다.

 

문제 해결 5. 테이블이 2개 이상일 경우 합쳐보면 고유하지 않은 Table의 id를 대체할 고유값을 만들어주면 됨

//passport/creator/twitch.js
...
module.exports = () => {
  passport.use(
    "ATwitch",
    new twitchStrategy(
      {
...
      },
      async (accessToken, refreshToken, profile, done) => {
        try {
...
            await Creator.update(
              {
                passport_pk: `${고유값으로 작성}`
              },
...
  
//passport/creator/index.js
...
 module.exports = () => {
   passport.serializeUser((user, done) => {
     done(null, user.passport_pk);
   });

   passport.deserializeUser(async (passport_pk, done) => {
     await Creator.findOne({ where: { passport_pk } })
       .then((user) => done(null, user))
       .catch((err) => done(err));
...

//deserializeUser의 인자를 passport_pk가 아닌 id로 하면 왠지 모르게 에러가 생긴다

이 방법이 베스트인지 아닌지는 모르겠지만 필자는 이렇게 해결했다

 

passport:{} 여기를 보면 성공적으로 변경 됐다 ^오^ 기분 굿

 

 

 

문제 발생  6. req.user가 존재하지 않아서 id를 받아올 수 없어요!! 빼애액!!

진짜 이래도 안되고 저래도 안됐던 골때리는 문제다

서버에서도 설정 다해줬고 클라이언트에서도 axios에 { withCredentials: true } 도 다 해줬는데 안된다

검색하니 서버측에서 세션을 안쓴다고 선언 했거나 { withCredentials: true } 설정을 안한 케이스밖에 안보였다

 

사방팔방 콘솔로그를 찍어서 확인을 해보니 로직자체는 정상적으로 돌아가지만 B 테이블의 req.user만 생성자체가 되질 않았다

 

그렇다... 문제 2에서 갈라쳐놨던 index가 문제였다..!

 

문제 해결 6. 그래서 그냥 passport의 index.js를 합쳤다

왼쪽처럼 되있던 구조를 오른쪽으로 뜯어고쳤다

 

합쳤더니 또 된다

 

정말.. 여지껏 사용해본 모듈 중에서 제일 에러를 많이 뱉은 녀석 같다

파일럿이 병신이라 지극히 당연한 증상인듯

그래도 한번 배워두면 틀 자체는 똑같아서 여기저기 다 주워다 쓸수있다는게 장점인듯 하다