Error upon submitting FLAC to Google Cloud Speech API

[dansoloway]

Hello,

Thanks for this amazing code! I am trying to get it to work with Google Cloud API. I added the API key, but am getting this error:

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Any ideas? Thanks! Daniel

[russaa]

I will update this example project to be used with the google-cloud-speech API (currently it's set up to the old speech API which is a different service).

[dansoloway]

That would be great, thanks!

[russaa]

I updated the example to work with Google Cloud Speech service.

Unfortunately, for now it only works if you use your API key, i.e. does not work using OAuth in combination with a service account key (because Google does not seem to support CORS authentification for the Cloud Speech directly).

So I would advise against using this in any publicly accessible form, since you'd need to include your (secret) API key.

NOTE: for testing you can set your API key as URL param, e.g. on the demo page
https://mmig.github.io/speech-to-flac/?key=<your API key>

[dansoloway]

Wow!! Thanks so much the quick reply and update. Best of all, it works! Well done.

I really would like to figure out a way to use this on a public site, so I'll work on a way to obfuscate the API key. Doesn't seem like OAuth is necessary, because we are not using sensitive user data...

On 12 February 2018 at 22:21, russaa notifications@github.com wrote:

I updated the example to work with Google Cloud Speech service.

Unfortunately, for now it only works if you use your API key, i.e. does not work using OAuth in combination with a service account key (because Google does not seem to support CORS authentification for the Cloud Speech directly).

So I would advise against using this in any publicly accessible form, since you'd need to include your (secret) API key.

NOTE: for testing you can set your API key as URL param, e.g. on the demo page https://mmig.github.io/speech-to-flac/?key=

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/mmig/speech-to-flac/issues/3#issuecomment-365049640, or mute the thread https://github.com/notifications/unsubscribe-auth/Ad7Qx4Jvx86z9zCC6rjnRmS-2RkZ3wczks5tUJ0sgaJpZM4SCB5q .

[dansoloway]

What about doing an AJAX request and using PHP to provide the value of the API key? That way it would get set right before the API request so you wouldn't be able to see, right?

[dansoloway]

Ah, that won't work. You can just monitor the http requests. Hmm...

[russaa]

the request wouldn't necessarily be be the problem, e.g. if you make a POST request via an SSL connection

But for really secret stuff, you just should not transfer it to a javascript client, if you cannot be sure, that only friendly users will have access
... because javascript is plain-text & quite easily debuggable; each major browser is shipped with extensive development tools

The OAuth token has the main advantage that its time-limited -- even if someone would spy the access-token, it could only be miss-used for some limited amount of time.

[dansoloway]

Sorry to drive you crazy! So here is what I think would work... https://codepen.io/iospadov/post/apis-and-authentication-keeping-your-access-keys-secure

Send the XMLHttpRequest to PHP on my server, add the API Key, and then make the API call via PHP, using the data received from the XMLHttpRequest, Does that make sense to you?

[russaa]

yes, basically a proxy service from the client to your server to the Google service

But in that case, I would use one of the client libraries that Google offers for the Cloud Speech services -- it's probably much easier to use

Another approach would be the OAuth authentification (i.e. using a service account key) in combination with Google Cloud Storage:

• upload the audio using the Google Could Storage service (which does support CORS)
• reference the uploaded audio by its uri in the request to the Could Speech service

[dansoloway]

What about using this? https://developers.google.com/api-client-library/javascript/features/cors

On Feb 12, 2018 11:11 PM, "russaa" notifications@github.com wrote:

yes, basically a proxy service from the client to your server to the Google service

But in that case, I would use one of the client libraries that Google offers for the Cloud Speech services -- it's probably much easier to use

Another approach would be the OAuth authentification (i.e. using a service account key) in combination with Google Cloud Storage:

• upload the audio using the Google Could Storage service (which does support CORS)
• reference the uploaded audio by its uri https://cloud.google.com/speech/reference/rest/v1/RecognitionAudio in the request to the Could Speech service

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/mmig/speech-to-flac/issues/3#issuecomment-365063285, or mute the thread https://github.com/notifications/unsubscribe-auth/Ad7Qx2EPwz-h1wJmBhF_D3FIu9zsg90vks5tUKkBgaJpZM4SCB5q .

[russaa]

nice find!
I did not know about the possibility to set the access token as URL param

I changed the example code, so that is works now with the access_token (generated using a service key) too.

For a real-live application you'd need a mechanism for users to retrieve the access_token with a request to a service or something similar.

[dansoloway]

Nice job! That send like s big step forward. Thanks :) I'll let you know how I progress.

On Feb 13, 2018 2:08 PM, "russaa" notifications@github.com wrote:

nice find! I did not know about the possibility to set the access token as URL param

I changed the example code, so that is works now with the access_token (generated using a service key) too.

For a real-live application you'd need a mechanism for users to retrieve the access_token with a request to a service or something similar.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/mmig/speech-to-flac/issues/3#issuecomment-365248434, or mute the thread https://github.com/notifications/unsubscribe-auth/Ad7Qx-0Srm-F1ncIe-yGi2yram6ExMsaks5tUXtVgaJpZM4SCB5q .

[dansoloway]

Hi! To use this on production, would need to implement this, correct?

https://developers.google.com/identity/protocols/OAuth2UserAgent

[russaa]

hmm, I am not sure -- I am not an expert in this, but it seems to me, the process described in the link is for granting an app access to Google user's private account/data (or parts thereof).

What would be needed here, is kind of the reverse scenario: it is not the user allowing access, but the web app/server/etc allowing access to the recognition service.

So you would need to know which users you want to grant access to this service -- if it's all users who have a Google account, then you could use the process that you linked to.

Basically, you need some process to decide which users should be allowed to use your service (whatever that process that might be) and then generate access_tokens for the allowed users.

For generating the access_tokens on your server, I included a simple sample script create_access_token.js in the repo. This would needed to be wrapped in service, and the service should only be accessible by allowed users.
E.g. if you use apache and have a fixed list of users, you could simply use .htaccess with basic-auth for the web site.

[dansoloway]

Hi, I got this working! I am generating an access_token via PHP on the server side, then redirecting to your index.html page with key=[access_token]. For my purposes, this is good enough because I will be authenticating the user before they even get to the sound recording, and the access_token is only good for this app.

The ony issue for me is that is takes around 5 seconds to get a response back from Google Cloud. I would like to try to implement a streaming version, but that is a project for another day. Thanks so much for your help!