Add support for VAPID

[marco-c]

See also:
https://github.com/marco-c/web-push/blob/b9156f658fc028c3388dbed005ffa5e2012b55ac/index.js#L206
https://github.com/mozilla/wp-web-push/pull/283/files#diff-05b502d88da481dfcef81a7fdb4a6da4R60

wp-web-push is using the same libraries you're using for the payload.

[Minishlink]

See #41. It works with Firefox, but I get a 400 UnauthorizedRegistration with Chrome (FCM)...

[andriytkachiv]

@Minishlink I am right now testing your library and with Chrome (FCM) receiving 400 UnauthorizedRegistration error. Do you know any workaround for that?

[Minishlink]

You're using VAPID?

[andriytkachiv]

@Minishlink Sorry, that was my mistake, now works :) Thanks, great library!

[Minishlink]

@andriytkachiv Cool! :) Were you using this branch? I'd like to know because I can't get FCM to work with VAPID. (Firefox does)

[5pilow]

I just discovered your vapid branch, I spent couple of days adding the support for VAPID in the library x) With my modifications it's works well on both Firefox and Chrome, I will try to find out why it doesn't work for you with FCM :)

[Minishlink]

Cool, thanks! Is the code on GitHub so that I may look into how you wrote it differently?
From what I see things, either Firefox implement two forms of signature (DER and uncompressed) and Chrome only one, or FCM has banned my IP due to my tests. :)

[5pilow]

What I did to generate my VAPID keys and create a JWT in php :
https://github.com/5pilow/push-notifications
I think it's still a little bit dirty, but at least it works. I hope it will help you.

I'm not an expert with all these key manipulations, the fact that there are a lot of different formats (between node and php libraries) is disturbing...
I will still try to make it work with the vapid branch, how do you generate the JS Uint8Array from your public key?

[Minishlink]

Thanks, I'll look into it.

I find it much simpler to work with base64-encoded uncompressed keys rather than that very long PEM format. But the best of both world would be the (base64-encoded) DER format I guess, since it's as widely spread as PEM but not as long as the former.

By the way, here's the Javascript code (found on the NodeJS web-push readme):

function urlBase64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - base64String.length % 4) % 4);
  const base64 = (base64String + padding)
    .replace(/\-/g, '+')
    .replace(/_/g, '/');

  const rawData = window.atob(base64);
  const outputArray = new Uint8Array(rawData.length);

  for (let i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}

[Minishlink]

@5pilow Ok so I also get a 400 with your code... Can you test your FCM endpoint with my vapid branch please?

[5pilow]

I have also a 400 error using the vapid branch :/
Do I initialize correctly (keys format)?
PHP:

$auth = array(
    'GCM' => 'MY_GCM_API_KEY',
    'VAPID' => array(
        'subject' => 'mailto:me@website.com',
        'publicKey' => 'BM/njB+2FaVWgLxEgmtv3Jd68ye6aMoPpIn6/iUSlheppTiSkirEFFjbTbFxpjkFuirIbwNxpECFa/eIxmRnDuE=',
        'privateKey' => 'VFiAbsorcWz4CIRjsLDcmOplh+fbo/2W/vD/Hb/RBSg='
    ),
);

JS (the key has been converted from the public key above)

new Uint8Array(
[4, 207, 231, 140, 31, 182, 21, 165, 86, 128, 188, 68, 130, 107, 
111, 220, 151, 122, 243, 39, 186, 104, 202, 15, 164, 137, 250, 
254, 37, 18, 150, 23, 169, 165, 56, 146, 146, 42, 196, 20, 88, 
219, 77, 177, 113, 166, 57, 5, 186, 42, 200, 111, 3, 113, 164, 
64, 133, 107, 247, 136, 198, 100, 103, 14, 225]
)

I tried to replace the JWS creation with my function but I doesn't change anything, The only difference I think is when we create our keys, but I don't see what is the difference :/

Also, I tested my code on a production server and I manage to make it works too :) But I had to change the version of the gmp lib, I switched to php7.0-gmp and I get rid of a 400 (I don't know exaclty why).

[gauntface]

This may be helpful for the VAPID implementation.

I just raised a PR over on the other repo (sorry didn't realise VAPID work had begun on this one) that adds integration tests for all browsers and it should be trivial to run VAPID changes through Chrome and Firefox:

#2

[Minishlink]

@5pilow Thanks, I'm relieved it works at least with one configuration. Have you changed anything else than the version of GMP to make it work?

@gauntface Thanks, I'll check it out!

[Minishlink]

@gauntface So the VAPID implementation also doesn't work with Chrome on Travis for some unknown reason. :( Is Chrome's code that is related to VAPID public (eg in Chromium)? Also, is there a way to have more information than a 400 UnauthorizedRegistration?

[gauntface]

I'll try and dig up some more information on the error codes for 400 vs 40X which I believe mean something different, but generally Unauthorized Registration just means the details provide during subscription and the details provided with the send request didn't match.

[gauntface]

Just spent time looking into this and breaking down the tests to compare node and php input / output, the PHP library is outputting something different to node for the JWT payload.

I've dumped stuff here: https://github.com/web-push-libs/web-push-php/tree/vapid-playground (Just because I'm exploring and it's probably not suitable for merging yet)

[Minishlink]

Thank you for your help and time. I looked at the modified VAPIDTest and the test on Travis but is seems the expected jwt payload is built with the subject url whereas the actual jwt payload is built with the subject mailto :/

In my VAPIDTest, the expected data was actually from the Node library, which I had customized to output these values. The actual data I get with web-push-php is the same, except the last part of the JWT. This last part is the generated signature, so it will change and is not unique to the header/payload/key.

[gauntface]

Ignore me, the issue was a missing ':'

 $audience = parse_url($endpoint, PHP_URL_SCHEME).'://'.parse_url($endpoint, PHP_URL_HOST);

[Minishlink]

Nice catch, thank you very much!!