หน้านี้ได้รับการแปลโดย Cloud Translation API

สร้างบัตรบนเว็บโดยใช้ Google Wallet API

1. บทนำ

ภาพรวม

Google Wallet API ช่วยให้คุณดึงดูดผู้ใช้ผ่านบัตรประเภทต่างๆ ได้ ไม่ว่าจะเป็นบัตรสะสมคะแนน ข้อเสนอ บัตรของขวัญ ตั๋วเข้างาน ตั๋วเดินทาง บอร์ดดิ้งพาส และอื่นๆ อีกมากมาย บัตรแต่ละประเภทหรือคลาสของบัตรแต่ละประเภทมาพร้อมกับช่องและฟีเจอร์เฉพาะสำหรับกรณีการใช้งานเพื่อปรับปรุงประสบการณ์ของผู้ใช้

แต่วิธีนี้อาจไม่เหมาะกับการใช้งานบางกรณี คุณสามารถใช้ประเภทบัตรทั่วไปเพื่อสร้างประสบการณ์การใช้งานที่ปรับแต่งได้มากขึ้น ต่อไปนี้คือตัวอย่างกรณีการใช้งานของประเภทบัตรทั่วไป

บัตรจอดรถ
บัตรสมาชิกห้องสมุด
บัตรกำนัลมูลค่าที่จัดเก็บไว้
บัตรสมาชิกฟิตเนส
การจอง

คุณจะใช้บัตรทั่วไปได้สำหรับ Use Case ที่แสดงสิ่งต่อไปนี้

ข้อมูลสูงสุด 3 แถว
(ไม่บังคับ) กราฟิกบาร์โค้ด
(ไม่บังคับ) ส่วนรายละเอียด

ตัวอย่างบัตร Google Wallet สำหรับกิจกรรมการประชุม

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ Google Wallet API หรือการเพิ่มปุ่มเพิ่มลงใน Google Wallet ลงในหน้าเว็บ โปรดดูเอกสารสำหรับนักพัฒนาซอฟต์แวร์ Google Wallet

ผ่านคลาสและออบเจ็กต์

Google Wallet API แสดงวิธีการในการสร้างสิ่งต่อไปนี้

ประเภท	คำอธิบาย
คลาสบัตร	เทมเพลตสำหรับออบเจ็กต์บัตรแต่ละรายการ ซึ่งประกอบด้วยข้อมูลทั่วไปในออบเจ็กต์ Pass ทั้งหมดที่อยู่ในคลาสนี้
ออบเจ็กต์บัตร	อินสแตนซ์ของคลาสบัตรที่ไม่ซ้ำกันสำหรับรหัสผู้ใช้

เกี่ยวกับ Codelab นี้

คุณจะทำงานต่อไปนี้ใน Codelab นี้

สร้างบัญชีผู้ออกบัตรใหม่ในโหมดสาธิต
สร้างบัญชีบริการสำหรับการออกบัตร
สร้างคลาสบัตรทั่วไปใหม่
สร้างออบเจ็กต์บัตรใหม่
สร้างปุ่มเพิ่มลงใน Google Wallet เพื่อบันทึกบัตร
แสดงปุ่มในหน้าเว็บของคุณ
จัดการผลการบันทึกบัตร

ข้อกำหนดเบื้องต้น

Git
บัญชี Google ที่มีสิทธิ์เข้าถึงคอนโซล Google Cloud
Node.js เวอร์ชัน 10 ขึ้นไป

วัตถุประสงค์

หลังจากเสร็จสิ้น Codelab นี้แล้ว คุณจะทำสิ่งต่อไปนี้ได้

สร้างออบเจ็กต์บัตรโดยใช้ Google Wallet
สร้างปุ่มเพิ่มลงใน Google Wallet

การสนับสนุน

หากคุณติดอยู่ที่จุดใดช่วงหนึ่งใน Codelab โปรดทราบว่าที่เก็บ google-pay/wallet-web-codelab ใน GitHub จะมีโซลูชันที่สมบูรณ์เพื่อให้คุณใช้อ้างอิง

2. ตั้งค่า

ในขั้นตอนนี้ คุณจะต้องสร้างบัญชีผู้ออกในโหมดสาธิต การดำเนินการนี้จะช่วยให้คุณสร้างคลาสและออบเจ็กต์ของบัตรที่เพิ่มลงในกระเป๋าเงินของผู้ใช้ได้ ถัดไป คุณจะต้องสร้างโปรเจ็กต์ Google Cloud และบัญชีบริการ ซึ่งจะใช้เพื่อสร้างคลาสและออบเจ็กต์บัตรแบบเป็นโปรแกรมในลักษณะเดียวกับเซิร์ฟเวอร์แบ็กเอนด์ สุดท้าย คุณจะให้สิทธิ์บัญชีบริการ Google Cloud ในการจัดการบัตรในบัญชีผู้ออกบัตรของ Google Wallet

