Showing Google login page in GWT Frame - javascript

I'm developing a GWT application that uses Google login. For this I have a Java servlet that redirects the user to the Google login page based on the UserService.createLogin() function. The Java servlet in question can be accessed at "/login" URL. Previously, whenever users click the login button in the application, I opened a window as follows,
Window.open("/login", "Bla", "");
Then, when the login procedure is successful (UserService.getCurrentUser() != null) I perform a redirect in the Java servlet as follows,
response.sendRedirect("/success.html");
The success.html file contains a simple line where the onLoad() does the following,
<body onLoad="window.opener.loginSucceededCallback();window.close();"/>
This causes the original window to close and calls a JavaScript callback function 'loginSucceededCallback' which I registered in the GWT class which called the Window.open(). This works fine.
I'm showing the Google login in a separate window because I don't want the GWT application to have to reload. However, it would be much nicer if I could embed the Google login page inside the GWT app instead of showing it in a popup window (or a separate tab). For this, I was considering to use the Frame() or NamedFrame() object which allows display of external pages. I can successfully show the Google login page in such a frame, however when login (at Google) succeeds I cannot get the JavaScript code in success.html to correctly call the callback function in the GWT code. There is no clear 'window' or 'window.opener' object anymore, at least I think. My JavaScript knowledge is also kind of limited and none of the existing forum posts made me see the light...
Does anybody have an idea how to link together these pieces of code such that a successful login on the server side gets noticed by the GWT client? Can I do something with a FormPanel and Frame()?
Thanks,
Ralph

You can use something like this
frame.addLoadHandler(new LoadHandler() {
#Override
public void onLoad(LoadEvent event) {
if(frame.getUrl().equals("your link here"))
loginSucceededCallback();
}
});

Related

Error: Could not complete the operation due to error 8150002e

I am working on a Outlook VSTO add-in, in which I am using 'System.Windows.Forms.WebBrowser' to display the add-in functionality.
One functional requirement is to have oauth connection to cloud accounts (like OneDrive, Dropbox). When user clicks a button (e.g. 'Connect OneDrive'), we call 'window.open' in JavaScript code (ES6) with the oauth-url.
The issue which I am facing is, if user doesn't enter any credentials and close the window, and then again try to connect the cloud account (by clicking the 'Connect OneDrive'), I am getting an exception (Error: Could not complete the operation due to error 8150002e.).
I couldn't find any information about the error code '8150002e' on web.
This exception is not always present but comes around 50% of the times.
Any help would be appreciated in this.
what I have tried:
changing the windowName param every time window.open is called
having global var for window Object.
Using _blank parameter to open a new window every time.
After 5-6 times, the error comes up, after 5-6 times error goes away and auth window start coming up like before.
Opening a simple static HTML page in 'window.open' to verify if the issue has something to do with HTML page. The above issue is still present.
Resetting the System.Windows.Forms.WebBrowser programmatically.
Removing the cookies.
Instead of calling window.open from JavaScript code, we call VSTO code to open the browser window, the error is still there.
Edit: Created a minimal viable example at
https://github.com/vinay-x/SampleAddin
Code related to the issue:
SDXOLForm1.cs (navigates the browser to SamplePage.HTML hosted on localhost:8001)
SamplePage.HTML (contains a button, which calls window.open function).
The sample application has a windows form which contains a webBrowser control, which navigates to a simple HTML page which contains a button.
Had to deal with some IE11 stuff and I ran across this question. The solution I found to fix this issue is to set the window variable to null prior to calling window.open.
So for your example you have this:
function myFunction() {
window.open("https://www.w3schools.com", 'BackfliptOAuth', "width=800,height=800,center=true,useContentSize=true");
}
I modified it to this:
var win = null;
function myFunction() {
win = null;
win = window.open("https://www.w3schools.com", 'BackfliptOAuth', "width=800,height=800,center=true,useContentSize=true");
}

How to implement Google Analytics event tracking inside a React VR project?

This is loosely written to give a basic idea of what I'm trying achieve.
< VrButton onClick={props.userClick}>< /VrButton>
userClick={() => this.triggerTracking}
triggerTracking() {
ga('send', 'event', 'myEventCategory', 'myEventAction', 'myEventLabel');
}
I expect the code to trigger Google Analytics event tracking in the GA system when the user clicks on a button, but I get an error message - "ga is not a function".
I have GA set up in my index.html file, with the proper ID, and pulling in the latest analytics.js API.
React VR is all within a web worker context so it is not possible to access anything on your window without the use of native modules.
You can embed them directly in your client js and use the GA tracking functions as you normally would there. You will then call a function on your native module within your react VR app.
You can check out the documentation here: https://facebook.github.io/react-vr/docs/native-modules.html
Try using the window scope as:
window.ga('send', 'event', 'myEventCategory', 'myEventAction', 'myEventLabel');
I'm not familiar with React at all, but perhaps React causes some abstraction between the window and the react scope, making your ga() function unavailable.
Do next stps:
open the network debug tool of your browser.
reload your page
review loaded url list and check that www.google-analytics.com/analytics.js is loaded
If you does not see such url loaded - read google analitycks manual about how to setup google analytics on your page.
If you see such url replace url www.google-analytics.com/analytics.js with www.google-analytics.com/analytics_debug.js in your page, than reload and than go to console tab of your browser debugger and check the errors.

How to solve Facebook Error 191 without having a website?

