I have a Vue.js app that uses Firebase for authentication and I'm trying to wire up the Facebook provider. I believe I have all my Firebase related code and configuration correct, but when I test my implementation from http://localhost:8080), I keep getting the Can't load URL: The domain of this URL isn't included in the app's domains. Facebook error.
The problem, from what I can tell, is that I need to provide a valid "callback" URL that returns the authentication response to my application. This is what Firebase tells you to do when setting up Facebook authentication, and what my research of the error confirmed, but the Valid OAuth Redirect URIs field in the Facebook App Settings page (which is where I surmised I need to put my return URL) rejects URLs containing localhost. I even tried to add the URL to any of the other fields in the Settings pages that look like they want URLs but they all respond the same. Here's a screenshot demonstrating this:
So my questions are 1) how do I configure my Facebook App to allow localhost testing, and 2) how do I fix the Can't load URL Facebook error?
Let me know if I need to include my pre-login Vue code. FWIW, I use Firebase's linkWithRedirect(); and signInWithRedirect() methods for logging in (as opposed to linkWithPopup() and signInWithPopup()).
Turns out you're supposed to paste the exact .../__/auth/handler URL that Firebase gives you into the Facebook Valid OAuth Redirect URIs field, even while still developing locally. I was under the impression that the URL should be adapted to the environment - i.e. http://localhost:8080/__/auth/handler for development and https://my-app.firebaseapp.com/__/auth/handler for production.
But nope, use the production URL even in development.
Related
Hi I tried this module to communicate with Infusionsoft: https://www.npmjs.com/package/passport-infusionsoft but somehow, when I tried to run it (using the samples on the npm module) by running it here and also on my local node app (same code) nothing happens. Upon reading the documentation: https://developer.infusionsoft.com/authentication/#request-access-token, there are things that are not clear such as:
Once the user has logged into their Infusionsoft account and authorized your application, they will be redirected back to your application at your specified redirect_uri with a code URL parameter that is used to request an access token. Redirect users to https://signin.infusionsoft.com/app/oauth/authorize along with the required parameters in order to start the OAuth exchange.
Based on the steps provided by the documentation and the samples of the node module, how can I use them all together? I apologize since I'm not sure of the entire process. The goal is I need to at least get the token from the Infusionsoft after I submit the clientID and clientSecret. What is the difference of the callback and the redirect URL? If there are more understandable samples, please help me..
Firebase keeps giving me empty "" instead of generating a URL for "storageBucket" when I try to get the code to paste into my HTML for login through Google. I am assuming this is the reason I am getting the error: This domain is not authorized for OAuth operations for your Firebase project. Edit the list of authorized domains from the Firebase console.(anonymous function) # iframe.js:84
I am using browser sync to user localhost which is supposed to be an authorized domain. I have the firebase cdn in my header of my HTML and everything that was generated for my firebase app (except for the storageBucket). I tried importing my app to the new Firebase, just typing in my app name in a similar storage bucket URL ("eventSpot.appspot.com") and I tried just creating a new app in Firebase. None of these worked. Is there something I am missing?
Thanks in advance for your help! :)
The storage tab can take some time just after project creation - but if you've left it a little while and you're still getting the error, it may be some APIs have not been enabled.
Can you go to https://console.developers.google.com/project/_/apis/enabled
Check for:
App Engine Admin API
Google Cloud Storage
Google Cloud Storage JSON API
If any aren't enabled, enable them. After that, try the storage console again.
I'm running a webview from a cordova app and want to authenticate a user, I know they have the OAuth strategies but I need to use the email/password combination.
I'd like to keep things simple but may end up having to generate a token.
Open an InAppBrowser that loads an auth flow for firebase
Listen for that auth flow to be completed using this method: http://blogs.telerik.com/appbuilder/posts/13-12-23/cross-window-communication-with-cordova%27s-inappbrowser
Grab the result from the webview again and insert it into the webview firebase instance
I'm guessing that's not possible due to security.
My app is using Amazon login (required) so my alternative would be:
webview loads InAppBrowser with our external url
that loads Amazon auth, then generates a token for Firebase
webview listens for token and grabs it, stores it in localstorage
Edit:
In the firebase docs on logging in with a username/password, I see it returns a token for the session and more information in the authData object:
https://www.firebase.com/docs/web/guide/user-auth.html
Could I then take all the information from that object and send it back over to the cordova webview and then populate that Firebase ref with the information?
Some answers from the wonderfully helpful support at Firebase:
First:
You’re correct – anyone can make a request to sign up, and we don’t expose any capability to secure the url which people can sign up from for email / password authentication.
The main reason that we require / enable origin whitelisting for OAuth authentication, but not for email / password authentication, tends to revolve around sessioning.
The Firebase login server does not maintain sessions (via cookies or any other method), and so requests to the login server for password auth. requires a user credential (the password) for every request. CSRF is typically a risk when a malicious party can take advantage of a user’s session browser, i.e. make requests on behalf of the user to some page where cookies are automatically sent by the browser.
Furthermore, we don’t have a great way to actually do ideal origin-based whitelisting for these pure HTTP requests. We could use CORS, but would have to fall back to JSONP for older browser environments that don’t support it. To complicate matters further, PhoneGap / Cordova apps don’t have the same notion of an “origin” at all, and from the perspective of a server – the calls are indistinguishable from any malicious party making an HTTP request with the same headers.
The OAuth providers, however, use cookies for sessioning and do not require user invention for each auth. request. If you’ve approved a particular Facebook app, you won’t be shown any UI/UX or be prompted the next time that app requests your data – it will be invisible. When we do OAuth, we never have to send any user credentials to Facebook / Twitter / etc., because those are stored in browser cookies for facebook.com / twitter.com / etc. What we need to protect is a malicious party pretending to be a popular, valid Facebook app. and taking advantage of that short-circuit behavior that would get access to user data without the user’s knowledge.
My response:
So, how is that secured? If anyone can make a request to sign up from a
cordova webview (which comes from no specific url, just the app iteself)
then I can't secure from which url people can sign up from? So any site
could use our url "xxx.com" in their config and start registering
users?
That doesn't seem right to me.
I think I still need to have an external url that is whitelisted by you
guys. That would have the login form and do the auth.
But then my question is, can I transfer that auth back to my cordova app?
Is it somewhere in localStorage I can check? I'll have to run some tests.
And final response:
Sure thing – we’re happy to help. I wrote much of the original client authentication code, and can speak to the design decisions and rationale that went into it. Be sure to let me know if you have further questions there.
While we don’t store user passwords in cookies, of course, we maintain a Firebase auth. token in LocalStorage. Our authentication tokens are signed by your unique Firebase secret (so they cannot be spoofed), and can contain any arbitrary user data that would be useful in your security rules.
By default, and when using the delegated login (email + password) service, these tokens will only contain a user id to uniquely identify your users for use in your security rules. For example, you could restrict all writes or reads to a given path (e.g. write to /users/$uid/name) by the user id present in the token (“.write” = “$uid = auth.uid”). Much more information on that topic available on our website.
Your plan to spin up a server to authenticate users with Amazon and generate tokens sounds correct. This is a common pattern for our users who wish to use authentication methods that we don’t support out-of-the-box (ie Amazon OAuth) or have custom auth requirements. Note: once you’ve created those tokens and sent them down to the client, they’ll be automatically persisted for you once you call ref.authWithCustomToken(…). Subsequent restarts of the app will use the same token, as long as it has not yet expired.
This is a topic of interest to me too as I have implemented something similar , twitter digits (native android) + firebase custom login in webview.
I think, as recommended by firebase, you can use other authentication providers and then the firebase custom login.
Do you use the Amazon login in android native code ? If so after login, then generate a JWT token for firebase and use it to access firebase.
If all code is in Html/js app, then maybe you can use custom login and generate a token on your server after making sure its logged in to the Amazon.
The trouble with Android hybrid apps is the following: the JWT token (for firebase) should be created on secure system (eg. server side) not with android java code, other option for hybrid app is to do a http request to generate the token, but I find that less secure, anyone would be able to get a token by finding the URL, than I resort to generate token within android app code, you can change security key/seed for token when doing new releases.
In summary, I don't think firebase studied the problem of mobile hybrid apps.
I'm building a chrome extension that facilitates the creation of contacts straight from the browser without needing to go to my devise-powered rails app itself. Contacts#Create requires authentication so I'm wondering how I can do send authenticated requests from the extension.
I've enabled devise TokenAuthenticatable and so my users have an authtoken. I've written a method in my extensions js that posts to my rails app's contacts#create action. For testing, I've simply hard coded my own auth token in, which seems to work. But how can the extension access the auth tokens for users? It doesn't seem right/secure to store this token into a cookie.
I think I'm supposed to use chrome.cookies to access and do something with my app's session info somehow. But I only get a sessionID here.
any help appreciated!
Although not from a chrome extension, I was building something similar that would work from terminal. I ended up bypassing devise and creating by own token authentication that would allow users to access just the one controller#action I needed. That way you can minimize the damage if the token gets stolen.
So anyway, I would allow users to generate (and regenerate) tokens within the rails app interface and make it so that the extension asks for the token on the very first launch. I'd store the token itself in localStorage.
You can also check authentifiation_tokenstored in your app cookie.
You can achieve this using the chrome.cookies.getAll() method detailed here - https://developer.chrome.com/extensions/cookies#method-getAll
I'm building a widget that can be placed on a various sites, and will have users be able to log in via facebook connect to accounts on the widget's parent site. I was going to use the Facebook JS SDK to do this, but the widget will likely be placed on sites that already have the FB JS SDK initialized on them with a different app ID, and if I were to run code this way it could lead to a namespace problem.
The only current solution I have come up with is to do the server-side type authorization, and have a redirect-url that leads back to the current page in which the widget is hosted and use the state paremeter to alert backbone router that the user has logged in.
The first problem I thought of is that on the facebook docs site it says
For security, the redirect_uri must have the same base domain as that specified in the App Domain property of your app's settings, or be a URL of the form https://apps.facebook.com/YOUR_APP_NAMESPACE.
How do I bring people back to the original page that the widget it hosted on after login? Is there a better approach to this problem?
you can use Server side authentication and redirect_uri to your site that will redirect to the various site
redirect_uri = https://www.mydomain.com/?r=https%3A%2F%2Fwww.somesite.me
On you server you will look of the query param r and redirect the request to r value.
You can also do your own authentication for users (when they first sign in) and store there facebook access_token on you DB, once your widget is running (under https) and you identified the user on your authentication you can send the widget client the user's access_token and work with it.
You can even create your own Simple FB-like ajax library, for most things it will be a simple get/post/put calls with access_token as a url parameter
Hopes it helps