이 Codelab 정보
1. 개요
이 Codelab에서는 사용자 로그인을 위한 간단한 웹페이지를 빌드합니다. Google ID 서비스 JavaScript 라이브러리를 사용하여 Google 계정으로 로그인 버튼을 표시하고 맞춤설정합니다.
학습할 내용
- 웹페이지에 Google 계정으로 로그인 버튼을 추가하는 방법
- OAuth 2.0 웹 애플리케이션 설정 방법
- ID 토큰을 디코딩하는 방법
- Google 계정으로 로그인 버튼을 맞춤설정하는 방법
필요한 항목
- 이 Codelab에서 다룰 환경인 텍스트 편집기와 웹페이지를 호스팅하는 장소:
- 가상 머신의 터미널에서 로컬로 실행하거나
- Glitch와 같은 플랫폼 사용
- Google Cloud 프로젝트 기존 프로젝트를 사용하거나 새 프로젝트를 만들 수 있습니다. Google Cloud Platform 계정 및 프로젝트는 무료입니다.
- HTML, CSS, JavaScript, Chrome DevTools (또는 이와 동등한 기능)에 관한 기본 지식
그럼 시작해 보겠습니다
2. 로그인 페이지 만들기
이 코드 샘플을 index.html 파일에 추가합니다. 컴퓨터에서 즐겨 사용하는 텍스트 편집기를 사용하거나 Glitch와 같은 플랫폼에서 이 작업을 수행할 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://accounts.google.com/gsi/client" async></script>
<script>
function decodeJWT(token) {
let base64Url = token.split(".")[1];
let base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
let jsonPayload = decodeURIComponent(
atob(base64)
.split("")
.map(function (c) {
return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
})
.join("")
);
return JSON.parse(jsonPayload);
}
function handleCredentialResponse(response) {
console.log("Encoded JWT ID token: " + response.credential);
const responsePayload = decodeJWT(response.credential);
console.log("Decoded JWT ID token fields:");
console.log(" Full Name: " + responsePayload.name);
console.log(" Given Name: " + responsePayload.given_name);
console.log(" Family Name: " + responsePayload.family_name);
console.log(" Unique ID: " + responsePayload.sub);
console.log(" Profile image URL: " + responsePayload.picture);
console.log(" Email: " + responsePayload.email);
}
</script>
</head>
<body>
<!-- g_id_onload contains Google Identity Services settings -->
<div
id="g_id_onload"
data-auto_prompt="false"
data-callback="handleCredentialResponse"
data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE"
></div>
<!-- g_id_signin places the button on a page and supports customization -->
<div class="g_id_signin"></div>
</body>
</html>
이 코드는 HTML과 자바스크립트가 혼합된 것으로 다음과 같은 여러 기능을 수행합니다.
g_id_onload를 사용하여 이 Google ID 서비스 라이브러리를 구성합니다.g_id_signin를 사용하여 Google 계정으로 로그인 버튼을 표시합니다.handleCredentialResponse라는 JavaScript 콜백 함수 핸들러를 추가하여 Google에서 사용자 로그인 사용자 인증 정보를 수신합니다.- JSON 웹 토큰 (JWT) 사용자 인증 정보를 일반 JSON으로 변환하는
decodeJWT함수
data-client_id="PUT_YOUR_WEB_CLIENT_ID_HERE"에 문제가 있어 보일 수 있습니다.
지금은 그냥 무시하세요. 곧 다시 다루겠습니다.
3. 웹페이지 제공
브라우저에 index.html를 제공하는 두 가지 환경을 살펴보겠습니다.
- 웹 서버를 컴퓨터에서 로컬로 실행
- 원격 플랫폼에서 사용할 수 있습니다.
가장 편한 방법을 선택하세요. 설정 후 URL을 사용하여 OAuth 웹 클라이언트를 구성합니다.
컴퓨터에서 로컬
Python3가 시스템에 설치되어 있는지 확인합니다. 설정은 OS 및 플랫폼에 따라 다릅니다. 머신에 Python을 설치해야 하는 경우에는 Python 설정 및 사용부터 시작하세요.
index.html가 포함된 디렉터리에서 Python 웹 서버를 시작합니다.
$ python3 -m http.server
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
이제 웹 서버가 포트 8000에서 연결을 수신 대기하고 있으며 로그인 페이지를 제공할 준비가 되었습니다. URL은 다음과 같습니다.
http://localhost:8000
원격 플랫폼 사용
Glitch (또는 이와 동등한 브라우저)를 사용하여 로그인 페이지를 수정하고 호스팅하도록 선택한 경우 미리보기 창 또는 새 브라우저 탭에서 index.html를 열 수 있습니다.
일반적으로 glich.com 프로젝트를 설정할 때 입력한 프로젝트 이름이 URL입니다. 예를 들어 glitch 프로젝트의 이름이 gis-example이면 URL은 https://gis-example.glitch.me입니다. 물론 다른 프로젝트 이름을 선택하게 되므로 이 이름을 재사용할 수 없습니다. URL은 다음과 같습니다.
https://<var>your-project-name</var>.glitch.me
페이지 로드
잠시만요...
먼저 OAuth 2.0 웹 클라이언트를 만들고 구성해야 합니다.
다음 단계에서 사용해야 하므로 URL을 복사하거나 기록해 둡니다.
4. OAuth 웹 클라이언트 설정
사용자가 실제로 로그인할 수 있도록 OAuth를 구성해 보겠습니다.
- 이 링크를 클릭하여 OAuth 2.0 웹 클라이언트를 만듭니다. 필요한 경우 마법사의 도움을 받아 새 Google Cloud 프로젝트를 만들고 설정할 수 있습니다.
- 애플리케이션 유형 드롭다운에서 웹 애플리케이션을 선택합니다.
- 승인된 JavaScript 출처에서 URI 추가 버튼을 누릅니다.
- 3단계: 웹페이지 제공하기에서
index.html을(를) 호스팅하는 URL을 입력합니다.로컬 머신에 호스팅됨
원격 플랫폼에 호스팅됨
- 만들기를 누릅니다.
- 새 클라이언트 ID를 복사합니다.
마지막으로
새 클라이언트 ID를 사용하려면 index.html로 돌아가서 업데이트해야 합니다. 편집기에서 PUT_YOUR_WEB_CLIENT_ID_HERE을 새 클라이언트 ID로 바꿉니다. 클라이언트 ID는 1234567890-abc123def456.apps.googleusercontent.com 예시와 같습니다.
로그인하세요.
5. 로그인
먼저 브라우저의 개발자 콘솔을 열면 Google에서 반환된 모든 오류와 JWT ID 토큰 사용자 인증 정보가 여기에 기록됩니다.
Google 계정으로 로그인 버튼을 누르세요.
다음 단계는 약간 다를 수 있습니다.
- 현재 두 개 이상의 Google 계정에 로그인되어 있는 경우 이 웹 앱에 로그인할 때 사용할 계정을 선택하라는 메시지가 표시됩니다.
- 이 웹 앱에 처음 로그인하는 경우 동의 메시지가 표시됩니다.
선택적으로 계정을 선택하고 동의하면 Google에서 JWT로 응답합니다. 브라우저에서 실행되는 handleCredentialResponse 콜백 함수가 JWT를 수신합니다.
이 Codelab에서는 JWT 콘텐츠를 디코딩하고 인쇄합니다. 프로덕션 웹 앱에서는 디코딩된 JWT를 확인하고 사용하여 보다 의미 있는 작업(예: 백엔드 플랫폼에서 새 계정 생성 또는 사용자를 위한 새 세션 설정)을 수행합니다.
6. JWT ID 토큰 검사
인코딩된 JWT는 개발자 콘솔에 로깅됩니다. JWT를 디코딩한 후에는 일반적으로 사용되는 일부 ID 토큰 필드도 콘솔에 로깅됩니다.
jwt.io와 같은 온라인 도구를 사용하여 JWT를 디코딩할 수 있습니다.
또는 터미널의 jq를 사용하여 JWT를 디코딩하고 볼 수도 있습니다 (jq를 설치하려면 패키지 관리자를 사용해야 할 수도 있음). 먼저 인코딩된 JWT 문자열을 큰따옴표에 붙여넣습니다.
$ JWT="eyJhbGciOiJSUzI1Ni ... Hecz6Wm4Q"
이 명령어를 사용하여
$ echo $JWT | jq -R 'split(".") | .[0],.[1] | @base64d | fromjson'
{
"alg": "RS256",
"kid": "c7e04465649ffa606557650c7e65f0a87ae00fe8",
"typ": "JWT"
}
{
"iss": "https://accounts.google.com",
"azp": "123456789012-s0meRand0mStR1nG.apps.googleusercontent.com",
"aud": "123456789012-s0meRand0mStR1nG.apps.googleusercontent.com",
"sub": "2718281828459045",
"email": "example@example.com",
"email_verified": true,
"nbf": 1744645148,
"name": "Brian Daugherty",
"picture": "https://lh3.googleusercontent.com/a/08a898b88ca4d6407be652d8",
"given_name": "Brian",
"family_name": "Daugherty",
"iat": 1744645448,
"exp": 1744649048,
"jti": "52cd32984b30e178aa88bc2e75e63e055a461fcf"
}
이메일, 이름, 사진과 같은 일부 키와 값은 매우 쉽게 이해할 수 있어야 합니다. 다른 값은 JWT를 사용하기 전에 확인하는 데 사용됩니다. ID 토큰에서 사용자 정보 얻기에서 모든 필드의 의미를 자세히 알아보세요.
7. 버튼 맞춤설정
페이지에 기본 로그인 버튼을 배치하는 방법은 다음과 같습니다.
<div class="g_id_signin"></div>
이 버튼은
그러나 사이트 테마에 맞게 색상, 크기 또는 텍스트를 변경하고 싶을 수도 있습니다.
버튼 색상을 파란색으로 변경하고 대신 Google 계정으로 가입으로 표시하겠습니다.
index.html를 열고 g_id_signin 요소를 찾은 후 data-theme="filled_blue" 속성과 data-text="signup_with" 속성을 추가합니다.
<div
class="g_id_signin"
data-theme="filled_blue"
data-text="signup_with"
></div>
페이지를 저장하고 새로고침하면 새 텍스트가 있는 파란색 버튼이 표시됩니다.
버튼을 추가로 맞춤설정할 수 있습니다. 전체 옵션 목록은 시각적 데이터 속성을 참고하세요.
8. 추가 리소스
축하합니다.
웹페이지에 Google 계정으로 로그인 버튼을 추가하고, OAuth 2.0 웹 클라이언트를 구성하고, JWT ID 토큰을 디코딩하고, 버튼 모양을 맞춤설정하는 방법을 알아봤습니다.
다음 링크를 참고하는 데 도움이 될 수 있습니다.
- Google ID 서비스 HTML API
- Google ID 서비스 JavaScript API
- 웹용 Google 계정으로 로그인을 설정하는 방법
- Google ID 토큰 확인
- 여기에서 Google Cloud 프로젝트에 대해 자세히 알아보세요.
- Google ID 인증 방법