Giter Site home page Giter Site logo

covidpass-org / covidpass Goto Github PK

View Code? Open in Web Editor NEW
1.2K 19.0 64.0 829 KB

Web app for adding EU Digital COVID Certificates to your wallet apps

Home Page: https://covidpass.marvinsextro.de

License: MIT License

Dockerfile 1.95% JavaScript 2.14% TypeScript 95.91%
covid-19 certificate wallet pass

covidpass's Introduction

CovidPass

This web app offers the ability to add your EU Digital Covid Vaccination Certificates as a pass into your favorite wallet apps on iOS/watchOS or Android/wearOS. CovidPass accomplishes this without sending your data to a server and instead only uses a hashed representation for the signing step.

Getting started

If you want to add your vaccination certificate into your wallet with CovidPass, there are two main options.

  • Use the CovidPass web app hosted by us
  • Use your own Apple Developer Certificate to generate a pass

Note that the latter option requires you to have an Apple Developer Account and is a more complicated process.

Quick start

Using our service

Running it yourself

Note that the following options do not have support for actually converting your certificates as they lack the API connection for the signing step. You can read about how you can use your own Apple Developer Certificate in the chapter below.

Debug the web app

yarn install
yarn dev

Run the Docker container

docker build . -t covidpass
docker run -t -i -p 3000:3000 covidpass

Deploy on your own server

We have a separate repository containing a docker-compose file which you can use for your own deployment of CovidPass.

FAQ

I do not want to trust a third party with my vaccination data, what makes this a secure option?

Processing of your data happens entirely in your browser and only a hashed representation is sent to the server for the signing step.

How do I make sure that nobody can access my vaccination pass from the lock screen (iOS)?

Navigate to the "TouchID & Code" or "FaceID & Code" or just "Code" section in the Settings and switch the toggle to off for Wallet in the section "Allow access from the lock screen". Also see this official guide from Apple.

Why don't the official apps offer this feature?

The official apps like Corona-Warn-App have decided against this feature due to security concerns. For example, this was discussed here or here.

Why is my certificate not recognized?

We are in an early development stage and actively working on improving support for all EU countries. Feel free to create an issue describing the problem you faced.

Using your own Apple Developer Certificate

Get your certificate

  • Sign into your Apple Developer Account

  • Go to Certificates, Identifiers and Profiles

  • Register a new Pass Type Identifier under the Identifiers tab

  • Create a new Pass Type ID Certificate under the Certificates tab

  • Select your previously created Pass Type Identifier in the process

  • Move your new certificate to the My Certificates tab in the keychain

  • Export your certificate as a .p12 file

  • Install node.js and download the passkit-keys script

  • Create a keys folder and put the .p12 file inside

  • Run ./passkit-keys <path to your keys folder>

  • You may have to type in the passphrase you defined during the export step

  • Base64 encode the contents of the newly generated .pem file inside the keys folder

Run the API locally

A description of how you can use your certificate locally with the API will be provided in the readme of the CovidPass API. To connect the web app to your local server, you have to set the API_BASE_URL environment variable accordingly.

Explanation of the process

The whole process of generating the pass file happens locally in your browser. For the signing step, only a hashed representation of your data is sent to the server.

First, the following steps happen locally in your browser:

  • Recognizing and extracting the QR code data from your selected certificate
  • Decoding your personal and health-related data from the QR code payload
  • Assembling an incomplete pass file out of your data
  • Generating a file containing hashes of the data stored in the pass file
  • Sending only the file containing the hashes to the server

Second, the following steps happen on the server:

  • Receiving and checking the hashes which were generated locally
  • Signing the file containing the hashes
  • Sending the signature back

Finally, the following steps happen locally in your browser:

  • Assembling the signed pass file out of the incomplete file generated locally and the signature
  • Saving the file on your device

Privacy policy of our service

You can find the full privacy policy of our service here.

Credits

The idea for this web app originated from the solution of an Austrian web developer, which only works for Austrian certificates at the moment.

