I'm building a Chrome app, and I'd really like it to communicate with my server over cloud endpoints, but there are two problems that I'm not sure how to overcome:
The Google apis javascript library is an external script, which I can't use in a page in a chrome app. Can I just copy the source of the library, and place it in a file in my app's source?
The client checks your javascript origin, but an extension's origin is of the form chrome-extension://EXTENSION_ID, which the developer console doesn't accept as a javascript origin.
How do I get around these issues?
1. Loading the gapi client
Indeed the only way I have found to load the gapi client is to use a webview, as explained here. I have tested itand it works well but weirdly the authentication does not work at all, and Cloud Endpoints believes you're anonymous.
In addition communication from a webview to the rest of the world is pretty tricky (window.postMessage does not allow to send a response in a callback).
I think you will be better off calling directly the REST methods using AJAX requests, with a helper such as jQuery or other. You just have to set the Authorization header using you access token, like this in jQuery :
$.ajax({
type:"GET",
beforeSend: function (request)
{
request.setRequestHeader("Authorization", "Bearer "+THE_ACCESS_TOKEN);
},
url: "https://yourapp.appspot.com/_ah/api/yourapi/v1/yourmethod",
success: function(msg) {
//Put here your callback
}
});
See below how to get the access token.
2. Authorization in Chrome Apps
You do not have to worry about the origin part in Chrome Apps, you simply need to generate a client id specific to the Chrome App, and use the Chrome Identity API to get authorization from the user. Check the Chrome Identity API documentation for more details.
Note that since you will need to create a new client id, you will need to update your Google Cloud Endpoint's configuration to add this client id to the list of authorized clients.
Yes. There are several GAPI packages for Angular in bower.
The Tasks sample app says it uses the GAPI. Check the example there:
https://github.com/GoogleChrome/chrome-app-samples/tree/master/samples/tasks
Hope that helps!
Related
I would like to access the 'Chrome Web Store API' from a Cloud Function.
https://developer.chrome.com/webstore/api_index#Licenses
Why?
We are making a chrome extension, and would like to check to see if a user has purchased the extension (i.e. license) in the web store. The license information is available from the Chrome Web Store API. We could make the request to the Web Store API directly from the extension, but then there is a (uglyish) pop-up for the user requesting permission to access the API on their behalf, which isn't ideal. We want to instead make a Cloud Function endpoint, that when sent the userID, responds with true or a false, depending on whether the user has a valid license. The Cloud Function should be able to get the license data for any user on this URL: (https://www.googleapis.com/chromewebstore/v1.1/licenses/$appID/$userID).
I have tried digging around for examples on how to do this. I think I need the equivalent of the Cloud Function version of the Google API Client Library, that handles authentication via oath2 or a service account.. but even then I don't see a way to set the URL for a GET request.
Much appreciate any pointers or suggestions.
I am building some internal API for my apps/website with Firebase Functions. Internal API as in to let my apps/website to process something on server side, its doesn't mean to open to public use.
My Apps is built with ionic and website is built with angular.
I noticed the one of Firebase Functions Pricing calculation include "Invocations". Is that Invocations means every time when I call the API equal to 1 Invocation? If yes, then the API might be abused by end user, since they able to view the website source and found the API.
I been searching solution in google, some of them suggest to enable authentication and cors, to avoid abuse of the usage. But authentication and cors still counting the Invocations right?
My code structure:
client call API by get/post method, pass user TOKEN that get from Firebase Authentication
request reach the Firebase Functions
server will check the preflight info by using CORS, as well as validate the TOKEN.
Return error if didn't pass on the (3), else proceed to execute the function.
So I assume if end user inspect my web source code and get the API URL, they can simply spam my API right? Then my bill will burst because of the load of Invocations.
If you suspect that your project is being abused, which is always possible, contact Firebase support to work towards a resolution.
I'm building a React+Redux app, and using some firebase cloud functions which I call in an action creator. I was wondering, if I should save the cloud function url as an environment variable, since this code is on the client side? I already have cors implemented to only allow requestsfrom my domain.
Thank you
In general, you should always make sure that endpoints that can be called from a client are robust enough to be secure if publicly disclosed. Browser, Android, and iOS apps can all be inspected and disassembled to discover outgoing request URLs.
"Security through obscurity" can buy you time, but is not in and of itself a real means of protecting your application. Instead, you should make sure that the endpoint requires sufficient authorization (e.g. by using the Firebase ID token as per this sample).
In other words, there's no need to hide it because at the end of the day, you can't!
With the newly released Firebase Phone number Auth, I was wondering if it is possible to use it using the firebase JS SDK within react native. If so how?
We (react-native-firebase team) are actually working on this at the moment, see this issue: https://github.com/invertase/react-native-firebase/issues/119
Edit: this is now live and available in v3.0.0 onwards :)
Unfortunately, phone authentication does not work out of the box with react-native.
Currently, what you can do is the following:
Prerequisite, Firebase Phone auth for web depends on an app verifier interface:
https://firebase.google.com/docs/reference/js/firebase.auth.ApplicationVerifier
You can provide your own implementation for with the verify() method resolving with a reCAPTCHA token. Here is how you can do it:
User initiates phone number sign-in in your app.
You will need to open a chrome custom tab or SFSafariViewController
and redirect to a website you own which you whitelisted. You then render a firebase.auth.RecaptchaVerifier instance. You ask the user to solve the reCAPTCHA. You may also use an invisible reCAPTCHA which may not require any challenge to be presented to a user.
You then pass the reCAPTCHA response token back to your app using FDL (Firebase Dynamic Links). This guarantees that only your app can open it.
You will then provide your own implementation of the ApplicationVerifier interface which on verify() returns a promise that resolves with the reCAPTCHA token. You can now call signInWithPhoneNumber successfully in your react native app.
It requires some work but it is possible. Feel free to file a request for dedicated react native support in the Firebase Google Group forum.
You can check this example of using firebase phone auth in react-native
react-native-firebase-phone-auth
For better user experience refer to this repo https://github.com/boudlal/react-native-firebase-phone-auth and i would suggest making some changes so that the user doesn't have to complete any challenges or click i am not a robot
In Captcha.html file change the size to invisible so that token is generated in the background
var captcha = new firebase.auth.RecaptchaVerifier("captcha", {
size: "normal",
callback: function (token) {
callback(token);
},
"expired-callback": function () {
callback("");
},
});
The Captcha.html will be needed to be deployed to a server and is called via url in
react-native-webview
Style and remove unwanted text also make webview transparent by simply
style={{backgroundColor:'transparent'}}
Copy firebase config corresponding to your firebase project in the project and Captcha.html
I found documentation for adding incremental authorization when using the Google 2.0 Sign-in button here.
However Google Cloud Endpoints uses a pretty different sign in flow utilizing the methods documented here, with a tutorial for set up found here.
The gapi.auth.authorize (Endpoints schema) and the gapi.auth2.init method seem fairly different. However the gapi.auth2.init method has a documented means of achieving incremental authorization. Is this possible with Google Cloud Endpoints when using the built in authentication schema?
The JS client library handles the authentication for calls to your Google Cloud Endpoints no matter what authentication method (gapi.auth or gapi.auth2) you used. So everything should work as long as you are calling your endpoints via gapi.client.yourApi methods.
Only important thing is, that the email scope has been authorized before calling methods that require authentication, because access to the user's email address is required by Google Cloud Endpoints.