คุณสร้างคลาสและออบเจ็กต์ของบัตรภายในไคลเอ็นต์สาธารณะ เช่น แอปพลิเคชันบนอุปกรณ์เคลื่อนที่ได้ อย่างไรก็ตาม การสร้างการส่งผ่านในไคลเอ็นต์ส่วนตัว เช่น เซิร์ฟเวอร์แบ็กเอนด์ หรือโดยการดึงข้อมูลคำขอจากแอปพลิเคชันไคลเอ็นต์ผ่านคำขอที่ตรวจสอบสิทธิ์แล้วและมีความปลอดภัย จะปลอดภัยกว่า

จำเป็นต้องมีบัญชีผู้ออกบัตรเพื่อสร้างและเผยแพร่บัตรสำหรับ Google Wallet คุณลงชื่อสมัครใช้ได้โดยใช้Google Pay และ Wallet Console ในช่วงแรก คุณจะมีสิทธิ์เข้าถึงเพื่อสร้างบัตรในโหมดสาธิต ซึ่งหมายความว่ามีเพียงผู้ใช้ทดสอบบางรายเท่านั้นที่จะเพิ่มบัตรที่คุณสร้างได้ คุณจัดการผู้ใช้ทดสอบได้ใน Google Pay และ Wallet Console

โปรดดูข้อมูลเพิ่มเติมเกี่ยวกับโหมดสาธิตที่ข้อกำหนดเบื้องต้นของบัตรทั่วไป

เปิด Google Pay และ คอนโซล Wallet
ทำตามวิธีการบนหน้าจอเพื่อสร้างบัญชีผู้ออก
เลือก Google Wallet API
ยืนยันว่าคุณเข้าใจข้อกําหนดในการให้บริการและนโยบายความเป็นส่วนตัว
คัดลอกค่ารหัสผู้ออกไปยังเครื่องมือแก้ไขข้อความหรือตำแหน่งที่ตั้งอื่น
เลือกตั้งค่าบัญชีทดสอบใต้แท็บจัดการ
เพิ่มอีเมลที่คุณจะใช้ใน Codelab นี้

เปิดใช้ Google Wallet API

ลงชื่อเข้าใช้คอนโซล Google Cloud
หากยังไม่มีโปรเจ็กต์ Google Cloud โปรดสร้างโปรเจ็กต์เลย (ดูข้อมูลเพิ่มเติมได้ที่การสร้างและจัดการโปรเจ็กต์)
เปิดใช้ Google Wallet API (หรือที่เรียกว่า Google Pay for Passes API) สำหรับโปรเจ็กต์ของคุณ

สร้างบัญชีบริการและคีย์

จำเป็นต้องมีบัญชีบริการและคีย์บัญชีบริการเพื่อเรียกใช้ Google Wallet API บัญชีบริการคือข้อมูลประจำตัวที่เรียกใช้ Google Wallet API คีย์บัญชีบริการจะมีคีย์ส่วนตัวที่ระบุว่าแอปพลิเคชันของคุณเป็นบัญชีบริการ คีย์นี้มีความละเอียดอ่อน ดังนั้นโปรดเก็บคีย์ไว้เป็นความลับ

สร้างบัญชีบริการ

ในคอนโซล Google Cloud ให้เปิดบัญชีบริการ
ป้อนชื่อ รหัส และคำอธิบายสำหรับบัญชีบริการ
เลือกสร้างและดำเนินการต่อ
เลือกเสร็จสิ้น

สร้างคีย์บัญชีบริการ

เลือกบัญชีบริการ
เลือกเมนูKEYS
เลือกเพิ่มคีย์ แล้วเลือกสร้างคีย์ใหม่
เลือกประเภทคีย์ JSON
เลือกสร้าง

คุณจะได้รับข้อความแจ้งให้บันทึกไฟล์คีย์ลงในเวิร์กสเตชันในระบบ อย่าลืมจำตำแหน่งของสถานที่

ตั้งค่าตัวแปรสภาพแวดล้อม `GOOGLE_APPLICATION_CREDENTIALS`

Google SDK ใช้ตัวแปรสภาพแวดล้อม GOOGLE_APPLICATION_CREDENTIALS เพื่อตรวจสอบสิทธิ์เป็นบัญชีบริการและเข้าถึง API ต่างๆ สำหรับโปรเจ็กต์ Google Cloud

