Passbook es una cartera virtual para guardar entradas de todo tipo como: cine, teatro, billetes de vuelos, tren, etc.
En este tutorial os enseñaré como crea tarjetas de passbook en iOS o android (passwallet) usando PHP.
Requisitos para crear los certificados, sólo hace falta una vez:
- Ordenador mac.
- Cuenta de developer en apple.
- Navegador safari con chrome no se pueden generar.
4- Rellenamos la información:
- Pass Type ID Description, ej: test
- Identifier, ej: pass.test
5- Para confirmar pulsamos sobre continue, register y done.
6- En el listado de Pass Type IDs selecciona el passbook y pulsa sobre Edit.
7- Pulsa sobre "Create Certificate" > Continue.
8- En spotlight busca y abre la aplicación "Acceso a llaveros".
9- Abre el menú Acceso a llaveros > Asistente para certificados > Solicitar un certificado de una autoridad de certificación.
10- Rellena el formulario con tu nombre, email y marca la opción de la solicitud se guarda en disco, se guardará un fichero llamado CertificateSigningRequest.certSigningRequest.
11- Vuelve a safari para generar el certificado, pulsa en choose file, selecciona el fichero creado CertificateSigningRequest.certSigningRequest y para confirmar pulsa Generate.
12- Descarga el certificado pass.cer.
13- Haz doble clic sobre el .cer que se ha descargado.
14- En la parte izquierda donde pone categorías, selecciona "Certificados"
15- Busca "pass", selecciona Pass Type ID: pass.test.
16- Accede al menú Archivo > Exportar items.
17- Guarda el fichero con el nombre "Certificate.p12".
18- Introduce una contraseña que quieras y después con la del sistema.
4- Edita las siguientes lineas con tus datos:
$Certificates = array('AppleWWDRCA' => 'AppleWWDRCA.pem',
'Certificate' => 'Certificate.p12',
'CertPassword' => 'pass');
5- Personaliza el contenido y el diseño de tu tarjeta passbook:
- foregroundColor: color del texto.
- backgroundColor: color de fondo.
- logoText: titulo que aparece en el listado de passbooks.
- barcode > message: contenido del QR.
- primaryFields, secondaryFields, auxiliaryFields: contenido del passbook.
Es muy importante que pongas estos datos bien o si no safari dará los passbooks como invalidos:
- passTypeIdentifier: identificador del passbook que hayas registrado en apple developer portal, por ejemplo pass.test
- teamIdentifier: Esto lo puedes ver en Developer Center > View Account > Team ID
6- Al acceder desde el móvil a la URL donde hayamos programado el passbook se descargará la tarjeta y se abrirá con la app correspondiente.
Notas
Para que funcione el escaner que viene integrado con passbook es importante:
1- El enlace sea https.
2- El .pkpass bundle tiene que ser válido.
3- Que se declaré la cabecera header('Content-Type: application/vnd.apple.pkpass');
He seguido tu tutorial y me da un error al tratar de instalarse en el móvil. Tanto en Android como ios. Lo de que el enlace tiene que ser https, ¿a qué te refieres? ¿Es necesario para que se pueda instalar en un iphone o para leer los barcodes?
En este tutorial os enseñaré como crea tarjetas de passbook en iOS o android (passwallet) usando PHP.
Requisitos para crear los certificados, sólo hace falta una vez:
- Ordenador mac.
- Cuenta de developer en apple.
- Navegador safari con chrome no se pueden generar.
Certificados necesarios:
- Certificate.p12
- AppleWWDRCA.pem
Pasos para generar Certificate.p12
1- Ir a Apple Developer Center > Certificates, Identifiers & Profiles > Certificates
2- Identifiers > Pass Type IDs.
3- Pulsamos sobre el botón de añadir "+".
4- Rellenamos la información:
- Pass Type ID Description, ej: test
- Identifier, ej: pass.test
5- Para confirmar pulsamos sobre continue, register y done.
6- En el listado de Pass Type IDs selecciona el passbook y pulsa sobre Edit.
7- Pulsa sobre "Create Certificate" > Continue.
8- En spotlight busca y abre la aplicación "Acceso a llaveros".
9- Abre el menú Acceso a llaveros > Asistente para certificados > Solicitar un certificado de una autoridad de certificación.
10- Rellena el formulario con tu nombre, email y marca la opción de la solicitud se guarda en disco, se guardará un fichero llamado CertificateSigningRequest.certSigningRequest.
11- Vuelve a safari para generar el certificado, pulsa en choose file, selecciona el fichero creado CertificateSigningRequest.certSigningRequest y para confirmar pulsa Generate.
12- Descarga el certificado pass.cer.
13- Haz doble clic sobre el .cer que se ha descargado.
14- En la parte izquierda donde pone categorías, selecciona "Certificados"
15- Busca "pass", selecciona Pass Type ID: pass.test.
16- Accede al menú Archivo > Exportar items.
17- Guarda el fichero con el nombre "Certificate.p12".
18- Introduce una contraseña que quieras y después con la del sistema.
Pasos para generar AppleWWDRCA.pem
1- Descarga AppleWWDRCA.cer
2- Abrelo con el acceso a llaveros.
3- Selecciona Apple Worldwide Developer Relations Certification Authority.
4- Accede al menú Archivo > Exportar items.
5- Guarda el fichero como AppleWWDRCA.pem (importante selecciona el formato de archivo Privacy Enhanced Mail .pem).
Crea tus propias tarjetas passbook con PHP
1- Descarga la clase passkit.
2- Sube el fichero passkit.php en tu servidor junto los certificados Certificate.p12 y AppleWWDRCA.pem
3- Ejemplo de passbook
4- Edita las siguientes lineas con tus datos:
$Certificates = array('AppleWWDRCA' => 'AppleWWDRCA.pem',
'Certificate' => 'Certificate.p12',
'CertPassword' => 'pass');
5- Personaliza el contenido y el diseño de tu tarjeta passbook:
- foregroundColor: color del texto.
- backgroundColor: color de fondo.
- logoText: titulo que aparece en el listado de passbooks.
- barcode > message: contenido del QR.
- primaryFields, secondaryFields, auxiliaryFields: contenido del passbook.
Es muy importante que pongas estos datos bien o si no safari dará los passbooks como invalidos:
- passTypeIdentifier: identificador del passbook que hayas registrado en apple developer portal, por ejemplo pass.test
- teamIdentifier: Esto lo puedes ver en Developer Center > View Account > Team ID
6- Al acceder desde el móvil a la URL donde hayamos programado el passbook se descargará la tarjeta y se abrirá con la app correspondiente.
Notas
Para que funcione el escaner que viene integrado con passbook es importante:
1- El enlace sea https.
2- El .pkpass bundle tiene que ser válido.
3- Que se declaré la cabecera header('Content-Type: application/vnd.apple.pkpass');
Enlaces de interés
- Passbook for Developers
- Passbook Programming Guide
- Passbook Package Format Reference
Nosotros lo acabamos de integrar en betabeers para hacer la validación de usuarios :)
30/12/2014 23:01
30/06/2016 10:07
He seguido tu tutorial y me da un error al tratar de instalarse en el móvil. Tanto en Android como ios. Lo de que el enlace tiene que ser https, ¿a qué te refieres? ¿Es necesario para que se pueda instalar en un iphone o para leer los barcodes?
Saludos!