I am creating a Facebook Canvas application, and I am following more or less the demo app.
As in the demo, I can get the user data from the signed_request which is POSTed to my site on the first page load. Moreover, as suggested in the demo, I use the following snippet to reload the page on user changes:
var Config;
function facebookInit(config) {
Config = config;
FB.init({...});
FB.Event.subscribe('auth.sessionChange', handleSessionChange);
...
}
function handleSessionChange(response) {
if ((Config.userIdOnServer && !response.session) ||
Config.userIdOnServer != response.session.uid) {
goHome();
}
}
function goHome() {
top.location = 'http://apps.facebook.com/' + Config.canvasName + '/';
}
Here Config is an object which is populated with info from the server.
The problem appears when the user navigates the application using a link. If I use AJAX, the page is not actually reloaded and everything works fine. But if I use a standard link, the user comes to another page of my application with a standard GET request. In this case, I do not know how to get the info about the user, so Config.userIdOnServer is undefined and a page reload is triggered.
Of course I can avoid this by removing the call to handleSessionChange, or by making a one-page app with only AJAX links, but I feel I am missing something basic about the Facebook flow.
My fault, I had problems in retrieving the cookie with the user identity for subsequent requests.
Related
RingCentral JavaScript SDK handle redirect URI point to local JavaScript function
As-per Doc, they give option
RingCentral.SDK.handleLoginRedirect()
but dont know how to use that
var SDK = require('ringcentral');
rcsdk = new SDK({
server: SDK.server.sandbox,
appKey: '_app_key',
appSecret: 'app_password',
redirectUri: ''
})
function handleredirectURI(){
//handle redirections
}
We need points out our handleredirectURI function
Thanks in advance
Per the documentation. The context is 3-legged oAuth. Here is a demo: https://github.com/ringcentral/ringcentral-demos-oauth/tree/master/javascript
However the demo doesn't use the handleredirectURI method. Which means that the method is simply an utility method and it's not required to use it.
For the usage of handleredirectURI, I will come back and update my answer later.
Update
Here is the source code for handleredirectURI: https://github.com/ringcentral/ringcentral-js/blob/669b7d06254d3620c5a5f24c94b401aa862be948/src/SDK.js#L115-L124
You can see that the method parses win.location to get some useful data and postMessage back to its opener.
Unit tests for handleredirectURI: https://github.com/ringcentral/ringcentral-js/blob/669b7d06254d3620c5a5f24c94b401aa862be948/src/SDK-spec.js#L27-L63
Update 2
I read handleredirectURI' source code, unit tests, sample code again and I think its usage is just like what is written in its documentation:
Popup Setup
This setup is good when your app is rendered as a widget on a third-party sites.
If you would like to simply open RingCentral login pages in a popup, you may use the following short-hand in your app's login page:
var platform = rcsdk.platform();
var loginUrl = platform.loginUrl({implicit: true}); // implicit parameter is optional, default false
platform
.loginWindow({url: loginUrl}) // this method also allows to supply more options to control window position
.then(function (loginOptions){
return platform.login(loginOptions);
})
.then(...)
.catch(...);
In this case your landing page (the one to which Redirect URI points) need to call the following code:
RingCentral.SDK.handleLoginRedirect();
Explained:
Run the first code snippet to open the login popup.
In the redirected to page, run the second code snippet (that one line of code) to get everything else done.
After that the authorization part is done and you can invoke other APIs.
Let me know if you have more questions.
I'm working in an mvc5 application where users have their own profiles, there should be a button which would open a pop-up window so that an individual user logs into LinkedIn as to sync his/her LinkedIn profile picture with our site's.
I don't think it can be implemented with modals because there's page navigation involved, so I thought about what I stated previously: a pop-up, is there a way to do this via javascript? Like, opening a pop-up and expecting a response to determine if the user logged in. If there is a better way, any info would be greately appreciated, my aim is to be able to sync the profile picture without having the user to get redirected to linked in from their profile view, I want them to change it from there and not leave the view. Is it possible to do so?
EDIT: To clarify, getting the image URL is not a problem, what I need to do is get the url from the profile window, which comes from the popup window.
You should have a look at their API it is well documented. You'll need additional permissions to retrieve the full profile. LinkedIn Profile API
I ended up using the Javascript SDK:
$('#btnSyncLinkedInPicture').on('click',
function () {
var myID = 3;
IN.User.authorize(function () {
IN.API.Raw("/people/~:(picture-url)").result(function (data) {
$.ajax({
type: 'GET',
url: '/MyController/MyAction?pictureUrl= ' + data.pictureUrl + '&id=' + myID,
success: function (result) {
$('#imgProfilePicture').attr('src', result);
}
});
}).error(function () {
});
});
});
First, we authorize the user which will open a pop-up window so that we authenticate, the SDK will abstract us from the OAuth process. After authenticating, we may want to write a callback function, in which we can already perform REST calls via the SDK methods (you can do it elsewhere as long as you have successfully authenticated).
I am working on playframework but I believe this question is more about a general topic of web implementation. I am creating a website where I want to put my signin button on the top right corner of my home page and would like to update it based on user authentication.
i.e. if user is logged in there would be my profile and logout button and if not then there would be only signin button. I know how to implement it using different pages that uses different routes, in this case I can load complete page but I don't want to load complete page instead I would like to use popup window for signin/signup and want user to redirect back on the same page after signing in (click on signin -> signin form as a popup -> submit -> signed in) url shouldn't be changing in this process. I have seen this type of design in many popular websites but I don't know how to build one.
I did some research and found, we can do this using jquery's ajax call. With the help of ajax call we can request data from server in background (here I will request html) and update my current page DOM. In this case I am supposed to update DOM of my navbar's top right corner so I will request html for that part only but I don't know exactly how to do it? I am new to website designing, would it be a good design or there is other best way to do the same task?
It would be also appreciable if anyone can tell me how should I update link to my related css & js file page by page. I mean if some css file is not being used in a particular page how to remove reference to that and add a new one relevant to that page.
Sorry, If it looks fool of asking such basic questions here but I just want to clear my concept in web-designing and implementation. It would also be helpful if anyone can suggest me a book or link to read about these topics.
If I understood your question correctly, you were asking for help with the DOM -part of the equation?
Here's an example (see the JSFiddle, for the whole thing, as the current code expects the login button to be present at launch):
function login (logtype) {
var insertInput = function (value) {
document.getElementById('logincontainer').insertBefore(
document.createElement('input'),
document.getElementsByTagName('input')[0]);
var newButton = document.getElementsByTagName('input')[0];
newButton.type = 'button';
newButton.value = value;
if (value === 'logout') {
newButton.onclick = function () {login('logout');};
}
if (value === 'login') {
newButton.onclick = function () {login('login');};
}
if (value === 'myprofile') {
newButton.onclick = function () {window.location.href='http://jsfiddle.net/user/b00t/fiddles/';};
}
},
deleteInput = function () {
document.getElementById('logincontainer').removeChild(document.getElementById('logincontainer').lastChild);
};
if (logtype === 'login') {
var logIn = confirm('Login?');
if (logIn) {
insertInput('myprofile');
insertInput('logout');
deleteInput();
}
}
else if (logtype === 'logout') {
var logOut = confirm('Logout?');
if (logOut) {
insertInput('login');
deleteInput();
deleteInput();
}
}
}
JSFiddle
I am using Paypals Adaptive Payments and Embedded flow feature to provide checkout via a minibrowser. Everything seems to be working correctly in the sandbox environment except that when the payment is completed successfully, the user is never redirected to my returnUrl set in the PAY API request. Same goes for my cancelUrl.
After the payment is complete, the user is shown an order overview in the minibrowser and a button labelled "close". If a user clicks this button, the minibrowser is closed.
If a user clicks cancel at any time, the minibrowser is closed.
There doesn't seem to be a way to have my page aware of the change besides setting up some polling or something which doesn't make sense, my returnUrl and cancelUrl should be used somewhere, right?
this is my code to get the redirect url (using adaptive payments gem):
pay_request = PaypalAdaptive::Request.new
data = {
'requestEnvelope' => {'errorLanguage' => 'en_US'},
'currencyCode' => 'USD',
'receiverList' =>
{ 'receiver' => [
{'email' => '...', 'amount'=> 10.00}
]},
'actionType' => 'PAY',
'returnUrl' => 'http://www.example.com/paid',
'cancelUrl' => 'http://www.example.com/cancelled',
'ipnNotificationUrl' => 'http://www.example.com/ipn'
}
pay_response = pay_request.pay(data)
redirect_to pay_response.approve_paypal_payment_url "mini"
And here is how I am setting up the paypal js:
var dg = new PAYPAL.apps.DGFlowMini({ trigger: "buyit", expType: "mini" });
It all seems pretty straight forward, not sure what I am missing.
Well - seems to be a bug on our side - just tried it myself and confirmed with our integration teams. :-(
Unfortunately the other short term fix I can think of other than what you've mentioned (checking for the existence of the popup window) is to call the PaymentDetails API from your server side to check the status of the Payment. I've opened the bug on our side but don't have an ETA.
Edit 10/18: Sorry I'm wrong. This is working - it's just that our developer guide is not providing all the required information. In case of the mini-browser flow, you would need to provide a 'callbackFunction' and also name your dgFlow variable as 'dgFlowMini'. (the latter is important - as apdg.js is expecting the 'dgFlowMini' variable to be defined) Here is the code that works:
var returnFromPayPal = function(){
alert("Returned from PayPal");
// Here you would need to pass on the payKey to your server side handle to call the PaymentDetails API to make sure Payment has been successful or not
// based on the payment status- redirect to your success or cancel/failed urls
}
var dgFlowMini = new PAYPAL.apps.DGFlowMini({trigger: 'em_authz_button', expType: 'mini', callbackFunction: 'returnFromPayPal'});
I have a working sample here: https://pp-ap-sample.appspot.com/adaptivesample?action=pay (make sure you select mini as the Experience Type)
We will get our docs updated and also cleanup apdg.js to remove the dependency on the JS variable name.
Looks like the PayPal experience for embedded flows has gotten worse. Now you'll receive an error message after invoking mini or lightbox that says "Payment can't be completed. This feature is currently unavailable."
I have to redirect the flow of my website to login page when user clicks any link in the page once the session is expired (either by time out or manually loggout out from another window)
I added the following piece of code in my main.gsp(included in every gsp)
<script>
$.ajaxSetup({
statusCode: {
401: function(){
// Redirect the to the login page.
location.href = "/gra/login/auth";
}
}
});
</script>
This used to work fine before, but we did some changes to out application in this phase (oracle migration, new UI and also spring security plugin)
Now it doesnt forward the entire page to login page, but content is only refreshed in the target container which is updated by the link click (the logout page comes in that div only)
This is how it used to work without the above code.
How do I make this a global page forward?
Update: I just checked it in firebug and found that clicking a link after session timeout
is generating a 302 (moved temporarily) code number in response and not 401 ?
This is an excellent task for using grails Filters (Documentation).
The code below will intercept all controllers and all actions and belore they are invoked and check the session is valid. If it fails, it redirects to the login page.
You should change the condition in the if statement to check your session appropriately.
class SecurityFilters {
def filters = {
sessionCheck(controller: '*', action: '*') {
before = {
if (!session && !actionName.equals('login')) {
redirect(uri: '/gra/login/auth')
return false
}
}
}
}
}