I'm asking this question here since I have no more ideas of where to look.
I've integrated this Facebook SDK library in my React Native app for a Facebook API authorisation flow.
It works fine on recent large screens but on smaller screens, there's a layout issue in the Facebook pages in the internal browser: the legal text overlaps the buttons and the user cannot click them (see screenshot below).
I have no idea where to even start fixing this and I got no helpful answer from Facebook support.
If anyone has an idea, I'm open to everything.
Here is the code that launches the auth flow though I don't know how related it could be.
const permissions = [
'instagram_basic',
'pages_show_list',
'instagram_manage_messages',
'pages_manage_metadata',
'pages_read_engagement',
];
const handleFacebookPermissions = () => {
// this is the line that starts the flow, I don't have much in terms of options
LoginManager.logInWithPermissions(permissions).then(
function (result) {
if (result.isCancelled) {
console.log('Login cancelled');
} else {
AccessToken.getCurrentAccessToken().then(data => {
// doing stuff with the access token on success
});
}
},
function (error) {
console.log('Login fail with error: ' + error);
},
);
};
I don't have a lot of options to try since the actual function is just one line...
Related
I have a React app from which I want to upload videos to the account of the logged in user. I have successfully done this retrieving tokens manually and calling the API but can't find a way to log in using the JS SDK in my React app.
I present the user with a button for log in:
e.preventDefault()
window.DM.login(
function (response) {
if (response.session) {
// user successfully logged in
console.log(response)
} else {
// user cancelled login
console.log(response)
}
},
{
client_id: my_id,
scope: "read write",
response_type: "code"
}
)
}
The login popup appears, I log in and get sent to the callback url. However, refreshing the original site, or the callback popup, still shows as no session and without login. I check with:
status === 'ready' &&
window.DM.getLoginStatus(function (response) {
if (response.session) {
// logged in and connected user, someone you know
console.log(response)
} else {
// no user session available, someone you dont know
console.log(response)
}
})
})
and I always get { status: "unknown", session: null }
Loading the SDK is handled with a hook const status = useScript('https://api.dmcdn.net/all.js')
Do I need to handle something manually from the callback page? Isn't the SDK supposed to handle it in the background? I would appreciate some insights on what I might be doing wrong.
Thanks.
As always, I spent hours trying to find a solution and, as soon as I post, I find it:
Client_id and response_type must not be passed in DM.login.
Instead, you have to pass the API key in DM.Init, like so:
useEffect(() => {
status === 'ready' &&
window.DM.init({
apiKey: '123456789',
status: true, // check login status
cookie: true // enable cookies to allow the server to access the session
});
})
This brings up the popup and after inputting the credentials the SDK correctly detects the session, closing the popup and authing the user.
Trying to get my push notifications working on iOS, starting with my own iOS device
I am able to find my token in Angular, send it to my python backend and store it in a database.
If I go to Compose notification in firebase:
https://console.firebase.google.com/project//notification/compose
I'm able to create the campaign and receive my notification on my phone. However if I hit 'Send test message', enter (or check) my FCM token from the database and hit 'Test' There is no result.
So I am doubting my method to receive my token / if the token is correct.
I'm using Angular, and in my service I'm calling:
PushNotifications.addListener('registration', (token: Token) => {
console.log('Push registration success, token: ' + token.value);
this.tokenvalue = token.value
this.LogOn(username, password, this.tokenvalue)
}); }
Its part of my login form, every time someone logs in the token gets retrieved in case its there:
import { PushNotifications, Token } from '#capacitor/push-notifications';
import { Capacitor } from '#capacitor/core';
(....)
onSubmit(): void {
const { username, password } = this.form;
const isPushNotificationsAvailable = Capacitor.isPluginAvailable('PushNotifications');
if (isPushNotificationsAvailable) {
PushNotifications.requestPermissions().then(result => {
if (result.receive === 'granted') {
// Register with Apple / Google to receive push via APNS/FCM
PushNotifications.register();
} else {
this.tokenvalue = ""
this.LogOn(username, password, this.tokenvalue)
}
});
PushNotifications.addListener('registration', (token: Token) => {
console.log('Push registration success, token: ' + token.value);
this.tokenvalue = token.value
this.LogOn(username, password, this.tokenvalue)
}); }
else {
this.tokenvalue = ""
this.LogOn(username, password, this.tokenvalue)
}
}
The actual token I'm now trying looks like this:
5BA41427198D463847....................80585EAFC3C2670226E22C082A
The 20 dots also represent actual characters like the other ones around it. It's 64 characters in total.
Hope you can help me, am I doing something wrong here? Do I miss a setting somewhere?
Fixed it eventually by going through this article:
https://capacitorjs.com/docs/guides/push-notifications-firebase
Lots of steps I already executed, but missed some changes in files available in Xcode. This changed the actual ID what was printed in the angular application to something that looks like this:
dz0yFZnpH0DkvTntwzrlx-:APA91bG................................................................................JYuH0-7yGReyaqQQUyRmObSa0Cld9QxEHYW9bjSaZQV0jNQjDHRSx
A 164 characters token that now worked when adding a test message as described in the question. Also the python part worked perfectly in connection to this. Used this one:
https://medium.com/#smbhuin/push-notification-firebase-python-8a65c47d3020
In Angular itself remarkably, no changes were necessary at all.
Happy to have this - for me - tough challenge behind me
I am developing a PWA that requires Push-Notifications. Sadly IOS/Safari does not support https://w3c.github.io/push-api/#pushmanager-interface for now, so I think i might have to wrap a native APP around in some way.
In Android (before their "Trusted Web Activities" was a thing) you could use a WebView to basically display a headless Chrome-View in your App. Whats the equivalent in IOS and how does the interaction between push-notifications and the Webapp (the browser need to jump to a specific page) work?
One more thing I need is integration with our companys Mobile Device Management, which is Microsoft Intune. Having integrated MDMs in Android in the past i Know that this might be a major pain in the a**, so i'm considering to build the wrapper myself, for maximum flexibility. Another option would be something like Ionic, not sure now.
This may not necessarily work in your situation, but I had the exact same issue with a PWA for Safari and I solved it by just using long polling. It will allow you to get around all of the limitations with Safari and I was able to redirect and load sections within our SPA.
async function subscribe() {
let response = await fetch("/subscribe");
if (response.status == 502) {
// Status 502 is a connection timeout error,
// may happen when the connection was pending for too long,
// and the remote server or a proxy closed it
// let's reconnect
await subscribe();
} else if (response.status != 200) {
// An error - let's show it
showMessage(response.statusText);
// Reconnect in one second
await new Promise(resolve => setTimeout(resolve, 1000));
await subscribe();
} else {
// Get and show the message
let message = await response.text();
showMessage(message);
// Call subscribe() again to get the next message
await subscribe();
}
}
subscribe();
https://javascript.info/long-polling
I am using braintree Drop-in UI with angularjs(frontend) and rails(Backend). I am creating a clientToken and sending it to braintree setup.
The client-token method,
#client_token = Braintree::ClientToken.generate(customer_id: current_user.braintree_customer_id,options: {
verify_card: true,
fail_on_duplicate_payment_method: true
})
So as you can see, I have taken 'fail_on_duplicate_payment_method' option. And trying to add the same payment method again.
Then, with that validation I am getting an error on the dropin saying "There was an error processing your request", but it is not coming to the error callback.
This is the setup, which is fine,
braintree.setup(vm.clientToken, 'dropin', {
container: 'dropin-container',
onPaymentMethodReceived: function(data)
{
alert('came recieved')
// console.log($scope.paymentForm)
vm.submit($scope.paymentForm, data.nonce)
},
onReady: function () {
vm.disablePay = false;
},
onError: function(type, message) {
alert('came error')
vm.serverError = message;
}
});
Here is the Image of the error,
The error in the network is,
callback_jsona7f3c885267b4f49aa13fbf01cecdb60({"error":{"message":"Credit card is invalid"},<br>"fieldErrors":[{"field":"creditCard","fieldErrors":[{"field":"number","code":"81724","message":"Duplicate card exists in the vault"}]}],"status":422})
I want to fetch this error into my view. I searched many links, but didn't get the answer I needed. Any help is appreciable.
Thankyou in Advance.
Full Disclosure: I work as a developer for Braintree
The onError callback is only triggered by client side errors and this is actually a server side error; however, the team is aware of this need and is working on a solution that will be available in a future release.
Here is my code:
FB.init({
appId : this.api_id,
status : true,
cookie : true,
xfbml : true,
oauth : true,
channelUrl : 'https://blah.com/facebook/channel' // custom channel
});
FB.login(function(response) {
if (response.authResponse) {
if (response.perms) {
// user is logged in and granted some permissions.
if(typeof redirect === 'function') {
redirect();
}else {
window.location = redirect;
}
} else {
// user is logged in, but did not grant any permissions
}
} else {
// user is not logged in
}
},{
scope: 'email'
}
);
So what happens is that if i have oauth no set in FB.init everything works fine but if i add in
oauth is true then i will get back
<span>Application Error: There was a problem getting data for the application you requested. The application may not be valid, or there may be a temporary glitch. Please try again later. </span>
from the request to /dialog/oauth
I followed all the roadmap to oauth 2 here https://developers.facebook.com/blog/post/525/
and still no luck, something seems a bit off here.
And no all the code posted in not all the code i have, before FB.login gets called i make sure
FB.init has already been called. Any help greatly appreciated
Check if your application is in sandbox mode. If it is, switch sandbox mode off and try again.
If sandbox mode is on FB will not recognize your app and a call to Facebook.init will fail silently, when you are not logged in, returning the response 'Application Error: There was a problem getting data for the application you requested. The application may not be valid, or there may be a temporary glitch. Please try again later.'