구글 OAUTH 2.0 웹 로그인

구글 웹 로그인을 구현할 일이 앞으로 있어 집에서 미리 연습해 보았습니다.

이상하게도 인터넷 예전 소스들은 제대로 작동되는게 없어서 =_=..
최근에 구글 API가 업데이트된 것 때문인지도 모르겠네요.
참고로 이 테스트는 2024. 1. 20일에 수행하였습니다.해외 소스를 하나 확인하여 공유드립니다.
뭐 크레이도 나중에 한참 헤메지 않고 바로 사용해 먹으려는(?) 의도이기도 하지요 ㅎㅎ본 게시글은 개인 PC에서 XAMPP 를 설치한 상태에서의 연동과정을 진행하고 있습니다.

---

써머리! ( 요약 )

---

OAuth 란 Open Authorization 의 준말인데요.
한국어로 '오픈인증'입니다. 영어 발음으로 '오어쓰'인데요.
뭐 익숙한 방식대로 부르셔도 무방할것 같습니다 :)

구글 로그인, 카카오 로그인, 네이버 로그인 등이 바로 OAuth에 해당하지요.

구글의 OAuth로그인을 사용하려면 준비 과정이 좀 많이 필요한데요.
아래 순서로 진행해야 합니다. 참고로 PHP 에서의 연동을 다루고 있습니다.

- 구글 콘솔에서 작업 -

1. 프로젝트 생성
2. OAuth 동의화면 생성
3. 사용자 인증 OAuth2.0 클라이언트 ID 생성

- 서버 작업 -

4. Composer 설치 ( php 7.4 이상 필요 )
5. Composer 로 구글 라이브러리 설치
6. 소스 구현

거두절미하고 바로 본론으로 고우!

---

1. 프로젝트 생성

---

먼저 아래 구글 API 페이지로 이동합니다.

https://console.cloud.google.com/apis

연습용이니 새로운 프로젝트를 생성해볼텐데요.
기존 프로젝트에 적용하려면 이 단계는 건너 뛰어도 됩니다.

화면 상단 이 부분을 선택하고,

팝업창 우측 상단 '새 프로젝트'를 선택합니다.

그리고 나서 프로젝트 이름을 입력, 만들기 버튼을 클릭하면 됩니다.

그리고 다시 프로젝트 목록을 선택해 금방 만든 프로젝트를 클릭해 주시면 됩니다.
금방 만든 프로젝트가 기본 선택되지는 않더라구요.

---

2. OAuth 동의화면 생성

---

 

OAuth 동의화면 - 외부 선택 - 만들기를 선택,

앱 이름, 사용자 메일, 개발자 이메일 3개 정보만 입력하면 개발용으로는 작동하는 것 같습니다.
서비스 오픈시 추가 정보를 더 입력해야 하는지는 확인 후 향후 시간되는대로 공유드리겠습니다.
저장 후 계속 버튼을 선택해 주세요.

범위란은 웹페이지에서 로그인하려는 사용자에게 요청할 개인정보 단계인데요.
꼭 필요한 정보가 아니면 되도록 요청하지 않는 것이 좋겠지요 ? :)

[ 범위 추가 또는 삭제 ] 버튼을 클릭하고, 원하는 정보를 체크합니다.
여기서는 이메일 주소, 개인정보, 오픈id 를 요청하는 정책으로 가도록 하겠습니다.

이어서 화면 하단의 저장 후 계속 선택,

이어서 구글 계정으로 로그인을 테스트할 테스트 사용자를 입력하는 단계입니다.
ADD USER 버튼을 선택, 본인의 구글 메일 주소든 동료의 구글 메일 주소든 추가해 주세요.
테스트 단계에서는 등록한 메일 주소만 구글 로그인이 가능합니다.

그리고 역시 저장 후 계속 클릭하면 완료!

---

3. 사용자 인증 OAuth2.0 클라이언트 ID 생성

---

이제 사용자 인증 ID를 생성할 차례입니다.
사용자 인증 정보 - 사용자 인증 정보 만들기 - OAuth 클라이언트 ID 선택 후,

애플리케이션을 웹 애플리케이션,
이름은 적당히 지어줍니다. 크레이는 CraySample 로 지어주었습니다.