Contribute

Any contribution to this project is welcome. Feel free to leave your suggestions, issues or pull requests. We are also looking for people to translate this web app for all EU countries.

covidpass's People

Contributors

ein-tim avatar everdrone avatar frawolf avatar hauketoenjes avatar ibobo avatar j3r3m067 avatar julien1619 avatar khaost avatar mackonsti avatar marvinsxtr avatar mcvendrell avatar nilaallj avatar soerenbusse avatar unk1nd avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

covidpass's Issues

Provide more options for the design

Please provide more colour options, for example like the green on the webpage and more pastel colours.

Also should be an option to extract the name of the person in latin as for example now my pass contain my original name which is in Cyrillic and cannot be read in most of the EU countries :)

undefined is not an object (evaluating 't.decodedData[-260].v[0]')

The following error message is displayed in a red rectangle on the bottom of the page when I click Add to Wallet.
undefined is not an object (evaluating 't.decodedData[-260].v[0]')

I have the same error when using the camera and also when scanning the PDF.

It was working for vaccination QR codes (tested a couple of days ago).
It failed for the negative PCR-test result QR code (tested today, 08.07.21).

All QR codes I tested were officially generated by the authorities in Romania.
Tested on: https://covidpass.marvinsextro.de/

QR Code support international

Hello, Canadian here. Our vaccination passport is going live in a week or so and like other countries, the app offered does not allow the usage of the wallet.

I was wondering if there is any plan to support international QR code.

Actually, I'd be interested in knowing a bit more about where the decoding is being done and what are the limitations or how to implement support for Canadian code. If someone would give me some pointers I can certainly open a PR.

Thanks

Cannot read property 'co' of undefined

Hi, when I try to load the certificate in Chrome 92.0.4515.131 for Android 11, I get the following error: Cannot read property 'co' of undefined
The error appears when uploading the certificate in PDF or PNG.
Is there any way to fix it? Thanks

image

Accept other formats than pdf, direct access to camera and gallery

I don't have a certificate myself but I testet your solution with an demo code and it works like a charme.

But I think it is a bit complicated to have to convert the image of the qr-code into pdf before you can use it.

I've looked a bit into the code, but I'm not really an expert with js, but it looks like the pdf is rendered and then processed as image, so i think it should be possible to use images in the first place.

And so the select element should be changed to allowing all 3 options (gallery, camera, files-app) too.

This would be a good improvement and simplify the use of covidpass.

Trying to run yarn dev results in SyntaxError

Hi!
I wanted to run the Front-End application on my computer. For doing that, I've simply cloned this repository, then executed yarn install and yarn dev but got, instead...

`(base) MacBook-Pro-193:covidpass gimmi$ yarn install
yarn install v1.22.11
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] 🔍 Resolving packages...
success Already up-to-date.
✨ Done in 0.28s.
(base) MacBook-Pro-193:covidpass gimmi$ npm run dev

[email protected] dev
next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
event - compiled successfully
event - build page: /next/dist/pages/_error
wait - compiling...
event - compiled successfully
event - build page: /
wait - compiling...
event - compiled successfully
/Users/gimmi/Desktop/prova/covidpass/node_modules/pdfjs-dist/build/pdf.js:2205
annotationStorage: annotationStorage?.serializable || null
^

SyntaxError: Unexpected token '.'
at wrapSafe (internal/modules/cjs/loader.js:1072:16)
at Module._compile (internal/modules/cjs/loader.js:1122:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
at Module.load (internal/modules/cjs/loader.js:1002:32)
at Function.Module._load (internal/modules/cjs/loader.js:901:14)
at Module.require (internal/modules/cjs/loader.js:1044:19)
at require (internal/modules/cjs/helpers.js:77:18)
at Object.pdfjs-dist (/Users/gimmi/Desktop/prova/covidpass/.next/server/pages/index.js:623:18)
at webpack_require (/Users/gimmi/Desktop/prova/covidpass/.next/server/webpack-runtime.js:33:42)
at eval (webpack-internal:///./src/process.ts:8:68)
^C(base) MacBook-Pro-193:covidpass gimmi$
`

