I'm running a meteor app from a server at http://example.com:3000 and trying to get it to authorize via Facebook using accounts-facebook.
My HTML looks like this:
<head>
<title>appname</title>
</head>
<body>
<h1>Welcome to Meteor!</h1>
{{> hello}}
</body>
<template name="hello">
<button>Click Me</button>
{{>loginButtons}}
{{#if currentUser}}
Logged in
{{/if}}
</template>
I do have accounts-ui and accounts-facebook enabled. I went through the Facebook app registration process. Here are my basic settings:
My advanced settings are default, and I have switched the "Do you want to make this app and all its live features available to the general public?" on in Status & Review.
When I actually try to log on using Facebook, the authorization window redirects to http://localhost:3000/_oauth/facebook?code=AQBaOoQ8XVQvzdqH8dyF03vVVP3daO9UO-tB0IZYCsYOYxL0LFWVrZUt2Rh34I2HI8Y5kofDP8sj46dn--N1pk6h0WOfoLAoaZxJzwSjocmBrRowjGv8JWcyN42msFuUdQAxQzbyrhnE2mQFUQISBOVzbnsR20ozS1pUmSdCb9BbmbidS8NvKvtEmSXm1lh9zPH7DYG4KfWQ2yIWSO8JMLEWa04TOP5rLDc75ak4WfXr1emb25T7981HUL8pCF_d_NgbFCNojoyY2yIB80e1nHxhovr-V3UWcCrNjH8aljTxy-qVGCmuLa4GravNIRfy9I8&state=eyJsb2dpblN0eWxlIjoicG9wdXAiLCJjcmVkZW50aWFsVG9rZW4iOiJlUkpSQjRja0FqVmJTWklCajhvQ01IdGlVdkktNnBXcF81d0RGR3Rod1lDIn0%3D#_=_, which isn't a valid address as the server is run and accessed remotely.
Additionally (and I suppose most problematically), the page doesn't acknowledge that any authorization has occurred, and acts like the login has failed (so I assume it has).
Can anyone tell me what I'm doing wrong? Thanks!
To make Meteor try to redirect from the Facebook login to the correct landing page (hosted at example.com, not localhost), I needed to make Meteor acknowledge that it's being run on example.com, not localhost:3000. The way to do this was to set the environment variable ROOT_URL.
On bash:
export ROOT_URL=http://example.com:3000
If you're running the site on example.com on port 3000, be sure to put it in your .profile or equivalent to make the environment variable persist between sessions.
Check the redirect URI on the "Advanced" tab.
It should be like this:http://localhost:3000/_oauth/facebook
NOT like this: http://localhost:3000/_oauth/facebook?close
Lets try this.
First go through
My apps > Test apps
Now on the top-right there is a Green button create a test app
Now some kind of modal appears, Test App Name and Test App Namespace, select whatever name you want
First
on Basic complete this 2 options
Now on App Domains select
localhost:3000
and on the site URL.
localhost:3000
and on advanced, on the Valid OAuth redirect URIs
http://localhost:3000/sessions/create
Second
on the /server/facebook-config.js for example, add this code.
// first, remove configuration entry in case service is already configured
Accounts.loginServiceConfiguration.remove({
service: "facebook"
});
Accounts.loginServiceConfiguration.insert({
service: "facebook",
appId: "yourTestAppId",
secret: "yourTesSecret"
});
And it should work
#RiverTam's answer did it for me! I have self-signed SSL cert on localhost with SSLProxy and I was under the wrong assumption that you could add custom routes to the callback URL, so I had to do several things:
1. In the meteor run command, export ROOT_URL first before meteor run
export ROOT_URL=https://localhost:3100; meteor --settings settings-development.json --port 3100
2. Add the callback url that FB wants, with localhost domain
Navigate to FB App in developer.facebook.com => Facebook Login => Settings => Client OAuth Settings and add URL like so:
3. Leave Domain empty
This is under FB App in developer.facebook.com => Settings => Advanced => Domain Manager
+999999 to River Tam for FireFly reference :P
Related
I integrate Google's Auth API in my production website.
When I enter the login page, it throws an idpiframe_initialization_failed exceptions to the console.
I found out that I can fix it by enabling that API / Cookies in my chrome browser, but I want to find a comprehensive solution that will prevent those exceptions in my production environment.
So my two questions are:
What do you suggest me to do in order to achieve that?
In general, what is the meaning of those excpections?
Thanks :)
If you have a production url like http://godaddysite.com etc host your page there with a Webserver.
Opening a htnl page from your computer with javascript doesnot work as it is not hosted on webserver.
Please check your redirect url etc when you created Oauth client.
Go to the Credentials page.
Click Create credentials > OAuth client ID.
Select the Web application application type.
Name your OAuth 2.0 client and click Create
check origins
create new OAuth with correct origins.
I'm serving a static page on google cloud storage. It works perfectly well, as long as it is public. Now i setted up acl so that only users of one group can read the storage and unauthenticated users get redirected to google authentication. The Problem is now, that the static content of the website, like javascript and css can't be found anymore and i get 404 Errors there. The static content is as well in the storage bucket and it works fine with public urls. When using authenticated urls, it does not work anymore.
Is my attempt of serving an access controlled page right? I guess so, because it works, except for the static content. So do you have any ideas what i am missing here?
Try to deploy on App Engine you file. For this
In the same root directory of your static file, create a app.yaml file with this content
runtime: nodejs10
env: standard
instance_class: F1
handlers:
- url: /
static_files: index.html
require_matching_file: false
upload: index.html
- url: /(.*)
static_files: /\1
require_matching_file: false
upload: /.*
- url: .*
script: auto
Deploy on App Engine gcloud app deploy
Check if it works on the provided URL.
If so:
Go to Security -> Identity Aware Proxy (IAP)
Activate IAP for App Engine; It's possible that the OAuth consent screen have to be configured at this step is you don't do it before
Select the checkbox on the left of your root service, and go the the info panel on the right of the page
Add members, groups or domain with the role IAP-secured Web app user
Test and enjoy!
You can use the following workaround to add user authentication to your GCS static pages based on buckets.
First you need to create a public file called redirect.html this file will be the entry point of your static webpage, and you need to add the following content
<html>
<head>
<meta http-equiv="Refresh" content="0; url=https://storage.cloud.google.com/[yourbucketname]/index.html">
</head>
Redirecting to your site..
index.html and other files must be private files with read permissions granted to selected users
The magic behind this is that your browser will prompt to choose a google account, in case that your browser doesn't have any active google account.
And only the users with Reader permission (or with other roles with read access) will access to your static website.
Just a friendly reminder, this will take the main Google account in the browser if your browser have more than 1 Google account this can cause authentication issues, if this happens use an incognito window.
you can find more information on this Medium article
Extra step
If you have enabled Data access logs this workaround will thrown some authentication issues, you need to add exceptions to the users that will use the authenticated site
To do this, in Cloud Console, navigate to IAM & Admin > Audit Logs. Look through the list or filter for Google Cloud Storage. Click on the row.
In the info panel on the right side, on the Exempted Users tab, click Add Exempted User.
I have problem like here Facebook login message: "URL Blocked: This redirect failed because the redirect URI is not whitelisted in the app’s Client OAuth Settings."
I have checked various answers - cant make it work, and they don't give much new - just practically say to add url to that field.
One of them said to "Make sure your App IDs and Secret Keys are correct."
I found out they were not set, but now admin said he added those so should be ok.
What else to do? How to debug?
"URL Blocked: This redirect failed because the redirect URI is not whitelisted in the app’s Client OAuth Settings. Make sure Client and Web OAuth Login are on and add all your app domains as Valid OAuth Redirect URIs."
It also tells to check Client and Web OAuth to make on, but I have them off to increase security becasue I have read or watched somewhere in facebook documentation. And since login works locally with them turned off, they should be not be needed. I tested by trying to turn them on, but as I expected they don't fix the problem.
Update:
Redirect uri parameter is redirect_uri=https%3A%2F%2Falpha.vop.veracityinsurance.com%2Fconnect%2Ffacebook%2Fcheck
Made a video: https://www.loom.com/share/88e607aece6b45489214d95ee01bbb0b
I have made debug function and pushed it to server which prints provider:
$provider = (array)$this->clientRegistry->getClient('facebook_main')->getOAuth2Provider();
print_r($provider);
And from that class I see app id is correct in server.
config.yml
knpu_oauth2_client:
clients:
# the key "facebook_main" can be anything, it
# will create a service: "knpu.oauth2.client.facebook_main"
facebook_main:
# this will be one of the supported types
type: facebook
client_id: '%env(CONFIG__OAUTH__FACEBOOK__ID)%'
client_secret: '%env(CONFIG__OAUTH__FACEBOOK__SECRET)%'
# the route that you're redirected to after
redirect_route: connect_facebook_check
redirect_params: {}
graph_api_version: v5.0
Btw I am using symfony bundle for integration https://github.com/knpuniversity/oauth2-client-bundle
Made it work as 04FS said to turn on settings. It was enought to turn on one of them only - Web OAuth Login.
I am developing a site that I connect to using VPN
the site url now is: http://10.0.5.253
I would like to test if facebook login will work.
I've tried adding url to "Valid OAuth redirect URIs".
I've also tried setting up a "test app"
It is not an intranet site - it will have a public domain when finished.
Thank you #CBroe for the idea.
To the hosts file I added
10.0.5.253 notrealdomain.com www.notrealdomain.com
And then I could set up an facebook app with no problems.
I'm developing a website that is going to use Facebook authentication.
I'm using GWT and it works fine when I run the code compiled, but when I'm running the development it does not work.
The problem is when I'm trying to retrieve the access_token from Facebook.
I'm receiving the error below:
"error":{"message":"Error validating verification code. Please make sure your redirect_uri is identical to the one you used in the OAuth dialog request","type":"OAuthException","code":100}"
Obviously, the redirect_uri is identical as the login url one.
I found out (by this topic) that the problem is the last part of the url "?gwt.codesvr=127.0.0.1:9997".
How can I solve this? or how can I manage to use the GWT development mode with this problem?
Thanks,
Normally this is due to the url verification FB does.
When you register a new app in FB you have to configure the set of domains (App Domains) authorized to use the FB login form.
Unfortunately you cannot set 127.0.0.1 nor localhost as a valid domain, so you cannot use GWT dev-mode unless you configure a hostname in your domain pointing to your localhost.
If you set mydomain.com as a valid App Domain in your FB application, configure localhost.mydomain.com pointing to 127.0.0.1 in your local hosts file or in your DNS server. Then use http://localhost.mydomain.com:8888/myapp.html?gwt.codesvr=localhost.mydomain.com:9997 to run dev mode in your browser.
I found out the problem.
By encoding only the gwt.codesvr value it works.
However, using php urlencode function on it did not work, I had to encode it myself.
The gwt dev param ended like this "?gwt.codesvr=127.0.0.1%3A9997"