자, 이제부터가 중요한데요.
'승인된 자바스크립트 원본'의 URI 추가를 선택, 구글 로그인을 허용할 본인의 홈페이지 URL을 입력하여야 합니다.

윈도우 PC에서 XAMPP 로 개발용으로 진행하시는 경우 그냥 http://localhost 를 입력해주시면 됩니다.

이어서 '승인된 리다이렉션 URI'는 구글 로그인을 마친 다음 되돌아올 페이지입니다.
이 되돌아올 페이지는 사전에 미리 개발되어 있어야 하는데요.
구글에서 각종 값들을 받아 보여주거나 처리할 목적으로 사용될 수 있습니다.

여기서는 http://localhost/login.php 로 입력하도록 하겠습니다.

그리고 나서 만들기 버튼을 클릭하시면 됩니다.

---

4. Composer 설치 ( php 7.4 이상 필요 )

---

다음으로는 PHP 에서 컴포저를 설치해야 하는데요.
당연히 PHP는 설치되어 있다고들 생각되나, 혹시라도 PHP 설치가 안된 경우 아래 게시글을 참조하여
PC에 XAMPP 를 설치해주시면 PHP외에도 여러가지 요소들이 함께 설치됩니다.

https://itadventure.tistory.com/627

php 확장 기능 대부분은 컴포저(Composer)라는 걸 먼저 설치해야 사용할 수 있습니다.
컴포저가 뭐냐구요? 간단하게 표현하자면 확장 기능 인스톨러(설치 프로그램)인데요.
정확한 말로는 PHP 의존성 관리자(A Dependency Manager for PHP)라고 합니다.
뭐.. 어려운 말은 외우지 않으셔도 됩니다 :)

컴포저 공식 사이트에서 설치 프로그램을 다운받을 수 있는데요.
아래 사이트에 접속하신 다음 Download (다운로드) 버튼을 눌러주시면 됩니다.

https://getcomposer.org/

아래 화면에서는 보통 Install for all users ( recommended ) 모든 유저에게 설치(추천) 을 선택하시구요.

대부분은 Next (다음) 버튼을 눌러서 넘기되 아래 화면이 등장하면 Next  버튼이 눌려지지 않을 겁니다.
그 때는 Add this PHP to your path ( 이 PHP 를 귀하의 path 에 추가 ) 를 체크해야 
Next 버튼이 활성화됩니다.

마지막 Finish 버튼을 누르면 컴포저 설치는 끝-

부가적으로 윈도우가 아닌 CentOS7(리눅스) 에서 컴포저 설치 명령어는 아래와 같습니다.

curl -sS https://getcomposer.org/installer | php
sudo mv composer.phar /usr/bin/composer

---

5. Composer 로 구글 라이브러리 설치

---

이어서 컴포저를 이용해 구글 라이브러리를 설치해야 하는데요.
WINDOW키 + R 을 누른 다음, cmd 를 타이핑하고

 

Ctrl + Shift + Enter 키를 타이핑하여 관리자 권한으로 실행합니다.

그리고 이어서 XAMPP 홈페이지 기본 폴더로 이동하시면 되는데,
C:\xampp\htdocs\ 폴더가 보통 기본 폴더입니다.

아래 명령을 타이핑하여 이동하면 됩니다.

cd c:\xampp\htdocs

그리고 아래 컴포저 명령을 실행하면 구글 라이브러리가 쫘악- 설치됩니다.

composer require google/apiclient:^2.15.0

위와 같이 깔끔하게 설치되면 문제가 없으나 가끔 에러가 뜨는 경우가 있는데요.
그 때는 위의 명령어를 다시 실행해주시면 대부분 설치가 잘 됩니다.

---

6. 소스 구현

---

이제 구글 연동 소스만 적용하면 됩니다.
아래와 같이 4개의 소스로 기본 로그인 연동이 가능한데요.

- config.php : 구글 연동 설정
- login.php : 구글 로그인
- home.php : 로그인 성공 후 보여줄 페이지
- logout.php : 구글 로그아웃 페이지

