mmig/speech-to-flac

Error upon submitting FLAC to Google Cloud Speech API

Closed this issue · 15 comments

dansoloway commented

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 commented

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 commented

That would be great, thanks!

russaa commented

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 commented
dansoloway commented

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 commented

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

russaa commented

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 commented

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 commented

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:

dansoloway commented
russaa commented

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 commented
dansoloway commented

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

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

russaa commented

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 commented

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!