이 Codelab 정보
1. 소개
개요
Google 월렛 API를 사용하면 포인트 카드, 쿠폰, 기프트 카드, 이벤트 티켓, 대중교통 티켓, 탑승권 등 다양한 유형의 패스를 통해 사용자와 소통할 수 있습니다. 각 패스 유형 또는 패스 클래스에는 사용자 환경을 개선하기 위한 사용 사례별 필드와 기능이 있습니다.
하지만 이러한 방법이 모든 사용 사례에 적합하지는 않을 수 있습니다. 더 맞춤설정된 환경을 만들려면 일반 패스 유형을 사용하면 됩니다. 다음은 일반 패스 유형의 몇 가지 사용 사례입니다.
- 주차권
- 도서관 회원 카드
- 금액이 저장된 쿠폰
- 헬스장 회원 카드
- 예약
일반 패스는 다음과 같이 표시할 수 있는 모든 사용 사례에 사용할 수 있습니다.
- 정보 행 최대 3개
- (선택사항) 바코드 그래픽
- (선택사항) 세부정보 섹션
Google Wallet API 또는 웹페이지에 Google 월렛에 추가 버튼을 추가하는 방법에 관한 자세한 내용은 Google 월렛 개발자 문서를 참고하세요.
클래스 및 객체 전달
Google Wallet API는 다음을 만드는 메서드를 노출합니다.
유형 | 설명 |
패스 클래스 | 개별 패스 객체의 템플릿입니다. 이 클래스에 속하는 모든 패스 객체에 공통적인 정보가 포함됩니다. |
객체 전달 | 사용자 ID에 고유한 패스 클래스의 인스턴스입니다. |
이 Codelab 정보
이 Codelab에서는 다음 작업을 완료합니다.
- 데모 모드에서 새 발급자 계정 만들기
- 패스 발급을 위한 서비스 계정 만들기
- 새 일반 패스 클래스 만들기
- 새 패스 객체 만들기
- 패스를 저장할 Google 월렛에 추가 버튼 만들기
- 웹페이지에 버튼 표시
- 패스 저장 결과 처리
기본 요건
- Git
- Google Cloud 콘솔에 액세스할 수 있는 Google 계정
- Node.js 버전 10 이상
목표
이 Codelab을 완료하면 다음을 수행할 수 있습니다.
- Google 월렛을 사용하여 패스 객체 만들기
- Google 월렛에 추가 버튼 만들기
지원
Codelab의 어느 단계에서든 문제가 발생하면 google-pay/wallet-web-codelab GitHub 저장소에서 참고할 수 있는 전체 솔루션을 확인하세요.
2. 설정
이 단계에서는 데모 모드에서 발급자 계정을 만듭니다. 이렇게 하면 사용자 지갑에 추가할 수 있는 패스 클래스와 객체를 만들 수 있습니다. 다음으로 Google Cloud 프로젝트와 서비스 계정을 만듭니다. 이는 백엔드 서버와 동일한 방식으로 패스 클래스와 객체를 프로그래매틱 방식으로 만드는 데 사용됩니다. 마지막으로 Google Cloud 서비스 계정이 Google 월렛 발급자 계정에서 패스를 관리하도록 승인합니다.
Google 월렛 발급기관 계정 가입
Google 월렛의 패스를 생성하고 배포하려면 발급자 계정이 필요합니다. Google Pay 및 월렛 콘솔을 사용하여 가입할 수 있습니다. 처음에는 데모 모드에서 패스를 만들 수 있습니다. 즉, 특정 테스트 사용자만 내가 만든 패스를 추가할 수 있습니다. 테스트 사용자는 Google Pay 및 월렛 콘솔에서 관리할 수 있습니다.
데모 모드에 관한 자세한 내용은 일반 패스 기본 요건을 참고하세요.
- Google Pay 및 월렛 콘솔을 엽니다.
- 화면에 표시된 안내에 따라 발급자 계정을 만듭니다.
- Google Wallet API를 선택합니다.
- 서비스 약관 및 개인정보처리방침을 이해했음을 확인합니다.
- 발급기관 ID 값을 텍스트 편집기 또는 다른 위치에 복사합니다.
- 관리 탭에서 테스트 계정 설정을 선택합니다.
- 이 Codelab에서 사용할 이메일 주소를 추가합니다.
Google Wallet API 사용 설정
- Google Cloud 콘솔에 로그인합니다.
- Google Cloud 프로젝트가 아직 없으면 지금 만드세요 (자세한 내용은 프로젝트 만들기 및 관리 참고).
- 프로젝트에 Google Wallet API (Google Pay for Passes API라고도 함)를 사용 설정합니다.
서비스 계정 및 키를 만듭니다.
Google 월렛 API를 호출하려면 서비스 계정과 서비스 계정 키가 필요합니다. 서비스 계정은 Google 월렛 API를 호출하는 ID입니다. 서비스 계정 키에는 애플리케이션을 서비스 계정으로 식별하는 비공개 키가 포함되어 있습니다. 이 키는 민감한 정보이므로 기밀로 유지하세요.
서비스 계정 만들기
- Google Cloud 콘솔에서 서비스 계정을 엽니다.
- 서비스 계정의 이름, ID, 설명을 입력합니다.
- 만들고 계속하기를 선택합니다.
- 완료를 선택합니다.
서비스 계정 키 만들기
- 서비스 계정 선택
- KEYS 메뉴를 선택합니다.
- 키 추가를 선택한 다음 새 키 만들기를 선택합니다.
- JSON 키 유형 선택
- 만들기를 선택합니다.
키 파일을 로컬 워크스테이션에 저장하라는 메시지가 표시됩니다. 위치를 기억해 두세요.
GOOGLE_APPLICATION_CREDENTIALS 환경 변수를 설정합니다.
GOOGLE_APPLICATION_CREDENTIALS 환경 변수는 Google SDK에서 서비스 계정으로 인증하고 Google Cloud 프로젝트의 다양한 API에 액세스하는 데 사용됩니다.
- Google Cloud 서비스 계정 키 문서의 안내에 따라
GOOGLE_APPLICATION_CREDENTIALS환경 변수를 설정합니다. - 새 터미널 (macOS/Linux) 또는 명령줄 (Windows) 세션에서 환경 변수가 설정되어 있는지 확인합니다 (이미 세션이 열려 있는 경우 새 세션을 시작해야 할 수 있음).
echo $GOOGLE_APPLICATION_CREDENTIALS
서비스 계정 승인
마지막으로 서비스 계정이 Google 월렛 패스를 관리하도록 승인해야 합니다.
- Google Pay 및 월렛 콘솔을 엽니다.
- 사용자를 선택합니다.
- 사용자 초대를 선택합니다.
- 서비스 계정의 이메일 주소를 입력합니다 (예:
test-svc@myproject.iam.gserviceaccount.com). - 액세스 수준 드롭다운 메뉴에서 개발자 또는 관리자를 선택합니다.
- 초대를 선택합니다.
3. 샘플 Node.js 앱 시작
소요 시간 10:00
이 단계에서는 쇼핑 웹사이트 및 백엔드 서버 역할을 하는 샘플 Node.js 애플리케이션을 실행합니다.
샘플 저장소 복제
google-pay/wallet-web-codelab 저장소에는 Node.js 기반 샘플 프로젝트와 패스 클래스 및 객체 프로비저닝에 사용되는 백엔드 서버를 모방하는 다양한 스크립트 파일이 포함되어 있습니다. 제품 세부정보 화면에 Google 월렛에 추가 버튼을 포함하도록 수정합니다.
- 저장소를 로컬 워크스테이션에 클론
git clone https://github.com/google-pay/wallet-web-codelab.git
프로젝트 종속 항목 설치
- 터미널 또는 명령줄 프롬프트에서 클론된 저장소 열기
web디렉터리로 이동합니다 (이 Codelab의 나머지 부분에서 수정할 앱입니다).cd web- Node.js 종속 항목 설치
npm install . - 앱 시작
node app.js - http://localhost:3000에서 실행 중인 앱을 엽니다.
이메일 주소를 입력하고 패스 만들기를 선택해도 아무 일도 일어나지 않습니다. 다음 단계에서는 새 패스 클래스와 객체를 만들도록 앱을 구성합니다.
4. 일반 패스 클래스 만들기
이 단계에서는 패스의 기본 클래스를 만듭니다. 사용자에 대해 새 패스가 생성될 때마다 패스 클래스에 정의된 속성이 상속됩니다.
이 Codelab에서 만들 패스 클래스는 일반 패스의 유연성을 사용하여 ID 배지와 챌린지 포인트 추적기 역할을 하는 객체를 만듭니다. 이 클래스에서 패스 객체가 생성되면 다음 그래픽과 같이 표시됩니다.
패스 클래스는 Google Pay 및 월렛 콘솔에서 직접 만들거나 Google Wallet API를 사용하여 만들 수 있습니다. 이 Codelab에서는 API를 사용하여 일반 패스 클래스를 만듭니다. 이는 비공개 백엔드 서버가 패스 클래스를 만드는 데 사용하는 프로세스를 따릅니다.
web/app.js파일을 엽니다.issuerId값을 Google Pay 및 월렛 콘솔의 발급기관 ID로 대체합니다.// TODO: Define Issuer ID
const issuerId = 'ISSUER_ID';createPassClass함수 찾기- 함수에서 인증된 HTTP 클라이언트를 만들고 Google Wallet API를 사용하여 새 패스 클래스를 만듭니다.
// TODO: Create a Generic pass class
let genericClass = {
'id': `${classId}`,
'classTemplateInfo': {
'cardTemplateOverride': {
'cardRowTemplateInfos': [
{
'twoItems': {
'startItem': {
'firstValue': {
'fields': [
{
'fieldPath': 'object.textModulesData["points"]'
}
]
}
},
'endItem': {
'firstValue': {
'fields': [
{
'fieldPath': 'object.textModulesData["contacts"]'
}
]
}
}
}
}
]
},
'detailsTemplateOverride': {
'detailsItemInfos': [
{
'item': {
'firstValue': {
'fields': [
{
'fieldPath': 'class.imageModulesData["event_banner"]'
}
]
}
}
},
{
'item': {
'firstValue': {
'fields': [
{
'fieldPath': 'class.textModulesData["game_overview"]'
}
]
}
}
},
{
'item': {
'firstValue': {
'fields': [
{
'fieldPath': 'class.linksModuleData.uris["official_site"]'
}
]
}
}
}
]
}
},
'imageModulesData': [
{
'mainImage': {
'sourceUri': {
'uri': 'https://storage.googleapis.com/wallet-lab-tools-codelab-artifacts-public/google-io-2021-card.png'
},
'contentDescription': {
'defaultValue': {
'language': 'en-US',
'value': 'Google I/O 2022 Banner'
}
}
},
'id': 'event_banner'
}
],
'textModulesData': [
{
'header': 'Gather points meeting new people at Google I/O',
'body': 'Join the game and accumulate points in this badge by meeting other attendees in the event.',
'id': 'game_overview'
}
],
'linksModuleData': {
'uris': [
{
'uri': 'https://io.google/2022/',
'description': 'Official I/O \'22 Site',
'id': 'official_site'
}
]
}
};
let response;
try {
// Check if the class exists already
response = await httpClient.request({
url: `${baseUrl}/genericClass/${classId}`,
method: 'GET'
});
console.log('Class already exists');
console.log(response);
} catch (err) {
if (err.response && err.response.status === 404) {
// Class does not exist
// Create it now
response = await httpClient.request({
url: `${baseUrl}/genericClass`,
method: 'POST',
data: genericClass
});
console.log('Class insert response');
console.log(response);
} else {
// Something else went wrong
console.log(err);
res.send('Something went wrong...check the console logs!');
}
}
코드가 실행되면 새 패스 클래스가 생성되고 클래스 ID가 출력됩니다. 클래스 ID는 발급기관 ID와 개발자가 정의한 접미사로 구성됩니다. 이 경우 접미사가 codelab_class로 설정됩니다 (클래스 ID는 1234123412341234123.codelab_class와 유사함). 출력 로그에는 Google 월렛 API의 응답도 포함됩니다.
5. 일반 패스 객체 만들기
이 단계에서는 이전에 만든 클래스를 사용하여 일반 패스 객체를 만들도록 Node.js 앱을 구성합니다. 사용자의 패스 객체를 만드는 흐름에는 두 가지가 있습니다.
백엔드 서버에서 패스 객체 만들기
이 접근 방식에서는 패스 객체가 백엔드 서버에서 생성되고 서명된 JWT로 클라이언트 앱에 반환됩니다. 이는 사용자가 지갑에 카드를 추가하려고 시도하기 전에 카드가 존재하는지 확인할 수 있으므로 사용자 채택률이 높은 경우에 가장 적합합니다.
사용자가 월렛에 패스를 추가할 때 패스 객체 만들기
이 접근 방식에서는 패스 객체가 백엔드 서버에서 정의되고 서명된 JWT로 인코딩됩니다. 그러면 JWT를 참조하는 클라이언트 앱에 Google 월렛에 추가 버튼이 렌더링됩니다. 사용자가 버튼을 선택하면 JWT가 패스 객체를 만드는 데 사용됩니다. 패스 객체가 생성되지 않고 사용되지 않도록 하므로 사용자 채택이 가변적이거나 알 수 없는 경우에 가장 적합합니다. 이 접근 방식은 Codelab에서 사용됩니다.
web/app.js파일을 엽니다.createPassObject함수 찾기- 함수에서 사용자의 새 패스 객체 정의
// TODO: Create a new Generic pass for the user
let objectSuffix = `${req.body.email.replace(/[^\w.-]/g, '_')}`;
let objectId = `${issuerId}.${objectSuffix}`;
let genericObject = {
'id': `${objectId}`,
'classId': classId,
'genericType': 'GENERIC_TYPE_UNSPECIFIED',
'hexBackgroundColor': '#4285f4',
'logo': {
'sourceUri': {
'uri': 'https://storage.googleapis.com/wallet-lab-tools-codelab-artifacts-public/pass_google_logo.jpg'
}
},
'cardTitle': {
'defaultValue': {
'language': 'en',
'value': 'Google I/O \'22'
}
},
'subheader': {
'defaultValue': {
'language': 'en',
'value': 'Attendee'
}
},
'header': {
'defaultValue': {
'language': 'en',
'value': 'Alex McJacobs'
}
},
'barcode': {
'type': 'QR_CODE',
'value': `${objectId}`
},
'heroImage': {
'sourceUri': {
'uri': 'https://storage.googleapis.com/wallet-lab-tools-codelab-artifacts-public/google-io-hero-demo-only.jpg'
}
},
'textModulesData': [
{
'header': 'POINTS',
'body': '1234',
'id': 'points'
},
{
'header': 'CONTACTS',
'body': '20',
'id': 'contacts'
}
]
};
// TODO: Create the signed JWT and link
res.send("Form submitted!");
앱을 새로고침하고 이메일 주소를 입력한 후 양식을 제출하면 출력이 표시되지 않습니다. 패스 객체가 백엔드 애플리케이션에 의해 정의되고 있지만 출력이 반환되지 않습니다. 다음으로 패스를 Google 월렛에 추가 링크로 변환합니다.
6. 'Google 월렛에 추가' 버튼 만들기
마지막 단계에서는 서명된 JWT를 만들고 Google 월렛에 추가 버튼에서 사용할 수 있는 링크를 반환합니다. 사용자가 버튼을 선택하면 월렛에 패스를 저장하라는 메시지가 표시됩니다.
- JWT 클레임을 만들고 서비스 계정 비공개 키를 사용하여 인코딩한 다음 삽입된 링크가 있는 Google 월렛에 추가 버튼을 반환합니다.
// TODO: Create the signed JWT and link
const claims = {
iss: credentials.client_email,
aud: 'google',
origins: [],
typ: 'savetowallet',
payload: {
genericObjects: [
genericObject
]
}
};
const token = jwt.sign(claims, credentials.private_key, { algorithm: 'RS256' });
const saveUrl = `https://pay.google.com/gp/v/save/${token}`;
res.send(`<a href='${saveUrl}'><img src='wallet-button.png'></a>`); - 브라우저에서 실행 중인 앱 새로고침
- 양식에 이메일 주소를 입력하고 패스 만들기를 선택합니다.
- 표시되면 Google 월렛에 추가 버튼을 선택합니다.
7. 축하합니다
축하합니다. 웹에 Google Wallet API를 성공적으로 통합했습니다.
자세히 알아보기
google-pay/wallet-web-codelab GitHub 저장소에서 전체 통합을 살펴보세요.
패스 만들기 및 프로덕션 액세스 요청
프로덕션에서 자체 패스를 발급할 준비가 되면 Google Pay 및 월렛 콘솔로 이동하여 프로덕션 액세스를 요청하세요.
자세한 내용은 Web API 기본 요건을 참고하세요.