모두 C:\xampp\htdocs\ 폴더에 위치해 주시면 됩니다.

config.php

<?php
// include your composer dependencies
require_once 'vendor/autoload.php';

$client = new Google\Client();
$client->setClientId("클라이언트ID");
$client->setClientSecret("클라이언트보안비밀번호");
$client->setRedirectUri('http://localhost/login.php');
$client->addScope("email");
$client->addScope("profile");

* 클라이언트 ID 와 클라이언트 보안 비밀번호는 사용자 인증정보의 OAuth 2.0 클라이언트 ID를 클릭하여 나오는 팝업 창에서 확인하실 수 있습니다. 이 내용을 각각 복사해 넣어주시면 됩니다.

login.php

<?php
require('./config.php');
$login_url = $client->createAuthUrl();
if (isset($_GET['code'])){
  session_start();
  $token = $client->fetchAccessTokenWithAuthCode($_GET['code']);
  if(isset($token['error'])){
    header('Location: login.php');
    exit;
  }
  $_SESSION['token'] = $token;
  header('Location: home.php');
  exit;  
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>구글 OAuth 로그인</title>
  <style>
    a{
      all: unset;
      cursor: pointer;
	  padding: 5px;
      background-color: #f9f9f9;
      border: 1px solid black;
      border-radius: 5px;
    }    
  </style>
</head>
<body>
    <a href="<?= $login_url ?>">구글 로그인</a>
</body>
</html>

home.php

<?php
session_start();
if(!isset($_SESSION['token'])){
  header('Location: login.php');
  exit;
}
require('./config.php');

$client->setAccessToken($_SESSION['token']);

if($client->isAccessTokenExpired()){
  header('Location: logout.php');
  exit;
}
$google_oauth = new Google_Service_Oauth2($client);
$user_info = $google_oauth->userinfo->get();
?>
<!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>
  <style>
    ul{
      list-style: none;
    }
    li{
      margin-bottom: 5px;
    }
  </style>
</head>
<body>
  <ul>
    <li><img src="<?=$user_info['picture'];?>"></li>
    <li><strong>아이디:</strong> <?=$user_info['id'];?></li>
    <li><strong>이름:</strong> <?=$user_info['givenName'];?> <?=$user_info['familyName'];?></li>
    <li><strong>E-mail:</strong> <?=$user_info['email'];?></li>
    <li><a href="./logout.php">Logout</a></li>
  </ul>
</body>
</html>

logout.php

<?php
session_start();

if(!isset($_SESSION['token'])){
  header('Location: login.php');
  exit;
}

require('./config.php');
$client = new Google\Client();
$client->setAccessToken($_SESSION['token']);
$client->revokeToken();
$_SESSION = array();
if (ini_get("session.use_cookies")) {
  $params = session_get_cookie_params();
  setcookie(session_name(), '', time() - 42000,
      $params["path"], $params["domain"],
      $params["secure"], $params["httponly"]
  );
}

session_destroy();
header("Location: login.php");
exit;

---

확인!

---

이제 localhost/login.php 페이지를 띄운 다음 [구글 로그인] 버튼을 클릭하면,

구글 계정 선택 화면이 뜹니다.
사용자로 하여금 이 프로젝트에 로그인 할 것인지 문의하는 것이지요.

테스트 프로젝트라면 아래 화면이 노출될 수 있는데요.
계속 버튼을 클릭하고,

실제 아래 화면이 사용자에게 노출되는 것입니다.

그러면 아래와 같이 구글의 정보를 불러와 화면에 뿌려주는 것을 보실 수 있습니다.

---

마무~리

---

내용이 꽤나 길기 때문에 한번 해보고 안되네~ 하고 포기하지 마시고,
몇번 시도해 보시면 될겁니다.

특히 주의하실 부분은 앞에서 테스트 사용자로 등록한 구글 메일 주소로 로그인을 했는지,
config.php 에서 사용하는 키가 바뀌지는 않았는지,
컴포저 설치시 오류가 났는데도 그냥 지나치지 않았는지 등의 요소들이 있습니다.

아무쪼록 방문해주신 모든 분들께 감사드립니다. 
도움이 되셨다면 공감!, 댓글!, 좋아요~