I have tried to integrate the facebook login in my sample website using reactjs(localhost).
I created the APP (APP ID) in facebook developer console
I installed the package react-facebook-login-component.
Here is the some code to access the facebook
import React, { Component } from 'react';
import { FacebookLogin } from 'react-facebook-login-component';
const $ = window.$;
class FacebookLoginData extends Component{
constructor(props){
super(props);
this.state = {
facebookRes:{},
user : {},
addUserNameModal:false,
sociallogin :{}
}
}
/*************
facebook login
*************/
responseFacebook(response){
this.props
.facebookLoginData({
variables:{
email : response.email,
name : response.name,
facebookid : response.id,
profilepic : response.picture.data.url
}
})
.then(({ data }) => {
var user = data.facebookLogin;
this.setState({user});
if(user){
localStorage.setItem('loggedUser', JSON.stringify(user));
}
})
.catch(error => {
console.log("errors..in facebook.."+JSON.stringify(error))
})
}
render(){
return(
<div>
<h1>Hello</h1>
// Social ID --- APP ID
<FacebookLogin socialId="*************"
language="en_US"
scope="public_profile, email"
xfbml={true}
responseHandler={this.responseFacebook.bind(this)}
fields="name,email,picture.height(2048)"
version="v2.5"
class="fbbutton"
buttonText=" FACEBOOK"/>
</div>
)
}
}
export default FacebookLoginData;
After these steps, i am getting this error
Can't load URL: The domain of this URL isn't included in the app's domains. To be able to load this URL, add all domains and sub-domains of your app to the App Domains field in your app settings.
But i can't find the error where it is.
You should place your domain url in: Site URL
You need to configure the URL from which you are going to access Facebook Login API.
Go to your App Settings page from https://developers.facebook.com/apps/
Then add your App Domain. Something like this
You also need to add the Site URL here
Settings -> Basic -> Website -> Site URL
If you are testing it on your local, then add localhost in the app domain and http://localhost in the Site URL.
Related
We are using Ionic Vue (5.4.0 - Vue3) with Capacitor and Keycloak as the Auth Provider. We have implemented the https://www.npmjs.com/package/keycloak-ionic Package which provides the Capacitor Adapter. We have set up the required deeplinks for both platforms and they are working. The app should authenticate the user in the system browser (capacitor-native adapter), save the tokens and reuse these tokens on the next appstart. It's working on android. On iOS the first startup is working but if i restart (terminating and starting again) i only see a blank screen. It's not redirecting into the secured content or showing the keycloak login page. I found out that the Safari Browser with the keycloak login is opened in the background. If i close this browser tab and start the app it's working by redirecting me to the keycloak login page.
May the browser with the opened keycloak instance be the problem?
I also tried the same with inappbrowster (capacitor adapter). The first start is working there also. If i restart the app the custom tab is opening the redirect url page without redirecting me to the secured content or to the keycloak login page.
Code Sample:
App.addListener('appUrlOpen', function (data: any) {
const slug = data.url.split('/kc1').pop()
// We only push to the route if there is a slug present
if (slug) {
router.push({ name: 'Overview' })
}
})
// init authentication
const initKeycloak = async () => {
const cachedKeycloak = new CacheUtil('keycloak')
const cachedKeycloakAccessToken = await cachedKeycloak.get('accessToken')
const cachedKeycloakRefreshToken = await cachedKeycloak.get('refreshToken')
const initOptions = { url: process.env.VUE_APP_AUTH_URL + '/auth', realm: 'mp', clientId: 'mobile', checkLoginIframe: false, onLoad: 'login-required', token: cachedKeycloakAccessToken, refreshToken: cachedKeycloakRefreshToken }
const keycloak = KeycloakIonic(initOptions)
keycloak.init({
adapter: 'capacitor-native',
pkceMethod:'S256',
onLoad: initOptions.onLoad as any,
redirectUri: process.env.VUE_APP_REDIRECT_URI
}).then((auth: any) => {
// auth and create app
if (!auth) {
console.log(auth)
} else {
const app = createApp(VueApp)
.use(IonicVue)
.use(router)
.use(store)
router.isReady().then(() => {
app.mount('#app')
})
}
}).catch((e: Error) => {
console.log('auth failed: ', e)
})
keycloak.onAuthSuccess = () => {
console.log('authenticated!')
// save tokens to device storage
cachedKeycloak.set('accessToken', keycloak.token)
cachedKeycloak.set('refreshToken', keycloak.refreshToken)
}
}
initKeycloak()
I'm currently doing a project using react native where I need to let users to login using facebook. So I use React-native-fbsdk LoginButton component to let users to login and get the access token. Also part of the project needs let users to share links to their profiles.
In order to do that, I followed as GitHub repo of Facebook which says how to add ShareDialog. After adding both LoginButton and ShareDialog, I ran the app. Login was successful and I got the access token. But when I try to share a link, it asks me to login again. If I login with ShareDialog, it let me to share post and everything as expected.
But if I logout with LoginButton after login with ShareDialog too, both components perform logout successfully. Problem is Login does not handle for both components with single login.
Below is my code.
render() {
return (
<View style={styles.container}>
<LoginButton
publishPermissions={["publish_actions"]}
onLoginFinished={
(error, result) => {
if (error) {
alert("Login failed with error: " + error.message);
} else if (result.isCancelled) {
alert("Login was cancelled");
} else {
alert("Login was successful with permissions: " + result.grantedPermissions)
}
}
}
onLogoutFinished={() => alert("User logged out")}/>
<TouchableHighlight onPress={this.shareLinkWithShareDialog}>
<Text style={styles.shareText}>Share link with ShareDialog</Text>
</TouchableHighlight>
</View>
);
}
shareLinkWithShareDialog = () => {
const shareLinkContent = {
contentType: 'link',
contentUrl: 'https://www.sample.com/',
contentDescription: 'Test Sharing Description'
};
var tmp = this;
ShareDialog.canShow(shareLinkContent).then(
(canShow) => {
if (canShow) {
return ShareDialog.show(shareLinkContent);
}
}
).then(
(result) => {
if (result.isCancelled) {
alert('Share cancelled');
} else {
alert('Share success with postId: ' + result.postId);
}
},
(error) => {
alert('Share fail with error: ' + error);
}
);
}
Please help me here. I cannot identify what's wrong with this.
Note
I checked this using a Test User of Facebook and it also has all relevant permissions including manage_pages and test user has it's own Test Page too.
I got a similar problem and that was because I hadn't installed facebook app on my phone. Seems like your code is fine.
However I haven't used Test Page and Test User options in facebook but I hope they are no different than a normal user when it comes to functionalities. Just try to install the facebook app and run your app. Should be fine.
I try to add Facebook login function on my app, it work but I have some problems
I start with:
meteor add accounts-password
meteor add accounts-ui
meteor add service-configuration
meteor add accounts-facebook
Then I write a test app on facebook, adding login and get my appId and secret
I copy documentation's code to configure settings (server side) and I put my appId and secret
ServiceConfiguration.configurations.upsert(
{ service: "facebook" },
{
service : "facebook",
appId: '123456789012345678',
secret: '123456789012345678123456789012345678123456789012345678',
loginStyle : "popup",
requestPermissions: ['email','user_friends']
}
);
I try to login with facebook and I have (showing in console.log) all the data I need (the picture is the picture profile in facebook), but the SignIn name is nto show in the top of the app
When I signin with a normal email password login I have no problem
The problem was in this function:
Accounts.onCreateUser(function(options, user) {
var imgAvatar = "/img/user.png";
var username = "NewPlayer_" + Math.floor(Math.random() * (9000 - 1000) + 1000);
if (user.hasOwnProperty('services') && user.services.hasOwnProperty('facebook') ) {
imgAvatar = "http://graph.facebook.com/" + user.services.facebook.id + "/picture/?type=small";
username = user.services.facebook.name;
}
return user;
});
I discover the correct way to use this function in this post
Accounts.onCreateUser((function(_this) {
return function(options, user) {
options = {
username: 'pippo'
}
return Object.assign({}, user, options);
};
})(this));
This problem has been bugging me for a long time and I can't seem to find the solution, all the settings in my Facebook Developer panel are configured correctly, Site URL, App Domain and OAuth URLs.
When I run my app on my iPhone (I have it installed through iTunes) and click the authentication button I am successfully prompted with this screen:
However, after logging in, I am faced with a blank white screen instead of being redirected to my main.html page.
I am using the OpenFB plugin along with Parse and the Facebook Graph API to authenticate and store my users data, here is my login code:
login.html:
$('.facebookLogin').click(function(){
Parse.User.logOut(); // log current user out before logging in
login();
});
function login() {
openFB.login(function(response) {
if(response.status === 'connected') {
console.log('Facebook login succeeded');
Parse.FacebookUtils.logIn("email", { // permission request to use email
success: function(user) {
if (!user.existed()) {
FB.api('/me', function(response) {
var firstName = response.first_name;
var lastName = response.last_name;
var email = response.email;
var user_id = response.id;
user.set("firstName",firstName);
user.set("lastName",lastName);
user.set("email",email);
user.save();
});
window.location.href= "main.html";
}
else {
window.location.href= "main.html";
}
},
error: function(user, error) {
alert("User cancelled the Facebook login or did not fully authorize.");
}
});
}
else {
alert('Facebook login failed: ' + response.error);
}
}, {scope: 'email'});
}
oauthcallback.html:
<html>
<body>
<script>
// redirects to main page
window.location.href= "main.html";
</script>
</body>
</html>
Note: I have added main.html, login.html and oauthcallback.html to the Valid OAuth redirect URIs list on my panel.
Check that your site is using SSL with a valid certificate.
There might be an error trying to redirect from a non-secure site to an encrypted site.
I use auth login (out of the box). I have want to add Facebook login.
I have installed Socialize package, and In Auth/AuthController I added method fb:
public function fb()
{
return \Socialize::with('facebook')->redirect();
}
When I call http://ip/auth/fb its redirect me to http://ip/auth/login#=
Please help
First you need to create the FB project and you will have the client_id (App ID) and secret_key (App secret)
In your services configuration file: config/services.php you need to specify the facebook key like this:
'facebook' => [
'client_id' => 'client_id from fb',
'client_secret' => 'secret_key from fb',
'redirect' => 'http://your_site/your_fb_login_ok_path',
],
then you create the route:
Route::get('your_fb_login_ok_path', function ($facebook = "facebook")
{
// Get the provider instance
$provider = Socialize::with($facebook);
// Check, if the user authorised previously.
// If so, get the User instance with all data,
// else redirect to the provider auth screen.
if (Input::has('code'))
{
$user = $provider->user();
return var_dump($user);
} else {
return $provider->redirect();
}
});
This should do it.
Then remember to add this URL to your facebook redirect: http://your_site/your_fb_login_ok_path
That is the URL that FB will redirect you to after successful login.
There are a number of possibilities
You may have set the routes wrong
The Facebook Redirect Url you specified might be wrong