My env is a MBP M1 with Mac OS Big Sur and npm 7.x.
Does anybody know how to solve this?

Android Passes / Google Pay support

Even though .pkpass to Google pay converters exist, and they can work CovidPass passes using them is quite tedious, and it would be great to support this here as well

QR code support for everyone

Hello, a Turkish guy here.

Our vaccination program started like a month (or two). And the government is about to make vaccination mandatory for almost everywhere. They are checking it manually and It's takes a lot of time. And this is not caused because check system, It's about people whom being checked. They are unlocking their phones, opening the Government Health App (which doesn't have support for Wallet Apps), find the Vaccination Certificate and being checked. That's why there is usually a queue in front of the stores. And in these days being in crowd is not a good idea.

So, I was wondering do you have any plans to support Turkey's, even international, QR codes.

That would be so good for anyone not lives in EU :D

Thanks for your work man...

"Dimensions could not be found." error

Hello @marvinsxtr when I tried the Greek localisation on my iOS phone running 14.7.0 and selecting GRAY colour for the exported Wallet item, I noticed an error "Dimensions could not be found". I am not sure if this was AFTER just the QR scan from camera OR the generation of the Wallet item, as it's on the bottom and I accidentally saw the error

Here is the visual output:

IMG_0168

Where would this come from, any idea? Could it be due to the colour scheme or the localisation? Thank you.

Getting “Spikevax” as the vaccine

Hi!

I recently received my first dose of the Moderna vaccine, and as I had seen your project previously on Reddit I decided to give it a shot. It works wonderfully but the generated pass that I am getting for the iOS wallet has “Spikevax” as the vaccine. I imagine this is supposed to say something like “Moderna” or “Pfizer”, so maybe there’s something about the particular QR code on the certificate that I submitted that isn’t encoded as expected by the app.

I’d be happy to provide my certificate for debugging purposes, or even make a pull request when I have the time, but I also wanted to make sure this isn’t expected behaviour.

Thanks!

Warn the user when not using Safari

First of all, thanks for your project, having the pass in the wallet is so handy.
Atm there's just a texture saying to use Safari, but I haven't seen it in my first try and was wondering why your site wasn't adding the pass to the wallet since no warning was being shown.
I'd suggest a browser detection and a browser warning should appear when using it in another browser, so that the user is aware of it.

Portuguese QR code not recognized

Hi! Portuguese QR code are not recognized. Is there any way you could update to work with Portuguese QR codes? I can send an example if needed.

Possibility to not suggest on lockscreen

EU Covid QR code has a lot of info on you. Anyone finding your phone is able to see the CovidPass without unlock it. Just double tap on home or side button.

Apple Wallet provide an option to "Suggest on Lockscreen" or not for some cards. It could be great to have this option so nobody can see our QR code without unlocking the phone.

thanks for this nice web site by the way!

Exemple here on my supermarket card.
Untitled 2

Test result: not detected

The pass generated using the qr code with negative covid test result shows:

Test result: not detected

instead of negative

Colors from Human Interface Guidelines

Took the colors from the Human Interface Guidelines for iOS

The colors below are for the Light theme, we can also find the average color between the Light and Dark version so it suits every wallet more pleasantly but I'll open a PR with that if you like the idea.

This implies that new localized keys must be added

public static COLORS = {
  white:     'rgb(255, 255, 255)',
  black:     'rgb(0,   0,   0)',
  darGrey:   'rgb(44,  44,  46)',
  lightGrey: 'rgb(142, 142, 147)',

  red:       'rgb(255, 59,  48)',
  orange:    'rgb(255, 149, 0)',
  yellow:    'rgb(255, 204, 0)',
  green:     'rgb(52,  199, 89)',
  mint:      'rgb(0,   199, 190)',
  teal:      'rgb(48,  176, 199)',
  cyan:      'rgb(50,  173, 230)',
  blue:      'rgb(0,   122, 255)',
  indigo:    'rgb(88,  86,  214)',
  purple:    'rgb(175, 82,  222)',
  pink:      'rgb(255, 45,  85)',
  brown:     'rgb(162, 132, 94)',
}

Is it normal that the QR Code generated does not look the same ?

Hi,
I live in France and I just got the Covid Pass !
After using CovidPass I can see that the QR Code does not look the same as the one on the paper and the one generated in TousAntiCovid (French Covid app).
But all three pass seem to be working with TAC Verif (French app for professional to check COVID Pass validity). The app could see my name and birthdate (it still showed all three n’as invalid because it’s not been 7 days yet).
Thanks

Unable to read QR Code

First of all, nice App :)