ทำตามวิธีการในเอกสารประกอบเกี่ยวกับคีย์บัญชีบริการ Google Cloud เพื่อตั้งค่าตัวแปรสภาพแวดล้อม GOOGLE_APPLICATION_CREDENTIALS
ตรวจสอบว่ามีการตั้งค่าตัวแปรสภาพแวดล้อมในเทอร์มินัลใหม่ (MacOS/Linux) หรือเซสชันบรรทัดคำสั่ง (Windows) (คุณอาจต้องเริ่มเซสชันใหม่หากเปิดไว้แล้ว)
```
echo $GOOGLE_APPLICATION_CREDENTIALS
```

ให้สิทธิ์บัญชีบริการ

สุดท้ายนี้ คุณจะต้องให้สิทธิ์บัญชีบริการในการจัดการบัตรใน Google Wallet

เปิด Google Pay และ คอนโซล Wallet
เลือกผู้ใช้
เลือกเชิญผู้ใช้
ป้อนอีเมลของบัญชีบริการ (เช่น test-svc@myproject.iam.gserviceaccount.com)
เลือกนักพัฒนาซอฟต์แวร์หรือผู้ดูแลระบบจากเมนูแบบเลื่อนลงระดับการเข้าถึง
เลือกเชิญ

3. เริ่มแอป Node.js ตัวอย่าง

ระยะเวลา 10:00

ในขั้นตอนนี้ คุณจะเรียกใช้แอปพลิเคชัน Node.js ตัวอย่างซึ่งทำหน้าที่เป็นเว็บไซต์ช็อปปิ้งและเซิร์ฟเวอร์แบ็กเอนด์

โคลนที่เก็บตัวอย่าง

ที่เก็บ google-pay/wallet-web-codelab มีโปรเจ็กต์ตัวอย่างที่ใช้ Node.js และไฟล์สคริปต์ต่างๆ ที่เลียนแบบเซิร์ฟเวอร์แบ็กเอนด์ซึ่งใช้สำหรับการจัดสรรคลาสและออบเจ็กต์ของ Pass คุณจะแก้ไขข้อมูลดังกล่าวให้รวมปุ่มเพิ่มลงใน Google Wallet ในหน้าจอรายละเอียดผลิตภัณฑ์

โคลนที่เก็บไปยังเวิร์กสเตชันในเครื่อง
```
git clone https://github.com/google-pay/wallet-web-codelab.git
```

ติดตั้งทรัพยากร Dependency ของโปรเจ็กต์

เปิดที่เก็บที่โคลนในเทอร์มินัลหรือพรอมต์บรรทัดคำสั่ง
ไปที่ไดเรกทอรี web (นี่คือแอปที่จะแก้ไขใน Codelab อื่นๆ ที่เหลือ)
```
cd web
```
ติดตั้งการอ้างอิง Node.js
```
npm install .
```
เปิดแอป
```
node app.js
```
เปิดแอปที่ทำงานใน http://localhost:3000

หากป้อนอีเมลและเลือกสร้างบัตร ก็จะไม่มีอะไรเกิดขึ้น ในขั้นตอนถัดไป คุณจะต้องกำหนดค่าแอปเพื่อสร้างคลาสและออบเจ็กต์บัตรใหม่

4. สร้างคลาสบัตรทั่วไป

ในขั้นตอนนี้ คุณจะได้สร้างคลาสพื้นฐานสำหรับบัตร เมื่อใดก็ตามที่สร้างบัตรใบใหม่ให้กับผู้ใช้ บัตรใบนั้นจะรับค่าพร็อพเพอร์ตี้ที่กำหนดไว้ในคลาสบัตร

คลาสบัตรที่คุณจะสร้างระหว่าง Codelab นี้ใช้ความยืดหยุ่นของบัตรทั่วไปเพื่อสร้างออบเจ็กต์ที่เป็นทั้งเครื่องติดตามป้ายข้อมูลประจำตัวและคะแนนทดสอบ เมื่อมีการสร้างออบเจ็กต์บัตรจากคลาสนี้ ออบเจ็กต์ดังกล่าวจะมีหน้าตาเหมือนกราฟิกต่อไปนี้

คุณสร้างชั้นเรียนบัตรได้โดยตรงใน Google Pay และ Wallet Console หรือใช้ Google Wallet API ใน Codelab นี้ คุณจะสร้างคลาสบัตรทั่วไปโดยใช้ API ซึ่งจะเป็นไปตามกระบวนการที่เซิร์ฟเวอร์แบ็กเอนด์แบบส่วนตัวจะใช้ในการสร้างคลาสบัตร

