참고 사이트 : [NODE] 📚 카카오 로그인 (passport-kakao) ✈️ 구현
카카오 로그인 OAuth 신청
-
https://developers.kakao.com/
접속하여 개발자 계정 만들고 아이디 만들기 -
애플리케이션 추가
추가하니까 4가지의 키가 나오길래 일단 적어두었다.
3. 도메인 등록 (이건 소셜로그인할 땐 안해도 되는 것으로)
여기에 프론트서버 주소를 적어야할지 백엔드 서버를 적어야할지 모르겠네.
일단 테스트를 위해 로컬을 적어넣어본다. 일단 내 백엔드 서버가 3000포트니까 3000을 적는게 맞으려나..
http://localhost:3000-
카카오 로그인 활성화
-
redirect URI 지정
내가 쓸 API 패쓰를 쓰는 거 같다. 난 이걸로 지정.
http://localhost:3000/api/auth/kakao/callback- 카카오 정보 동의 항목 설정
넘겨 받을 카카오 정보를 설정하는데 이 항목을 설정하면 로그인할 때 동의서를 처리해야 한다고 한다.
각 항목별로 누르면
이런 식으로 어느 단계로 설정할지 세분화 되어 있다.
일단은 나중에 수정가능할 것같으니까 패스해본다.
- 내 프로젝트에 키 등록
.env파일에 넣고, 카카오스트레티지 만들고 거기에 넣어주면 되는 듯.
일단 아직은 스트레티지는 안만들었으니 .env에 등록만.
쿠키 시크릿 값은 전에 세션할 때 미리 만들어 뒀었고,
아까 받은 4개의 키중에 REST API키를 KAKAO_ID로 등록.
COOKIE_SECRET =
KAKAO_ID = REST_API키중간 과정 생략..
코드
생략..
나의 경우 한 것들
내 기존 로컬로그인을 위한 user 테이블에서
password를 널러블하게 수정. 이건 로컬로그인할 때마다 따로 if문으로 확인해줘야하면 되고.
snsId, provider 필드도 널러블로 추가.
일단 로컬db로 되는지 테스트하려 함.
브라우저에서 내 카카오 로그인 요청 경로를 입력하여 요청 (/kakao)
위와같은 에러가 떴다. 일단 카카오 화면이 뜨긴 떴다.
어떤 에러인지 찾아들어가보니
이런 에러였다. 내가 127.0.0.1:3000~~ 이렇게 입력했었는데
카카오에 등록했던 거는 http://localhost:3000~~
이거였어서 이게 틀려서 문제였던 것 같다. 이렇게 바꿔주니 다음과 같이 제대로 뜬다.
일단 테스트해보니 앞에 http://은 없애도 성공한다.
근데 이상한건 확인해보니 내가 입력해놓은 경로는 /kakao/callback인데 그건 안되고
/kakao가 된다. 일단 이걸로 진행은 해보고 다음에 짚어봐야겠다.
그리고 동의하고 계속하기를 누르니 에러가 났다. 내용을 보니 뭔가 주소가 잘못된 모양인데
내가 kakaosStrategy.js 파일에서 경로를
callbackURL: "/api~~ 이부분에서 api앞에 /를 안붙여서 난 에러였다.
이걸 수정하고 나니 다른 에러가 났는데
SequelizeValidationError: notNull Violation: User.email cannot be null,
notNull Violation: User.name cannot be null,
notNull Violation: User.phone cannot be null이건 기존 user테이블에서 널러블하지 않게 설정한 게 카카오로그인 때는 입력되지 않아서 였다. 그래서 일단 이값들을 널러블로 바꿔봤다.
이걸 고치고 다시 요청을 해봤는데 이번엔 전엔 됐던 동의 페이지가 안뜨고 또다른 에러가 떴다.
Error: Failed to serialize user into session
...\passport\index.js:9:5인덱스의 9번줄 시리얼라이즈하는 부분에서 에러가 난 것이었다.
일단 혹시 몰라서 db를 확인해보니 카카오 로그인으로 내가 가입되어 있었다.
지우고 다시 요청해보니 바로 또 생성이 되었다. 아무래도 필요한 값들을 다 널러블 처리를 한게 뭔가 중간 과정 없이 db에 넣게 하는거 같은데.
다른 것도 다시 전으로 돌려봤는데 그래도 동의화면은 안뜬다.
아무래도 동의화면이 안뜨는 거는 이미 내 카카오는 이미 동의를 한번 눌렀기때문에 그 화면은 건너 뛴거고. db에러도 해결되서 지나갔기에 db에 들어간거고 저 시리얼라이즈 에러는 그 다음단계에서 뜬 에러인 것 같다.
done(null, user.id);이부분에서 id이게 내 user테이블에는 없는 컬럼이어서 생기는 에러같아서 일단 이거를 user.userId로 바꿔보았더니, 다른 에러가 났는데
브라우저 상으로는 그냥 Error 라고만 뜨고 원인은 없이, 스택들까지만 떴다.
내 터미널에는 그래도 좀 더 진행된 듯하게 어떤 db 결과값들이 떴는데
개인정보가 많아서 여기에 코드를 올릴 순 없겠다.
에러 스택을 보면 뭔가 시퀄라이즈 쿼리관련 에러인 것 같긴한데
내가 작성한 파일은 스택에 없고 시퀄라이즈 패키지 파일들만 스택에 있다.
findone이런 게 보이는데
시리얼라이즈는 넘어가고 그 밑에 디시리얼라이즈에서 에러가 난 것일지도 모르겠다.
카카오스트레티지 20번째 줄에 콘솔로그를 찍어보면
다음과 같이 profile 객체를 카카오가 보내주는데 이걸 활용해서 넣어줘야 하는 것으로 보인다.
kakao profile {
provider: 'kakao',
id: 2447411719,
username: '땡땡땡',
displayName: '땡땡땡',
_raw: '{"id":2447411719,"connected_at":"2022-09-27T06:39:44Z","properties":{"nickname":"땡땡땡"},"kakao_account":{"profile_nickname_needs_agreement":false,"profile":{"nickname":"땡땡땡"},"has_email":true,"email_needs_agreement":false,"is_email_valid":true,"is_email_verified":true,"email":"codeing999@gmail.com"}}',
_json: {
id: 2447411719,
connected_at: '2022-09-27T06:39:44Z',
properties: { nickname: '땡땡땡' },
kakao_account: {
profile_nickname_needs_agreement: false,
profile: [Object],
has_email: true,
email_needs_agreement: false,
is_email_valid: true,
is_email_verified: true,
email: 'codeing999@gmail.com'
}
}
}module.exports = () => {
passport.serializeUser((user, done) => {
done(null, user.snsId);
});
passport.deserializeUser((id, done) => {
//? 두번 inner 조인해서 나를 팔로우하는 followerid와 내가 팔로우 하는 followingid를 가져와 테이블을 붙인다
User.findOne({ where: { snsId: id } })
.then((user) => done(null, user))
.catch((err) => done(err));
});위와같이 snsId,
snsId : id
로 바꿔넣음으로써 문제 해결.
Cannot GET /이런 응답이 온거보니 잘 완료된 것 같다. 이제 리다이렉트할 주소만 잘 넣어주면 그 페이지로 이동할 것이다.
auth.router 30번째 줄에
res.redirect("/api/auth/mypage");를 넣어서 일단 마이페이지로 가게했다. (원래면 메인페이지로 가야 될거같은데 지금 메인페이지가 get이 아니고 post이다.. 프론트에서 직접 호출할 때만이 갈 수 있다.)
{"message":"로그인 되어있지 않습니다."}문제는 지금 액세스토큰 여부로 로그인 여부를 판단하기 때문에 카카오 로그인한 사용자는 로그인 했다고 처리가 안되어있다. 어떻게 해결해야할까.
배포환경에서 추가로 해야할 것들
여기 허용IP에 백엔드 서버 주소 넣어주면 될 것 같고.
리다이렉트 API에서도 당연히 이제 백엔드 서버주소로 넣어줘야하고.
코드들에서도 바꿔줄 부분있으면 바꿔줘야함.
추가 기능
푸쉬 알림 이 기능도 사용할지 결정해보고.
팀관리에 계정 등록하면, 그 사용자 프로퍼티를 추가할 수 도 있다.
