여유상점 10_27 23) Cafe24 : Revising Some codes after upload_1)

오범준·2020년 10월 30일
0
post-thumbnail

after uploading to server

( Actually, pushing to git repository in node-js )

Several Code has to be revised

1) Google Oauth

1. redirect_uri_mismatch 오류

Solution 1

  passport.use(
      new GoogleStrategy({
      clientID: ~ ,
      clientSecret: ~ ,
      // url user get redirected to after they login into google
      callbackURL: "/google/callback/"
    },

add above callbackURL

the bottom line is, the format above is preferred
rather than adding "http://localhost:3100" etc

2. req.user info not saved in session

link 1) : https://levelup.gitconnected.com/everything-you-need-to-know-about-the-passport-local-passport-js-strategy-633bbab6195
link 2) cookie : { secure : true } ?? : https://dongmin-jang.medium.com/node-js-express-session-korean-ac5d1aac1fff
link 3) https://kjwsx23.tistory.com/352

after google oauth login,
req.user info appears
which means, that passport.js is
working well

But After redirection,
the main page cannot recongnize the req.user

혹시 nodejs passport 상에서 로그인을 하는데 serialize까지 잘 작동해서, callback function에서도 req.user가 확인되는데, 막상 middleware 상에서 req.user를 출력해보면 undefined가 뜹니다. / DB상에 serialize를 통해 유저 정보가 저장된 것이 확인됨에도 불구하고, req.user가 undefined인 이유는 무엇인가요 ㅜㅜ 아시는 분 있나요

Analyzed Problem

If you see the log
1) serialize is working properly
2) you cannot see the deserialize process
3) req.user is undefined

Let's think of the google oauth process

Passport.js uses "Strategy" to store "user" into DB
-> they create session in session-store by "serialization"
-> save user info in "req.user" by deserialize

So,
if we complete authentication process,
we can use middelware such as "req.isAuthenticated" to
distinguish whether this user is authenticated or not

  • passport.js saves user info into session, and when the authentication process occurs, it sends user info as cookie to client, so, if there is newly made cookie in the browser , it means login process succeded since this cookie saves "connect.sid(식별자)"

  • when, client sends server an authentication required request ( 인증이 필요한 요청) , client adds stuffs such as "session_id" located in cookie, to header

link
https://gompro.postype.com/post/1182247

Check

The status quo is that,

If I login, the "로그인" letter should be changed to "로그아웃"( logout in Engish)

But it is not happening, which means, I am regarded as "not loggined" user, even if I did

So I checked the browser in the Network Tab
And Found out that
There is no
"Cookie" in request header !! no cookie is saved...

But!!

It looks like cookie is properly made in the login process
as I can see the cookie in the log
{
path: '/',
_expires: ~~~
originalMaxAge: ~~
httpOnly: true,
secure: false
}

That is, !!!

Trial 1) Setitng Fetch in Front

link 1) : https://stackoverflow.com/questions/40704533/no-cookie-stored-in-browser-when-using-passport-express-authentication
link 2) : https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Fetch%EC%9D%98_%EC%82%AC%EC%9A%A9%EB%B2%95
link 3) : https://evan-moon.github.io/2020/05/21/about-cors/

It was related with "fetch"

기본적으로 브라우저가 제공하는 비동기 리소스 요청 API인 XMLHttpRequest 객체나 fetch API는 별도의 옵션 없이 브라우저의 쿠키 정보나 인증과 관련된 헤더를 함부로 요청에 담지 않는다. 이때 요청에 인증과 관련된 정보를 담을 수 있게 해주는 옵션이 바로 credentials 옵션이다.

If you want to send a credential with authenticatino included, you have to use 'crdentials : include' . which is also used in 'cross-origin' request

fetch('https://example.com', {
credentials: 'include'
})

profile
Dream of being "물빵개" ( Go abroad for Dance and Programming)

0개의 댓글