เปิดไฟล์ web/app.js
แทนที่ค่า issuerId ด้วยรหัสผู้ออกบัตรจาก Google Pay และ คอนโซล Wallet
```
// 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!');
  }
}

เมื่อโค้ดทำงาน ระบบจะสร้างคลาสบัตรใหม่และแสดงผลรหัสคลาส รหัสคลาสประกอบด้วยรหัสผู้ออกบัตรตามด้วยคำต่อท้ายที่นักพัฒนาแอปกำหนด ในกรณีนี้ ค่าต่อท้ายจะได้รับการตั้งค่าเป็น codelab_class (รหัสคลาสจะดูคล้ายกับ 1234123412341234123.codelab_class) บันทึกเอาต์พุตจะมีการตอบกลับจาก Google Wallet API ด้วย

5. สร้างออบเจ็กต์บัตรทั่วไป

ในขั้นตอนนี้ คุณจะต้องกำหนดค่าแอป Node.js เพื่อสร้างออบเจ็กต์บัตรทั่วไปโดยใช้คลาสที่สร้างไว้ก่อนหน้านี้ การสร้างออบเจ็กต์ Pass สำหรับผู้ใช้มี 2 ขั้นตอน

สร้างออบเจ็กต์บัตรในเซิร์ฟเวอร์แบ็กเอนด์

ในวิธีนี้ ระบบจะสร้างออบเจ็กต์ Pass บนเซิร์ฟเวอร์แบ็กเอนด์และส่งไปยังแอปไคลเอ็นต์เป็น JWT ที่ลงนามแล้ว วิธีนี้เหมาะสมที่สุดสำหรับกรณีที่การใช้งานของผู้ใช้สูง เนื่องจากจะช่วยให้มั่นใจได้ว่ามีออบเจ็กต์อยู่ก่อนที่ผู้ใช้จะพยายามเพิ่มรายการดังกล่าวลงในกระเป๋าเงินของผู้ใช้

สร้างออบเจ็กต์บัตรเมื่อผู้ใช้เพิ่มบัตรลงใน Wallet

ในแนวทางนี้ ระบบจะกำหนดออบเจ็กต์ Pass และเข้ารหัสเป็น JWT ที่ลงนามในเซิร์ฟเวอร์แบ็กเอนด์ จากนั้นปุ่มเพิ่มลงใน Google Wallet จะแสดงในแอปไคลเอ็นต์ที่อ้างอิง JWT เมื่อผู้ใช้เลือกปุ่ม ระบบจะใช้ 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!");

หากโหลดแอปซ้ำ ให้ป้อนอีเมล และส่งแบบฟอร์ม คุณจะไม่เห็นผลลัพธ์ใดๆ แอปพลิเคชันแบ็กเอนด์กำลังกำหนดออบเจ็กต์ Pass แต่ไม่ได้แสดงผลเอาต์พุต จากนั้นคุณจะต้องเปลี่ยนบัตรให้เป็นลิงก์เพิ่มลงใน Google Wallet

6. สร้าง ปุ่มเพิ่มลงใน Google Wallet

ในขั้นตอนสุดท้าย คุณจะต้องสร้าง JWT ที่มีการลงชื่อและส่งคืนลิงก์ที่สามารถใช้ในปุ่มเพิ่มลงใน Google Wallet เมื่อผู้ใช้เลือกปุ่ม ระบบจะแจ้งให้บันทึกบัตรลงใน Wallet

สร้างการอ้างสิทธิ์ JWT เข้ารหัสโดยใช้คีย์ส่วนตัวของบัญชีบริการ และส่งปุ่มเพิ่มลงใน Google Wallet ที่มีลิงก์แบบฝัง

// 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 Wallet

7. ขอแสดงความยินดี

ตัวอย่างออบเจ็กต์บัตรทั่วไป

ขอแสดงความยินดี คุณได้ผสานรวม Google Wallet API บนเว็บเรียบร้อยแล้ว

ดูข้อมูลเพิ่มเติม

ดูการผสานรวมทั้งหมดในที่เก็บ GitHub แบบ google-pay/wallet-web-codelab

สร้างบัตรและขอสิทธิ์เข้าถึงเวอร์ชันที่ใช้งานจริง

เมื่อพร้อมที่จะออกบัตรของคุณเองในเวอร์ชันที่ใช้งานจริงแล้ว ให้ไปที่ Google Pay และ Wallet Console เพื่อขอสิทธิ์เข้าถึงเวอร์ชันที่ใช้งานจริง

โปรดดูข้อมูลเพิ่มเติมที่ข้อกำหนดเบื้องต้นของ Web API