Bu codelab hakkında
1. Giriş
Genel Bakış
Google Cüzdan API'si, bağlılık kartları, teklifler, hediye kartları, etkinlik biletleri, toplu taşıma biletleri, biniş kartları ve daha fazlası gibi çeşitli kart türleri aracılığıyla kullanıcılarla etkileşim kurmanıza olanak tanır. Her geçiş türü veya geçiş sınıfı, kullanıcı deneyimini iyileştirmek için kullanım alanına özel alanlar ve özellikler içerir.
Ancak bu yöntemler her kullanım alanına uygun olmayabilir. Daha özelleştirilmiş bir deneyim oluşturmak için genel geçiş türünü kullanabilirsiniz. Genel geçiş türü için bazı örnek kullanım alanları şunlardır:
- Otopark kartları
- Kütüphane üyelik kartları
- Yüklü kart kuponları
- Spor salonu üyelik kartları
- Rezervasyonlar
Genel kartları aşağıdakilerle sunulabilecek tüm kullanım alanları için kullanabilirsiniz:
- En fazla üç bilgi satırı
- (İsteğe bağlı) Barkod grafiği
- (İsteğe bağlı) Ayrıntılar bölümü
Google Cüzdan API'si veya bir web sayfasına Google Cüzdan'a ekle düğmesi ekleme hakkında daha fazla bilgi için lütfen Google Cüzdan geliştirici belgelerini inceleyin.
Sınıfları ve nesneleri iletme
Google Cüzdan API'si aşağıdakileri oluşturmak için yöntemler sunar:
Tür | Açıklama |
Kart sınıfı | Tek bir kart nesnesi için şablon. Bu sınıfa ait tüm geçiş nesnelerine ortak bilgileri içerir. |
Nesne gönderme | Kullanıcı kimliğine özgü bir geçiş sınıfı örneği. |
Bu codelab hakkında
Bu codelab'de aşağıdaki görevleri tamamlayacaksınız.
- Demo modunda yeni bir veren kuruluş hesabı oluşturma
- Kart çıkarmak için hizmet hesabı oluşturma
- Yeni bir genel geçiş sınıfı oluşturma
- Yeni bir geçiş nesnesi oluşturma
- Kartı kaydetmek için Google Cüzdan'a ekle düğmesi oluşturma
- Düğmeyi web sayfanızda gösterme
- Kart kaydetme sonucunu işleme
Ön koşullar
- Git
- Google Cloud Console'a erişimi olan bir Google Hesabı
- Node.js 10 veya sonraki bir sürüm
Hedefler
Bu codelab'i tamamladıktan sonra şunları yapabileceksiniz:
- Google Cüzdan'ı kullanarak kart nesneleri oluşturma
- Google Cüzdan'a ekle düğmesi oluşturma
Destek
Codelab'in herhangi bir aşamasında takılırsanız google-pay/wallet-web-codelab GitHub deposunda referans olarak kullanabileceğiniz eksiksiz bir çözüm bulunur.
2. Kurulum
Bu adımda, demo modunda bir Issuer hesabı oluşturacaksınız. Böylece, kullanıcı cüzdanlarına eklenebilecek kart sınıfları ve nesneleri oluşturabilirsiniz. Ardından, bir Google Cloud projesi ve hizmet hesabı oluşturun. Bunlar, arka uç sunucusuyla aynı şekilde geçiş sınıflarını ve nesnelerini programatik olarak oluşturmak için kullanılır. Son olarak, Google Cloud hizmet hesabını Google Cüzdan sağlayıcı hesabınızdaki kartları yönetmek üzere yetkilendirin.
Google Cüzdan kart çıkarıcı hesabına kaydolma
Google Cüzdan için kart oluşturmak ve dağıtmak amacıyla bir kart veren hesabı gerekir. Google Pay ve Cüzdan Konsolu'nu kullanarak kaydolabilirsiniz. İlk olarak, demo modunda kart oluşturma erişiminiz olur. Bu durumda, oluşturduğunuz kartları yalnızca belirli test kullanıcıları ekleyebilir. Test kullanıcıları Google Pay ve Cüzdan Konsolu'nda yönetilebilir.
Demo modu hakkında daha fazla bilgi için Genel geçiş ön koşulları başlıklı makaleyi inceleyin.
- Google Pay ve Cüzdan Konsolu'nu açın.
- Kart veren hesabı oluşturmak için ekrandaki talimatları uygulayın.
- Google Cüzdan API'si'ni seçin.
- Hizmet Şartları'nı ve Gizlilik Politikası'nı anladığınızı onaylayın
- Düzenleyen Kimliği değerini bir metin düzenleyiciye veya başka bir konuma kopyalayın
- Yönet sekmesinin altında Test hesapları oluştur'u seçin.
- Bu kod laboratuvarında kullanacağınız e-posta adreslerini ekleyin
Google Cüzdan API'sini etkinleştirme
- Google Cloud Console'da oturum açın.
- Henüz Google Cloud projeniz yoksa hemen bir proje oluşturun (daha fazla bilgi için Proje oluşturma ve yönetme başlıklı makaleyi inceleyin).
- Projeniz için Google Cüzdan API'sini (Kartlar için Google Pay API olarak da bilinir) etkinleştirin
Hizmet hesabı ve anahtarı oluşturma
Google Cüzdan API'sini çağırmak için bir hizmet hesabı ve hizmet hesabı anahtarı gerekir. Hizmet hesabı, Google Cüzdan API'sini çağıran kimliktir. Hizmet hesabı anahtarı, uygulamanızı hizmet hesabı olarak tanımlayan bir özel anahtar içerir. Bu anahtar hassas olduğundan gizli tutun.
Hizmet hesabı oluşturma
- Google Cloud Console'da Hizmet Hesapları'nı açın.
- Hizmet hesabınız için ad, kimlik ve açıklama girin
- OLUŞTUR VE DEVAM ET'i seçin.
- BİTTİ'yi seçin.
Hizmet hesabı anahtarı oluşturma
- Hizmet hesabınızı seçin
- KEYS menüsünü seçin.
- ANAHTAR EKLE'yi, ardından Yeni anahtar oluştur'u seçin.
- JSON anahtar türünü seçin
- OLUŞTUR'u seçin.
Anahtar dosyasını yerel iş istasyonunuza kaydetmeniz istenir. Bu konumu hatırladığınızdan emin olun.
GOOGLE_APPLICATION_CREDENTIALS ortam değişkenini ayarlama
GOOGLE_APPLICATION_CREDENTIALS ortam değişkeni, Google SDK'ları tarafından hizmet hesabı olarak kimlik doğrulaması yapmak ve bir Google Cloud projesinin farklı API'lerine erişmek için kullanılır.
GOOGLE_APPLICATION_CREDENTIALSortam değişkenini ayarlamak için Google Cloud Hizmet hesabı anahtarları dokümanlarında verilen talimatları uygulayın.- Ortam değişkeninin yeni bir terminal (MacOS/Linux) veya komut satırı (Windows) oturumunda ayarlandığını doğrulayın (Açık bir oturumunuz varsa yeni bir oturum başlatmanız gerekebilir)
echo $GOOGLE_APPLICATION_CREDENTIALS
Hizmet hesabını yetkilendirme
Son olarak, hizmet hesabını Google Cüzdan kartlarını yönetmek üzere yetkilendirmeniz gerekir.
- Google Pay ve Cüzdan Konsolu'nu açın.
- Kullanıcılar'ı seçin.
- Kullanıcı davet et'i seçin.
- Hizmet hesabının e-posta adresini girin (ör.
test-svc@myproject.iam.gserviceaccount.com) - Erişim düzeyi açılır menüsünden Geliştirici veya Yönetici'yi seçin.
- Davet et'i seçin.
3. Örnek Node.js uygulamasını başlatma
Süre 10:00
Bu adımda, alışveriş web sitesi ve arka uç sunucusu olarak çalışan bir örnek Node.js uygulaması çalıştıracaksınız.
Örnek deposunu klonlama
google-pay/wallet-web-codelab deposunda, Node.js tabanlı bir örnek proje ve geçiş sınıfları ile nesneleri sağlamak için kullanılan arka uç sunucusunu taklit eden farklı komut dosyası dosyaları bulunur. Bu sayfaları, ürün ayrıntıları ekranında Google Cüzdan'a ekle düğmesi içerecek şekilde düzenlersiniz.
- Depoyu yerel iş istasyonunuza klonlama
git clone https://github.com/google-pay/wallet-web-codelab.git
Proje bağımlılıkları yükleme
- Klonlanmış deposu terminalinizde veya komut satırı isteminizde açın
webdizinine gidin (bu codelab'in geri kalanında değiştireceğiniz uygulama budur)cd web- Node.js bağımlılıklarını yükleyin
npm install . - Uygulamayı başlatma
node app.js - http://localhost:3000 adresinde çalışan uygulamayı açın.
E-posta adresinizi girip Geçiş oluştur'u seçerseniz hiçbir şey olmaz. Sonraki adımlarda, uygulamayı yeni bir geçiş sınıfı ve nesnesi oluşturacak şekilde yapılandıracaksınız.
4. Genel geçiş sınıfı oluşturma
Bu adımda, kartınızın temel sınıfını oluşturacaksınız. Bir kullanıcı için her yeni geçiş oluşturulduğunda, geçiş sınıfında tanımlanan özellikler devralınır.
Bu codelab sırasında oluşturacağınız geçiş sınıfı, hem kimlik rozeti hem de yarışma puanı izleyicisi olarak çalışan bir nesne oluşturmak için genel geçişlerin esnekliğini kullanır. Bu sınıftan bir geçiş nesnesi oluşturulduğunda aşağıdaki grafiğe benzer bir görünüm elde edilir.
Kart sınıfları doğrudan Google Pay ve Cüzdan Konsolu'nda veya Google Cüzdan API'si kullanılarak oluşturulabilir. Bu codelab'de, API'yi kullanarak Generic pass sınıfını oluşturacaksınız. Bu işlem, özel bir arka uç sunucusunun geçiş sınıfları oluşturmak için kullanacağı işleme uygundur.
web/app.jsdosyasını açınissuerIddeğerini Google Pay ve Cüzdan Konsolu'ndaki kartınızı veren kuruluş kimliğinizle değiştirin.// TODO: Define Issuer ID
const issuerId = 'ISSUER_ID';createPassClassişlevini bulma- İşlevde kimliği doğrulanmış bir HTTP istemcisi oluşturun ve yeni bir kart sınıfı oluşturmak için Google Cüzdan API'sini kullanın
// 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!');
}
}
Kodunuz çalıştırıldığında yeni bir geçiş sınıfı oluşturur ve sınıf kimliğini döndürür. Sınıf kimliği, geliştirici tarafından tanımlanan bir son ek ile birlikte veren kuruluş kimliğinden oluşur. Bu durumda son ek codelab_class olarak ayarlanır (sınıf kimliği 1234123412341234123.codelab_class'a benzer). Çıkış günlükleri, Google Cüzdan API'sinden gelen yanıtı da içerir.
5. Genel geçiş nesnesi oluşturma
Bu adımda, Node.js uygulamanızı daha önce oluşturduğunuz sınıfı kullanarak genel geçiş nesnesi oluşturacak şekilde yapılandıracaksınız. Kullanıcılar için geçiş nesneleri oluşturmanın iki yolu vardır.
Arka uç sunucuda geçiş nesnesini oluşturma
Bu yaklaşımda, geçiş nesnesi bir arka uç sunucusunda oluşturulur ve istemci uygulamasına imzalı bir JWT olarak döndürülür. Bu yöntem, kullanıcının cüzdanına eklemeye çalışmadan önce nesnenin var olmasını sağladığı için kullanıcıların benimsemesinin yüksek olduğu durumlar için en uygun yöntemdir.
Kullanıcı cüzdanına eklediğinde geçiş kartı nesnesini oluşturun
Bu yaklaşımda, geçiş nesnesi arka uç sunucuda tanımlanır ve imzalı bir JWT olarak kodlanır. Ardından, istemci uygulamasında JWT'ye referans veren bir Google Cüzdan'a ekle düğmesi oluşturulur. Kullanıcı düğmeyi seçtiğinde, geçiş nesnesi oluşturmak için JWT kullanılır. Bu yöntem, geçiş nesnelerinin oluşturulmasını ve kullanılmamasını önlediği için kullanıcıların özelliği benimsemesinin değişken veya bilinmediği durumlar için en uygun yöntemdir. Bu yaklaşım, kod laboratuvarında kullanılacaktır.
web/app.jsdosyasını açıncreatePassObjectişlevini bulma- İşlevde, kullanıcınız için yeni bir geçiş nesnesi tanımlayın
// 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!");
Uygulamayı yeniden yükler, e-posta adresinizi girer ve formu gönderirseniz herhangi bir sonuç görmezsiniz. Geçiş nesnesi arka uç uygulaması tarafından tanımlanıyor ancak çıkış döndürülmüyor. Ardından, kartı Google Cüzdan'a ekle bağlantısına dönüştüreceksiniz.
6. Google Cüzdan'a ekle düğmesi oluşturma
Son adımda, imzalı bir JWT oluşturur ve Google Cüzdan'a ekle düğmesinde kullanılabilecek bir bağlantı döndürürsünüz. Kullanıcı düğmeyi seçtiğinde, kartını cüzdanına kaydetmesi istenir.
- JWT iddialarını oluşturun, hizmet hesabı özel anahtarını kullanarak kodlayın ve yerleşik bağlantıyı içeren bir Google Cüzdan'a ekle düğmesi döndürün
// 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>`); - Tarayıcınızda çalışan uygulamayı yeniden yükleme
- Forma e-posta adresinizi girin ve Geçiş kartı oluştur'u seçin.
- Göründüğünde Google Cüzdan'a ekle düğmesini seçin.
7. Tebrikler
Tebrikler, Google Cüzdan API'sini web'e başarıyla entegre ettiniz.
Daha fazla bilgi
google-pay/wallet-web-codelab GitHub deposundaki tam entegrasyona göz atın.
Kart oluşturma ve üretim erişimi isteme
Üretimde kendi kartlarınızı vermeye hazır olduğunuzda üretim erişimi isteğinde bulunmak için Google Pay ve Cüzdan Konsolu'na gidin.
Daha fazla bilgi için Web API Önkoşulları başlıklı makaleyi inceleyin.