google OAuth 사용

※이글의 예시들은 Udemy의 Angela Yu의 "The-Complete-Web-Development-Bootcamp" 강의의 내용을 정리한 것입니다. 

 

지난번 포스트에 OAuth에 대해 설명하였다. 이번에는 google OAuth를 사용하는 법을 알아볼 것이다. 쿠키와 세션이 미리 셋팅되어 있어야 한다.

 

가장 먼저 사용하고 있는 프로젝트에  passport-google-oauth20을 npm을 사용하여 설치하였다.

http://www.passportjs.org/packages/passport-google-oauth20/

 

이후, 위 홈페이지의 문서에 나와있는 사용법을 따라가면 된다.

 

1. 구글 개발자 콘솔에 들어간다.

2. 새로운 프로젝트를 생성한다.

3. OAuth 동의 화면에 들어가서 애플리케이션 이름을 정해준다.

이때, google API의 범위는 구글로부터 어떤 데이터에 액세스할것인지의 목록이다. 더 많은 데이터에 액세스하고 싶다면 추가하기를 눌러서 해당하는 API를 추가해주면 된다.

저장해준다.

 

4. 사용자인증정보에 들어가서 사용자인증정보라고 써진 파란색 버튼을 누른다. 이후, OAuth 클라이언트 ID를 누른다.

해당하는 애플리케이션 유형을 선택해주고, 이름, 도메인을 입력해준다. 클라이언트 애플리케이션의 url은 로컬호스트에서 접속할 것이므로 http://localhost:3000으로 해주었다. 승인된 리디렉션 url은 구글을 통해 사용자가 인증된 후 리디렉션되는 경로이다 .

http://localhost:3000/auth/google/secrets 라고 적었다.

 

생성을 누르면 client ID와 클라이언트 보안 secret을 얻게 된다. 이는 아무도 크롤링할 수 없고 볼 수 없는 곳에 저장해둔다. 나같은 경우에는 .env 파일에 저장해두고 git ignore로 add되지 못하게 하였다.

 

*.env는 node 버전에 맞게 dotenv 패키지를 설치하고, config하는 과정까지 거쳐서 만든 파일이다. 

 

 

5. 클라이언트 id와 secret을 얻었으니 문서에 나와있듯이 app.js에 google strategy를 require해준다.

const GoogleStrategy = require('passport-google-oauth20').Strategy;

6. passport serializer와 deserializer를 셋팅해주었던 코드 바로 아래에 아래 코드를 삽입해준다.(수정될 예정)

passport.use(new GoogleStrategy({

	//env에 적어놓은 클라이언트 ID와 secret
    clientID: process.env.CLIENT_ID,
    clientSecret: process.env.CLIENT_SECRET,
    callbackURL: "http://localhost:3000/auth/google/secrets"//google API에 적었던 redirection url과 똑같이
  },
  function(accessToken, refreshToken, profile, cb) {
    User.findOrCreate({ googleId: profile.id }, function (err, user) {
      return cb(err, user);
    });
  }
));

7. 여기서 user.findOrCreate은 임의로 만든 function이다. 우리는 이걸 대체하기 위해 mongoose의 대체할 패키지를 설치해줄 것이다.

npm i mongoose-findorcreate

8. require해준다.

const findOrCreate = require("mongoose-findorcreate");

9. schema에 플러그인도 설치해준다.

userSchema.plugin(findOrCreate);

 

지금까지는 backend의 셋팅이었다. 이제 frontend에서 구글에 로그인하게 할 수 있는 방법은 무엇일까.

 

각자 페이지의 가입,로그인 화면에서 자유롭게 버튼을 만들고

href="/auth/google" 부분만 버튼에 추가해주면 된다. 그리고 app.js로 되돌아온다.

 

10. /auth/google route에 대한 get을 추가해줄 차례이다.

app.get("/auth/google",
    passport.authenticate('google',{scope:["profile"]})
);

문서에 나와있는 대로 복사해주었다.

 

11. redirect route인 "auth/google/secrets" 에 대한 get도 추가해준다.

app.get('/auth/google/secrets',

passport.authenticate('google', { failureRedirect: '/login' }),

function(req, res) {

// Successful authentication, redirect home.

res.redirect('/');

});

 

12. 이렇게 했을 때 serialize 에러가 뜬다. 그 이유는 내가 passport-local-mongoose serializer의 축약 버전을 이용했기 때문이다. 하지만, passport.js의 문서를 보고 완전한 코드를 사용해서 다른 strategy를 사용해도 충돌이 일어나지 않도록 바꾸어준다.

 

passport.serializeUser(function(user, done) {
    done(null, user.id);
  });
  
passport.deserializeUser(function(id, done) {
    User.findById(id, function(err, user) {
      done(err, user);
    });
});

 

이제 구글로부터 원하는 데이터를 가져올 수 있다.