The Website can't ready my QR Code, I tried the full document, just the QR code with or without a flash. All Using the iPads Files App Scan Document Feature, I also tried to directly photograph the QR Code with my iPhone. Nothing worked:/

Same on my MacBook with Chrome or Safari.

I have a genuine EU COVID-19 Vaccination Certificate created by a local Pharmacy in Germany. My name has a Umlauts like ö and ä in it. May this be the issue?

I trued to check on any error logs, but nothing in the Web Console.

PS: I tried both the first and second vaccination certificate separate and combined in one PDF

Problems with certificates on Apple Watch

Hi,

problem description:

Step 1: open one of the two certificates on an Apple Watch (here: SE GPS 40mm) in the Wallet, the QR code is shown
Step 2: swipe from top to bottom and see the "Vaccination Card" and below the QR code
Step 3: tap on "Close" in the upper left corner
Step 4: the file is closed and a black screen with the word "Wallet" in the upper left corner appears, no further action possible, the app "Wallet" has to be closed completely

Is it a bug of the wallet app on the Apple Watch?

STEP 1: Step-1 STEP 2: Step-2 STEP 3: Step-3 STEP 4: Step-4

No QR code found in file / wrong file type

I cannot import the 2nd vax certificate. Neither as a jpeg, png nor pdf.
It always says, that there could not be a QR code be found or it says that the file type is not supported. Also it says that on jpeg, png and pdf.

Add technical expiry date

It would be nice to have the technical expiry date of the certificate on the back of the card. That would further make a great place to have a link back to the website, for when users need to create a new pass for a new certificate. Also, does the pass itself expire with the certificate?

Strange name of vaccine displayed

I just tried the update version, the romanised name works, but instead of Moderna says Spikevax which nobody knows what is it. Can you revert it back as before to say Moderna?

Certificate not shown on ios lock screen

Some boarding and other passes shown if I open wallet from lock screen,
but unfortunately I had to unlock my phone and open wallet app to see my vaccination certificate.

Could you, please, add an option to show certificate without unlocking?

Add support for sharing

Hi, I wanted to generate passes for my family but they cannot be shared. Is that intentional?

All of the other passes in my wallet have the sharing button.

Here are some (redacted) screenshots:
A67B9A3E-4413-4AE7-A07C-2809C69E2538
39C73534-F778-4D19-BD5A-01209C6DAAB2

You can see that the sharing button isn’t available on the covid pass 😢

Use static pass.json to prevent possible misuse

At the moment, any pass with the CovidPass logo can be created with the API. To prevent this, we can use localization as described in the wallet developer guide. The way this would work is that the only variable contained in the pass.json is the serial number. All other data is static and refers to the localization files or does not change. This way, we can simply map one serial number to one hashed pass.json and give out only passes with such pass.json.

The reason why we need the serial number is that Apple Wallet overwrites passes with the same pass type identifier and serial number.

Website cannot detect camera being blocked in Settings

Hello @marvinsxtr thank you for your great work for all Apple Wallet users out there.

