자바스크립트와 Vercel을 사용한 사회 로그인 구현하기

10 Nov 2023

javascript

현대의 웹 애플리케이션에서는 소셜 로그인을 통한 사용자 인증이 매우 흔한 기능입니다. 이를 통해 사용자는 간편하게 로그인할 수 있고, 개발자는 별도의 인증 시스템을 구축할 필요 없이 외부 서비스를 활용할 수 있습니다.

이번 블로그 포스트에서는 자바스크립트와 Vercel을 사용하여 사회 로그인을 구현하는 방법을 알아보겠습니다.

1. Vercel 프로젝트 설정하기

먼저, Vercel에 프로젝트를 생성하고 기본 설정을 해야합니다. Vercel은 정적 페이지 호스팅 및 서버리스 함수 기능을 제공하는 플랫폼입니다.

Vercel 계정에 로그인하고, 프로젝트 생성을 위해 “New Project”를 클릭합니다.
프로젝트를 선택한 후, GitHub, GitLab, 또는 온보딩 프로세스 중 하나를 선택합니다. 만약 새로운 프로젝트를 만들려는 경우, 디렉토리를 선택한 후 “Create”를 누릅니다.
“Build Settings”에서 프로젝트를 구성합니다. 이 단계에서 “Output Directory”를 설정하는 것이 중요합니다. 기본적으로 /out으로 설정되어 있습니다.

2. 소셜 로그인 라이브러리 설치하기

프로젝트를 로컬 환경으로 가져와서 소셜 로그인을 구현하기 위해 다음과 같이 진행합니다.

터미널을 열고 프로젝트 디렉토리로 이동합니다.
npm install 명령을 실행하여 필요한 라이브러리를 설치합니다. 이때, 소셜 로그인을 지원하는 라이브러리 중 하나를 선택하여 설치합니다. 예를 들어, passport와 passport-google-oauth20 라이브러리를 설치하려면 다음과 같이 실행합니다.
```
npm install passport passport-google-oauth20
```

3. 소셜 로그인 구현하기

이제 소셜 로그인을 구현하는 작업을 시작합니다.

애플리케이션에서 사용할 소셜 로그인 프로바이더에서 클라이언트 ID와 클라이언트 비밀번호를 발급받습니다. 여기서는 Google OAuth 2.0을 사용하는 예제를 설명하겠습니다.
애플리케이션 기본 경로에서 index.html 파일을 생성하고, 다음과 같이 소셜 로그인 버튼을 추가합니다.
```
<a href="/auth/google">Google 로그인</a>
```

서버 측에서 소셜 로그인을 처리하기 위해 server.js 파일을 생성하고, 다음과 같이 작성합니다.

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

const app = express();

// Google 로그인 설정
passport.use(new GoogleStrategy({
  clientID: 'YOUR_GOOGLE_CLIENT_ID',
  clientSecret: 'YOUR_GOOGLE_CLIENT_SECRET',
  callbackURL: '/auth/google/callback',
}, (accessToken, refreshToken, profile, done) => {
  // 로그인 성공시 처리할 작업 수행
  // 예: 사용자 정보로 회원 가입 또는 로그인 처리
  // 사용자 정보는 profile 변수에 담겨 있습니다.
}));

// 로그인 요청 처리
app.get('/auth/google', passport.authenticate('google', { scope: ['profile'] }));

// 로그인 콜백 처리
app.get('/auth/google/callback', passport.authenticate('google', { failureRedirect: '/login' }), (req, res) => {
  // 로그인 성공 후 리다이렉트 처리
  res.redirect('/dashboard');
});

// 서버 실행
app.listen(3000, () => {
  console.log('서버가 3000 포트에서 실행 중입니다.');
});

프로젝트를 Vercel에 배포합니다.

4. 로컬 환경에서 테스트하기

로컬 환경에서 애플리케이션을 실행하여 소셜 로그인 기능을 테스트해보세요.

터미널을 열고 프로젝트 디렉토리로 이동합니다.
npm start 명령을 실행하여 서버를 시작합니다.
웹 브라우저에서 http://localhost:3000으로 접속하여 애플리케이션을 확인합니다.
소셜 로그인 버튼을 클릭하면 해당 소셜 로그인 프로바이더로 리다이렉트되고, 사용자 인증을 위한 절차를 수행할 수 있습니다.

마무리

이제 자바스크립트와 Vercel을 사용하여 사회 로그인을 구현하는 방법을 알아보았습니다. 소셜 로그인은 사용자 인증을 간편하게 처리할 수 있으며, 외부 서비스를 활용하는 데도 유용합니다.

더 자세한 내용은 Vercel 문서와 각 소셜 로그인 프로바이더의 개발자 문서를 참조하시기 바랍니다.

#javascript #webdevelopment