I'm creating a SPA app using Durandal and I would like to include a credit card payment facility. The guys that I'm looking at requires you to give return URLs to success, cancel and a view other pages, is that possible?
To me it would be breaking the 'single page' part of SPA, but is it possible? Could I do it all in a window?
Disclaimer: I don't know Durandal, but you would solve this in an SPA using either "hashbang URIs" or actually re-serving the SPA in your webserver for the requested return URI and adjusting the content using the same technique as hangbash URIs but using history.pushstate/history.popstate instead, see here: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history
A more general article from Google is available here that covers the same principle: https://developers.google.com/webmasters/ajax-crawling/
This "works" because SPAs are SPAs only in that the browser requests a new HTML document from the server once (or in your case, twice), the SPA should still be updating the history and address-bar state of the UA as the user navigates the application, just as though it were a regular multi-page application.
A great example of this is GitHub's source navigator: Try here ( https://github.com/angular/angular.js ) and navigate the repository, observe that the contents of the file-listing change as does the address bar, but your browser doesn't reload the whole page... yet if you copy+paste the (modified) address bar address into a new browser window, you get the same page back.
I looked into doing credit card processing from a SPA and the best option I had found was Stripe. They supply a javascript file that looks like it would work, I never implemented it on my project due to time constraints so I can't confirm that it works but it looked very promising.
IFRAMEs are quite good for this sort of thing. You can use jQuery to hook an event handler to the page load event and this will tell you when the other end has responded. Load the 3rd party page into the IFRAME and serve response pages on the URLs you provide to the service provider. As mentioned by others you can use routes to identify the response pages. The IFRAME will stop the round-tripping from mucking up your application state and in fact it is possible to put script in your response pages that dot-notates its merry way up the DOM and into your app.
Related
Just finished learning Vuejs and after visiting a few websites that use Vuejs like;
a) https://coderstape.com
b) https://www.thenetninja.co.uk
c) https://laracasts.com
I noticed that by navigating around the websites we by clicking on navbar links and some other links then the pages refresh and I haven't been able to find out the reason online. Could someone kindly explain what's happening in that? Doesn't it go against the purpose of SPA?
For example the last site you specified: https://laracasts.com.
On its main page there is a white button "BROWSE COURSES". If you open Chrome DevTools panel(look at the picture with explanations), go to tab "Networks" (1) and then click on this white button, you can see GET request to "series?curated" (2). If you open its details, you can see that as response, new page is received in the form of an HTML code (3), not JSON for example, as is usually the case in SPA.
Also, if you look at what programming language is used on this site, for example, using service https://whatcms.org/?s=laracasts.com, you can see that this is a PHP, namely Laravel.
From all this, I can make the assumption that they use Vue.js only partially, maybe in several components, but the site navigation itself is presented in the form of traditional static pages, which is why the page reloads.
Also, for example, if you take a look at this website https://www.spendesk.com/, you can see that they use Vue.js+Nuxt.js, as well as Node.js, as indicated by service whatcms.org, and if you try to navigate to various pages on this site, you will see no page loading. I can say that this site is a true SPA in the form in which you mean it.
I heard that you can do a SPA with a Laravel backend, but I think that's another story.
i have to develop a multipage application that includes invocation of several web services.
My first page has a login page. based on the user input i have to traverse to next page while calling the next web service simultaneously. so obviously this all depends on the login page information that has the userid and password and the response from the web service such as personId etc.
i need to store this information temporarily for a particular session but... how to do this?
There are two kinds of page:
There are the UI states as seen by the user. Your Login page and your Next page are examples of these. From the user's perspective they see a succession of pages.
However you are writing an App, a single controlling thing that is in charge of all those "UI pages". I suppose that you are using MobileFirst to create a hybrid application that is effectively executing in a browser. From that browser's perspective you have a single HTML page. This is important, MobileFirst only works with single-page applications.
Now the browser loads the HTML and JavaScript for your single application page and that JavaScript stays resident as the user moves between the different "UI Pages", so the JavaScript can have variables for keeping the state you are asking about. The actual UI navigation from "page" to "page" is usually done by hiding and revealing DIVs.
Hence your WebService call results will be delivered (asynchronously) to some JavaScript function you define, and in the meantime your code can hide the login page and reveal the next page as required. The login data being held in JavaScript variabes.
All of this is simplified by using a framework such as AngularJS which abstracts the messy details of hiding and revealing and dealing with asynch delivery.
I am trying to create a web page which will allow my user to upload a file to my S3 storage. For choosing the file user can use Google Drive, Dropbox and also local system. Am facing issues while implementing the Dropbox part of this.
Am using this technique for integration(using core API and OAuth 2).
First when user chooses Dropbox i am opening an HTML page in an IFrame. Here I have an authorize button which will open the authorize endpoint mentioned in the above link. This link shows me X-FRAME-Options error inside the Iframe so i had to open this link as a popup to work.
Is there a way around this? I'd like the authorize URL to open in the same iframe by using location.href.
Also when i open it as a popup, after the user logs in successfully the redirect_uri which i pass i getting opened in the popup. I had to do some unconventional setInterval coding to go around this. Can someone suggest a solution for this as well?
I also tried using CSRF tokens as mentioned in Smarx's blog but this also gives me the same error.
EDIT :
#smarx i tried using dropbox.js and it works fine. Stuck at one place
I used the OAuth popup driver and have a button which says sign-in.
First on load i create the client and then the popup driver as below
client = new Dropbox.Client({ key: client_id });
client.authDriver(new Dropbox.AuthDriver.Popup({
receiverUrl: "http://localhost/uploadCare/dbcallback.html"
});
);
And in the call back html i am writing
Dropbox.AuthDriver.Popup.oauthReceiver()
as mentioned in the docs.
But this does not take me back to the original page and show me the list of files.
I particularly did not understand this part of the explanation
"To use the popup driver, create a page on your site that contains the receiver code, change the code to reflect the location of dropbox.js on your site, and point the Dropbox.AuthDriver.Popup constructor to it."
Could you please help me out here.
You definitely can't put dropbox.com into an iframe, for security reasons (e.g. clickjacking).
A few suggestions:
Can you just use the Chooser for your use case? That would certainly be easier for you and your users.
If you can't use the Chooser, is there a reason you're not using dropbox.js? It has a popup auth driver that will pretty much just take care of all this for you. The redirect will definitely happen in the same window as auth, so communication between the windows (usually via localStorage) is generally necessary. This is already done in dropbox.js.
I am developing an mvc4 app with multiple spa's.
I am using the hot towel template for my spa.
What I want to do is have a anchor link within my views for a spa go to the index action for another controller, so my users can exit one spa and open another. Not all actions will start a spa some are regular mvc style pages.
I have put code like like the following in my spa html pages:
Navigate to another controller
This will change the url in the browser but always reloads the default html page for the spa. If I hit the refresh button in the browser then if will go to the proper page.
I have been able to put a target on the anchor tag of _parent or _top like:
Navigate to another controller
and it will navigate to the new controller page.
I believe it is something in the durandal framework that is preventing the spa from navigating to the second controller, but since I am just starting to work with this, I am stumped as what I need to change. I think there should be a better way than using the target in the anchor tag, or is that the best option.
I hope that I have understood you correctly. I believe this behaviour is caused my Sammy.js (which the durandal router is currently based on). The default behaviour of Sammy is to hijack all links and process them as regards to the SPA itself.
I didn't like this behaviour for the website I am working on and needed links to other MVC web pages to be possible from within the SPA. What I really wanted is for regular links to just work and hash links to be interpreted as a link to another view within the SPA. So '/controller/action' would go to another web page and '#moduleId' would go to another durandal V/VM.
I found this Sammy option that works for me and set it in my main.js
// This stops Sammy from hijacking regular links
Sammy.Application.prototype.disable_push_state = true;
I have seen that it is not possible to display any Google page from an iframe. An error message is displayed: cannot display, open in a new window.
I need to login to Google (OpenId authentication) from an iFrame in Joomla (cannot change this). Is there a workaround for this? I thought I could open the authentication page in a new window, and then try to kill that window and reload the original one, but I am not sure I can do that.
Thanks
Well you can just get the form (html code) and put it in your iframe but this will get very messy, for example, there maybe certain JS files that you need to include as well.
Redirecting to Google is best way to implement it.As Using IFrame Sometime does not allowed by some Companies Due to Security.