I am running iOS 14.6 and when I launched http://covidpass.marvinsextro.de/ on Safari, the camera could not be activated.

As far as I can remember, I had never set the camera as "inaccessible" from Settings -> Safari -> Settings for Websites -> Camera, so I was wondering if your code of your website could possibly detect the camera being denied access, via some Web API, and show a warning pop-up such as "Safari could not access your camera, please change the permissions in Settings".

Is this possible for websites to get that information from Safari?

Thank you!

Low Code Quality, Transition to Typescript

We quickly added most of the features in this project in the last days, which caused the code quality to be low.

We intend to improve it over the next days and also transition to typescript.

Can't use .jpg files

The text on https://covidpass.marvinsextro.de/en says: "Please scan the QR code on your certificate or select a screenshot or PDF page with the QR code. Note that selecting a file directly from camera is not supported."

When selecting a screenshot of the certificate shown in the Corona-Warn-App, on a mobile, I get: "Invalid file type".
Trying to elect the screenshot on my MacBook does not work at all, as it is a jpg file but CovidPass only allows PDFs.

If you don't support screenshots (anymore), don't write it in the text. If this is unintended, please investigate the bug and fix it (:

PS: I don't fully understand what: "Note that selecting a file directly from camera is not supported." means, there is an option to start the camera and scan the certificate. Or what is meant with this note?

Watch wallet crashes

After adding and viewing the QR code once on the Watch, the Wallet app (I.e. Apple Pay) crashes as soon as I launch it via double-tap on the side button. Removing the QR pass + killing the Wallet app on the Watch resolves the problem.

Invalid Medical Product

Adding a certificate with the vaccine type: Biontech - Comirnaty, fails to create the pass with message "Invalid Medical Product" .
The Astrazeneca vaccine works perfectly.

Screenshot 2021-07-23 at 15 34 09

Pass only in Wallet of iPhone not in Watch visible

Hello,

I have now tried 2x to create my CovidPass using the website. Once I used a PDF, the other time I scanned the QR code with the camera. With both attempts, only the result was visible in the wallet of the iPhone, but not on the Watch.
iPhone 12 Pro Max with iOS 14.6 and Apple Watch Series 5 with WatchOS 7.5

The iPhone and Apple Watch were on the same Wi-Fi network. Only one other card (VIMPay) is stored in the Wallet. (and yes I tried to make anything else visible by wiping or turning the crown).
Best regards
Kai

Certificate selection does not work

First of all, thank you for this project!

Click on "Start Camera" or "Select File" does nothing (see the attached video).
Safari has permission to access the microphone and camera.

iPhone 6
iOS 12.5.4

issue_covidpass.mov

Add random data into the pass payload

Hi,

I'm not an Apple Wallet expert (and not even an Apple user at all), so please correct me if any of my assumptions are incorrect.

This app sends to the back-end a SHA-1 hash of a payload built from the DGC data. I think the use of SHA-1 is acceptable here (and probably a requirement of Apple Wallet anyways 😒). Still, if I'm not mistaken, the payload is deterministic for a given DGC:

const pass = {
. So this hash could be used by a modified back-end as a unique identifier for a DGC and could be used for instance to determine how many times a given DGC was scanned or if a DGC you had by another mean has already been processed in the past by the back-end. While I don't think it's very bad, I don't think it is intended and IIUC could easily be avoided at minimum cost by adding some randomly generated bits to the pass payload. As a result, it would leak even less info from the DGC to the back-end and provide even more guarantees to the users.

WDYT?

EU Members States' Digital COVID Certificate Insights

You can find some very useful insights for each EU member state at eu-digital-green-certificates/dgc-testdata, which is the Official GitHub Organization of the EU Digital COVID Certificates (EUDCC) project.

In addition, for EU member countries, it would be preferably to use EU flag with country's code placed in centre of 12 stars as a logo for the pass instead of current ✔️ CovidPass logo, as that's what most EU countries use at their COVID Certificate.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.