Me an my team are currently working on a software project at university and my present task is to bind our desktop javafx application with Facebook.
Basically I have an fxml method in a controller that is called when the user hits a "Share" button in my GUI. In the method I'd like to simply open up my .html file using a WebView:
#FXML
public void shareFacebookClicked() throws Exception{
// Setting up the webview
WebView webView = new WebView();
final WebEngine webEngine = webView.getEngine();
webEngine.setJavaScriptEnabled(true);
// Read the html file and let the web engine load it.
File file = new File(getClass().getClassLoader().getResource("facebook.html").toURI().getPath());
webEngine.load(file.toURI().toURL().toString());
Stage stage = new Stage();
stage.initOwner(this.stage);
stage.setScene(new Scene(webView, 1000, 800));
stage.show();
}
There is no problem with it, my "facebook.html" file is loaded and displayed correctly (well, almost correctly) in a web view.
The actual problem is that I'm constantly getting the 191 Facebook error saying that the link is not owned by the application. Since there are tons of posts and questions on this around the Internet (and yes I checked and read all of them) here are the things that I'm already aware of:
I registered my application on the Facebook Developer site. I know about the AppID and Secret
I know that this error mainly comes from the fact that people forget to set their website URL and domain in the Settings. The problem is that I don't have a website. I just have a simple .html file which I'd like to use in a web view inside of javafx. However, I tried all possible combinations advised on stackoverflow, facebook help centre and other forums which include: Setting website URL to http://localhost/, domain to localhost, enabling Embedded browser OAuth Login, setting the redirect URI to localhost too, etc.
I assume that my goal could be achieved by using RESTfb, Facebook4j or Graph API. When I tried those I had to stop because I faced problems with the user authentication plus I thought this current option would be the easiest way (considering this feature has LOW-priority in our software).
None of this solved my problem therefore I've given up researching the answer and decided to post my very own personal question.
In my opinion there must be some error in the .html file and/or I completely misunderstand something in the way this works. The .html file:
<html>
<head>
<title> Share on Facebook </title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js"></script>
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#shareonfacebook').click(function (e) {
FB.ui({
appId: 'MY_APP_ID',
display: "popup",
method: "feed",
name: "Test",
link:"",
caption:"Test",
description: "Test",
});
});
});
</script>
</head>
<body>
<div id="fb-root"></div>
<button id="shareonfacebook" >Share</button>
<script>
FB.init({
appId : 'MY_APP_ID'
});
</script>
</body>
</html>
Partially I have this code from a tutorial site. Theoretically it should work. All I want is a dialog to come up where the user can publish the results of the workout he/she completed using our software. Currently when the .html file is opened up there is a simple button to click. This and all the "Test" strings inside of the javascript are only for testing. I just want to achieve that I can post something on my wall. The next step would be of course to somehow set the posting text dynamically etc.
Please tell me what I'm doing wrong or how I should approach the whole thing. Like I said, the task is minimal therefore it shouldn't be that difficult but I've been sitting in front of my laptop for 2 days without any success. I'm ready to post more code or give more information if it's needed.
Thank you for the help in advance!

google contextual gadget not loading google app script first time > Need to implement Authorization flow

I have google contextual gagdet installed in my domain, and that contextual; gadget is fetching data from external google App script whose url is something like this :
https://script.google.com/macros/s/AKfycbzP2A1SlTFxXVy39b5KmvNLFDSTeDveR49od-Wno2VFdcdT9m0/exec
I am calling this script from google contextual gadget using following jsonp ajax call
$.ajax({
url: app_script_url,
dataType: 'jsonp'
});
but when my gadget is loaded after opening any email, I seem following error in my console log:
SyntaxError: syntax error
<html><head><title>Authorization needed</title><style>.auth-
So basically what I want is, When loading the gadget in my gmail message when first time gadget is loaded and if user do not have authorization access, then it should ask use to authorize the script using some button or link, Similar to what is shown when you click on this link > https://script.google.com/macros/s/AKfycbzP2A1SlTFxXVy39b5KmvNLFDSTeDveR49od-Wno2VFdcdT9m0/exec
Till now I have tried many approaches like I tried the approach from this link
https://developers.google.com/gadgets/docs/oauth
I tried the example shown in this link, I replaced url shown in fetchData() function with the above one, but I was not sure what oAuth parameters to use. so in a way I am now stuck to implement authorization flow.
Let me know if anyone has any idea on this.
Thanks in advance!!
Dean
Your link about 'gadgets' has nothing to do with apps script its a completely different thing called google gadgets (from igoogle).
Your problem is likely that you havent published the gas correctly. Either publish it as anonymous access or make the ajax call authenticated. In any case do not publish the script to run as the user accesing the script.

Authenticate a facebook user in a Firefox plug-in

I'm trying to write a Firefox plug-in that accesses data from facebook.
Now I'm not sure how to get an access token.
I tried to implement the client side flow for desktop apps (with the fixed redirect uri), but the big problem I encounter there, is that JavaScript doesn't allow me to wait for the redirect to happen.
Any idea how this could be done?
As far as I understood it, because I don't have a webpage, the JavaScript API doesn't help much, right?
I guess that you are opening https://www.facebook.com/dialog/oauth in a browser tab to let the user log in and give you access. You don't need to pass a working redirect URL here, you can rather use something that will definitely not work, like http://my.extension.local/. Then you only need to detect when the tab gets redirected to that URL. If you have a classic extension, you register a progress listener on the <browser> element of that tab and look at onLocationChange() calls - once you see a location starting with http://my.extension.local/ you can cancel the request and close the tab, the necessary data is in the URL. If you use the Add-on SDK you can attach a ready event listener to the tab, something along these lines:
var tabs = require("tabs");
tabs.open({
url: "https://www.facebook.com/dialog/oauth?...",
inBackground: false,
onReady: function(tab)
{
if (tab.url.indexOf("http://my.extension.local/") == 0)
{
...
}
}
});

Categories

Resources