댓글
-
완료 -
최고입니다. 감사합니다 ^^
-
if( typeof req.user != "undefined" && typeof req.user.displayname != "undefined") 로 걸러보세요. 이 방법도 안되면
그냥 let user = ''; user = req.user; 로 받아서 확인해보심이 -
로그인후 웰컴페이지로 이동할때
if( req.user&&req.user.displayname ){
res.send(`
<h1>Hello, ${req.user.displayName}</h1>
<a href="/auth/logout">logout</a>
`);
}
이부분이 if문이 언디파인드가 되면서 로그인안된 웰컴이 뜨던데 같은 경우인 분이 계신가요??
콘솔로 찍어보면 req.user에 유저값이 잘들어오고req.user.displayname 에 해당유저의 디스플레이네임이 정상적으로 잘찍히는데 req.user && req.user.displayname의 값은 언디파인드 라고 나옵니다.. 이게대체 무슨경우인지 이해가 안되네요; -
맞습니다.. 비동기 때문이었어요.
fete님 문제가 해결되었다니 다행입니다 -
로그인시 이름이 안뜨는 welcome 페이지로 가는 문제가 비동기 때문이였군요
antil님 덕분에 해결했습니다. -
페이스북 로그인 만들기 상당히 쉽네요!
-
너무 늦게 답변을 달아드리네요
해결책을 꼭 찾으신 상태이길 바랍니다.
그래도 님께서 못찾으셨거나 다른 분들도 참고하실 수 있도록 해결책을 보면은요
app.get('/auth/facebook/callback',
passport.authenticate('facebook', { failureRedirect: '/auth/login' }),
(req, res) => {
req.session.save(() => {
res.redirect('/welcome');
})
});
이렇게 해주시는 겁니다. 그러면 로그인이 잘 된 상태로 welcome 페이지로 넘어가시는 걸 볼 수가 있어요.
화이팅!!! -
2018.6.2 현재 이 강의 내용으로 그대로 해도 아무런 에러없이 잘 진행되는 것을 확인했습니다.
페이스북 앱도 오늘 처음 만들었어요~~ -
최근에 페이스북 앱을 새로 만드셨다면 로그인 설정 -> 클라이언트 OAuth 설정 부분에서 HTTPS 적용이 강제로 "예"로 설정이 되어있습니다. 그래서 로컬에서 작업하시더라도 인증서를 생성하셔야 합니다.
또한, 리디렉션 URI에 Strict 모드 사용이 강제로 "예"로 설정되어 있기 때문에 "유효한 OAuth 리디렉션 URI" 설정 부분에 반드시 정확한 callbackURL을 등록해주셔야 합니다. 이 강의에서는 https://<도메인 주소>/auth/facebook/callback을 등록해주시면 됩니다.
1. 인증서 생성
https://jamielinux.com......tml
링크에 가셔서 "Sign server and client certificates" 부분까지 따라하세요.
* 주의사항
Create the root pair, Create the intermediate pair 에 openssl.cnf 라는 설정파일이 있는데
두 개의 설정파일에 추가해야 할 사항이 있습니다.
[ v3_ca ], [ v3_intermediate_ca ], [ server_cert ] 부분에
아래 두 줄을 추가해줍니다.
extendedKeyUsage = serverAuth
subjectAltName = @alt_names
또한, 독립적으로, 아래 코드를 추가합니다.
----------------------------------------
[alt_names]
DNS.1 = http://www.example.com
DNS.2 = example.com
----------------------------------------
위 주의사항을 지키지 않으시면, 크롬 개발자 콘솔의 security 탭 부분에 에러가 뜰 겁니다.
에러내용은 결국 인증서에 "Subject Alternative Name" 항목이 없다는 겁니다.
"View certificate"을 해서 details를 보시면 없을 겁니다.
이렇게 하시면 인증서가 생성이 될 것이고 필요한 파일은 아래와 같습니다.
-----------------------------------------
ca-chain.cert.pem
http://www.example.com.key.pem
http://www.example.com.cert.pem
-----------------------------------------
생성된 3개의 파일을 server_side_javascript에 ssl이라는 폴더를 생성하고 그리로 복사하세요.
권한 때문에 복사가 제대로 되지 않으시면 커맨드창에서 cp 명령어로 복사해옵니다.
2. 크롬 브라우저에 인증서 등록하기
크롬 브라우저 settings -> Advanced를 들어가시면 "Manage certificates"를 클릭하세요.
"AUTORITIES"탭을 클릭하시면 import로 인증서를 등록하실수 있습니다.
반드시 "ca-chain.cert.pem" 파일을 등록하세요. 왜냐면 root certificate, intermediate certificate, server certificate 이 체인으로 묶여서 한꺼번에 등록이 되기 때문입니다.
3. app_passport_file.js 에 생성한 인증서 읽어오는 코드 추가하기
파일 상단에 아래 코드를 추가하세요.
------------------------------------------
var fs = require('fs');
var https = require('https');
------------------------------------------
파일 맨 아래에 아래 코드를 추가하세요.
-----------------------------------------------------------------------
var options = {
ca: fs.readFileSync('ssl/ca-chain.cert.pem'),
key: fs.readFileSync('ssl/www.example.com.key.pem'),
cert: fs.readFileSync('ssl/www.example.com.cert.pem'),
passphrase: 'secretpassword'
};
https.createServer(options, app).listen(443, () => {
console.log('Connected 443 port !');
});
---------------------------------------------------------------------
* 주의사항
passphrase 속성에 여러분이 인증서를 생성할 때 설정한 비밀번호를 입력해주셔야 합니다.
개개인마다 생성할때 비밀번호를 다르게 설정할 수 있으므로 주의하세요.
만약, 인증서 생성하실때 해당 링크 튜토리얼을 그대로 따라하셨다면
위와 같이 passphrase는 secretpassword가 됩니다.
4. 로컬호스트 IP에 도메인 연결하기
커맨드 창을 열고 sudo vim /etc/hosts 파일을 여시고,
아래 코드를 맨 아래에 추가하세요.
------------------------------------------
127.0.0.1 http://www.example.com
------------------------------------------
* 주의사항
만약 인증서 생성시 Common Name에 도메인 주소를
다르게 생성하셧다면 Common Name과 일치하는 주소로
host를 등록해주셔야 합니다.
위의 모든 과정을 따라하셨다면,
아마 페이스북 API에 잘 접속이 되실 겁니다.
마지막으로 반드시 페이스북 앱의 로그인 설정에서
"유효한 OAuth 리디렉션 URI" 에
https://<도메인 주소>/auth/facebook/callback
을 등록해주시는걸 까먹지 마세요.
이 부분 때문에 몇일을 삽질했습니다.
그리고 앱 설정 -> 기본설정에서 "앱 도메인", "사이트 URL", "개인정보처리방침 URL" 에 모두
host에 등록된 도메인 주소를 입력해주세요.
또한, 앱 설정 -> 고급설정에 "앱 시크릿 코드 요청"을 "아니요"로 해주시고,
리디렉션 공유 화이트리스트에서 "도메인 간 공유 리디렉션 허용"을 "예"로
해주시면 아마 잘 되리라고 생각이 됩니다.
댓글 등록할때 www 앞 부분에 http://를 자동으로 붙여버렸는데,
두 부분에 http://를 제거해주세요.
---------------------------------------------------
DNS.1 = http://www.example.com
127.0.0.1 http://www.example.com
http://www.example.com.key.pem
http://www.example.com.cert.pem
--------------------------------------------------- -
지금 페이스북에서 개인정보 유출 문제로 developer에서 앱 설정이 모두 비활성화 되었네요.
제가 따로 확인하기는 힘들지만 말씀하신 부분을 보면 https가 필요하다는 내용으로 봐서
아마 상단 설정 중 enforce https를 체크하신게 아닌가 싶습니다.
그걸 해제하면 http도 입력 할 수 있습니다. -
루팡님 답변에 대해 재질문드립니다.
제 Developers 페이지가 영문으로 되어있어서..
Facebook Login - Settings - Valid OAuth Redirect URIS 에
http://localhost:3003/ 을 입력하고 enter를 입력하면,
HTTPS is required for all Redirect URIs 라는 풍선과 함께 빨간색 x 표가 입력됩니다.
그리고 새로고침을 하게 되면 입력된 내용이 모두 지워지는데, 별도의 저장 방법이 있나요? 저장하기 같은 아이콘이나 버튼이 따로 보이지는 않아서요. -
저도 같은에러로 헤매고 있는데요...유효한 OAuth 리디렉선에 이거넣고 ==> http://localhost......ack 로 설정한뒤 변경내용 저장 ==> 새로고침 ==> https://localhost......ck.. https로 자동변경?이 되네요 ;; ㅠㅠ //// 결국 https서비스를 제공할 수 있도록 openSSL 설정을 새로해서 해결했습니다~ ;;
-
저도 유효한 URI를 추가하라고 하네요.. 아래 알려주신 방법 다 안되네요 ㅠㅠ
페이스북에서 URI 리디렉션 유효성 검사 시도해도 http://localhost......ok, login 등 이런 주소가 다 유효하지않은 주소라고 뜨네요
하루동안 이것저것 해보다가 해결했습니다.
앱 대시보드에서 좌측 네비게이션에서 페이스북로그인의 설정에 들어가세요
거기서 유효한 OAuth 리디렉선 URI에 http://localhost......을 넣고
저장해주세요.상단 설정 중 Enforce https만 빼고 다 예로 하시면 됩니다.
이러면 로그인이 가능하네요. -
안녕하세요 강의를 접하고 마지막에 페이스북으로 로그인이 넘어가는 와중에
"차단된 URL: 리디렉션 URI가 앱의 클라이언트 OAuth 설정의 화이트리스트에 없으므로 리디렉션하지 못했습니다. 클라이언트 및 웹 OAuth 로그인이 설정되었는지 확인하고 모든 앱 도메인을 유효한 OAuth 리디렉션 URI로 추가하세요."
이런 에러를 접해서 아래 적어주신분의 방법도 써보고 인터넷에서 찾아보기도 했는데 어떤 방법으로도 넘어가지질 않습니다 ㅠㅠㅠ 답변 부탁드려요!! -
이고잉님 강의에서와 같이 로그인을 하였을때 바로 로그인 된 welcome 페이지로 가지 않고 로그인되지 않은 welcome페이지로 가는 경우가 종종 발생하더라고요.
마지막 강의 8분 30초 쯤 터미널 실행화면이 나오는데 그때와 마찬가지로 passport.serializeUser()만 실행되고 deserializeUser는 실행되지 않는 것을 볼 수 있는데 왜 이런 현상이 발생하는 걸까요?
혹시 해결책을 아시는 분이 계신가요? -
앱 설정 안 됨: 이 앱은 아직 개발 모드 상태이며 회원님에게는 액세스 권한이 없습니다. 등록된 테스트 사용자로 전환하거나 앱 관리자에게 권한을 요청하세요.
라고 뜨면서 로그인이 안되네요... ㅠㅠ 코드는 이고잉님 코드 그대로입니다.... 구글 검색한뒤, 앱을 모두공개로 바꾸면 된다고도 해서 바꿨는데도 안되네요...ㅎㅎ
아무래도 이 강의는 패스하는걸로 ㅠㅠ 많이 어렵네요... -
이게 저도 안되길래 계속 로그인 시도를 하다보니 되거든요? 왠지는 잘 모르겠네요. 그래서 로그인 성공 횟수가 극히 드물어요.
-
아이디 재밌네요 ㅋㅋㅋ
-
"URL을 읽어들일 수 없음: 앱 도메인에 포함되어 있지 않은 URL입니다. 이 URL을 읽어들이려면 앱 설정에서 앱 도메인 필드에 앱의 모든 도메인과 서브 도메인을 추가하세요." 이 에러가 나타난다면 아래의 링크에 들어가서 해결하세요.
https://jwkcp.github.io......de/ -
도메인에 'localhost'을 쓰라고 해서 썼는데 등록되지 않은 URL이라고 뜬다면 'localhost:내가 쓴 포트번호'로 작성해주세요
인터넷에 접속할 때는 url과 포트번호가 필요하기 때문에 오류나서 해봤는데 되네요 -
이런 페이스북에서 콜백을 보낼데 리다이렉트 에 #_=_ 요런걸 보네서
경로가 깨져요. 왜그러죠... 제거 하려면 어디서 하나요 ? -
TypeError: Cannot read property '0' of undefined 페이스북들어갈때 이 에러가 자꾸 뜨는데 뭐때문에 그런가요??
-
facebook 로그인이 제대로 안되면, callback 설정을 이런식으로 해야 잘 돌아갑니다. (아래 TravelDreammer님이 말씀하신 내용과 동일합니다.)
app.get(
'/auth/facebook/callback',
passport.authenticate(
'facebook',
{
// successRedirect: '/welcome',
failureRedirect: '/auth/login'
}
),
function(req,res){
req.session.save(function(){
res.redirect('/welcome')
})
}
); -
새 계정 파는게 저에겐 핵심이었습니다 ㅎㅎ
추가로 방문기록을 삭제해서 재실행 해보시는 것도 추천합니다 -
맥에서는 deserializeUser가 호출되어 세션에 저장이 되는데 윈도우에서는 deserializeUser호출이 안되어 세션에 저장이 안됩니다. 혹시 이 문제 푸시는분 계신가요?
-
감사합니다! 다시 해보니 코드의 문제는 아니였습니다~ 제 페이스북계정에 뭔가 문제가 있었던 것 같습니다
이고잉님처럼 페이스북에서 정보제공하는 팝업창도 뜨지 않더라구요~ 근데 새로운 계정을 파서 하니 정상적으로 됩니다~! 댓글 감사드립니다~! -
travel님 거의 대부분 똑같이 했다고 하시는 부분에 대부분 똑같이 하지 않습니다. 정말 똑같이 했는지 확인해보려면 깃허브가셔서 이고잉님이 올리신 코드를 아예 가져와서 실행하면 되는 것을 보고 현자타임이 옵니다.
-
그리고 또한 똑같이 했음에도 email의 정보가 주어지지 않습니다..!! email이라는 항목이 아예 console에 나타나지도 않구요! stackoverflow등 모든 곳을 뒤져봤지만 이고잉님과 같은 코드이며 저는 실행이 되지 않네요 ㅠㅠ
그리고 scope를 추가했을때 다시 로그인을 할때 한번 더 사용자가 허용하는 창도 뜨지가 않습니다.! 이것은 계정의 문제인가요?? -
안녕하세요 이고잉님~ 답변이 절실합니다!! ㅜㅜ다름이 아니라 인증 수업을 들으면서 이전 local에서도 그렇고 이번 통합인증 수업에서도 그렇고
그냥 successRedirect:'/welcome'을 해주면 로그인 성공 후 이름이 출력이 되지 않는데.
successRedirect : '/welcome'부분을 주석처리 하고 passport.authenticate 미들웨어 뒤에 callback함수로 function(req, res){
req.session.save(function(){
res.redirect('/welcome');
});
}
이런식으로 session을 save한 후에 redirect해주면 정상적으로 이름이 출력이 됩니다! 이고잉님의 코드에서는 이러한 과정을 해주지 않아도 실행이 되던데 차이점이 무엇인가요? -
혹시 라우트쪽에서 안되는분 있으시면.
// User.findOrCreate(..., function(err, user) {
// if (err) { return done(err); }
// done(null, user);
// });
이거 해보고 해보세영.
저 이거때문에 좀 해맸네요 ㅠㅠ
(뒤쪽 강의에 나오긴함, 해당 부분 소스코드에도 있어여) -
혼자 공부하기 어려운 내용이었는데 감사합니다! -
두근두근합니다!
-
감사합니다^^
-
잘보았습니당! 제가 블로그 프로젝트를 하고 있는데. 제가 로그인기능을 구현할때, 이 영상이 있었으면 얼마나 좋았을까요 ㅠ 수많은 삽질과 시간투자끝에 성공은 하였지만 .. 어찌하였든! 한번 해본것을 다시 보게 되니깐 정리가 되는 느낌이였습니다!
버전 관리
| egoing |
| 현재 버전 | |
|---|---|
| 선택 버전 |
