본문 바로가기
외부 API/Google

구글 로그인 API

재테크하는 개발자 2022. 2. 19. 18:06

 

 

 

 

구글 API

API를 사용하기 위해 google 콘솔 사이트에서 people API를 검색해서 사용자 인증정보를 만들고 API 키와 Oauth 클라이언트 ID를 생성해주어야 합니다. API키를 생성하고 URI를 추가해줄때 해당 키와 로그인 서비스를 이용할 도메인을 입력해줍니다.

 

 

 

※ 기본적인 구글 SDK 사용하기 위해 필요한 값
( 사이트에서 계정생성하고 Setting 필요 )

accessToken : 웹페이지 사용자의 엑세스 토큰
API key: 구글 API 키
Content: OAuth 클라이언트 ID 키

 

 

① 로그인 API

ID: 사용자 아이디
Name : 이름
Image URL : 유저 이미지 URL
Email : 이메일

 

 

 

로그인 실습

 

 

  1. 구글에서 프로젝트를 생성한 뒤, OAuth 클라이언트 ID를 만들어줍니다.

 

 

 

2. 프로젝트를 생성하고 express를 설치해준뒤 index.js 파일을 생성하고 아래 코드에 입력해줍니다.

 

 

const express = require('express');
const session = require('express-session');
const fileStore = require('session-file-store')(session);
const passport = require('passport')
,GoogleStrategy = require('passport-google-oauth').OAuth2Strategy;

const app = express();

//기본 회원정보 (웹 실무시 데이터 베이스로 대체 하면됨)
let db = [{
	id : '1',
	email : 'test@example.com',
    password : 'test',
    name : 'test',
    provider : '',
    token : '',
    providerId : ''
}];

//구글 api ID, Secret 정보 저장 (구글 개발자 웹 내 앱ID, 시크릿 입력)
const googleCredentials = {
    "web": {
        "client_id": "",
        "client_secret": "",
        "redirect_uris": [
            "http://localhost:3000/auth/google/callback"
        ]
    }
}


//MIDDLEWARE
app.use(express.urlencoded({extended : false}));
app.use(session({
    secret: 'keyboard cat',
    resave: false,
    saveUninitialized: false,
    store : new fileStore()
}));

//PASSPORT - 전용 middleware 추가
app.use(passport.initialize());
app.use(passport.session());

//PASSPORT - 직렬화 
//serializeUser : 로그인 / 회원가입 후 1회 실행
//deserializeUser : 페이지 전환시 마다 실행 
passport.serializeUser(function(user, done) {
    done(null, user);
  });
passport.deserializeUser(function(user, done) {
	done(null, user);
});


//PASSPORT (Google) - 구글 로그인시 정보 GET
passport.use(new GoogleStrategy({
    clientID: googleCredentials.web.client_id,
    clientSecret: googleCredentials.web.client_secret,
    callbackURL: googleCredentials.web.redirect_uris[0]
  },
  function(accessToken, refreshToken, profile, done) {
      console.log(profile);
       let user = db.find(userInfo => userInfo.email === profile.emails[0].value);
       if(user) {
           user.provider = profile.provider;
           user.providerId = profile.id;
           user.token = accessToken;
           user.name = profile.displayName;
       }else {
           user = {
               id : 2,  //랜덤값 필요시, npm shortid 설치 후 shortid.generate() 활용
               provider : profile.provider,
               providerId : profile.id,
               token : accessToken,
               name : profile.displayName,
               email : profile.emails[0].value
           }
           db.push(user);
       }
         return done(null, user);
  }
));

//구글 로그인 버튼 클릭시 구글 페이지로 이동하는 역할
app.get('/auth/google',
  passport.authenticate('google', { scope: ['email','profile'] }));


//구글 로그인 후 자신의 웹사이트로 돌아오게될 주소 (콜백 url)
app.get('/auth/google/callback', 
  passport.authenticate('google', { failureRedirect: '/auth/login' }),
  function(req, res) {
    res.redirect('/');
  });

//홈페이지 생성 (req.user는 passport의 serialize를 통해 user 정보 저장되어있음)
app.get('/',(req,res)=>{
	const temp = getPage('Welcome', 'Welcome to visit...',getBtn(req.user));
    res.send(temp);
});

//로그아웃 페이지 : 로그 아웃 처리 + 세션 삭제 + 쿠키 삭제 후 홈으로 리다이렉션
//passport 패키지로 인해 req.logout()으로 로그아웃 기능 구현 가능
app.get('/auth/logout',(req,res,next)=>{
    req.session.destroy((err)=>{
        if(err) next(err);
        req.logOut();
        res.cookie(`connect.sid`,``,{maxAge:0});
        res.redirect('/');
    });
});

//에러처리
app.use((err,req,res,next)=>{
  if(err) console.log(err);
  res.send(err);
});

//로그인 or 로그아웃 상태에 따른 버튼 생성
const getBtn = (user) =>{
    return user !== undefined ? `${user.name} | <a href="/auth/logout">logout</a>` : `<a href="/auth/google">Google Login</a>`;
}

//페이지 생성 함수
const getPage = (title, description,auth)=>{
	return `
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>${title}</title>
        </head>
        <body>
            ${auth}
            <h1>${title}</h1>
            <p>${description}</p>
        </body>
        </html>
        `;
}

//SERVER
app.listen(3000,()=>console.log('http://localhost:3000'));ㅇ

 

 

 

 

 

3. 생성했을때 클라이언트 ID와 시크릿 키를 코드에 입력해줍니다.

 

 

 

 

 

4. 서버를 구동시키고 접속해줍니다.

 

 

 

5. 아래와 같이 로그인되어있는 정보 또는 다른 계정으로 접속해줍니다.

 

 

 

 

 

6. 로그인이 완료되면 기본 정보를 가져올 수 있습니다.

 

 

 

 

 

 

 

 

 

저작자표시

'외부 API > Google' 카테고리의 다른 글

구글 내 정보 가져오기 API  (0) 2022.02.21
[Google API] refresh_token을 이용해서 access_token 가져오기  (0) 2020.09.05
[Firebase] dynamic-link REST API 사용해서 데이터 가져오기  (0) 2020.09.04

'외부 API/Google' Related Articles

티스토리툴바