I'm using Skydrive file picker javascript api to upload files to Skydrive. But as soon as I click on upload button...it opens the login window and closes instantly. Error log shows that WL.login : The pop up is closed without receiving any consent.
I've hosted my web-app on local domain: apidomain and published my files to IIS # Default Web Site/onedriveapi folder.
Following is the code:
[HTML]
<button onclick="uploadFile()">Save file</button>
<label id="info"></label>
[Javascript]
<script src="//js.live.net/v5.0/wl.js" type="text/javascript"></script>
<script type="text/javascript">
WL.init({
client_id: "00000000XXXXXXXX",
redirect_uri: "http://apidomain.com/onedriveapi/default.html",
scope: ["wl.signin", "wl.skydrive", "wl.skydrive_update"],
response_type: "token"
});
function uploadFile() {
WL.login({
scope: "wl.skydrive_update"
}).then(
function (response) {
alert(response);
WL.upload({
//path: "folder.a6b2a7e8f2515e5e.A6B2A7E8F2515E5E!170",
path: "response.data.folders[0].id",
element: "file",
overwrite: "rename"
}).then(
function (response) {
document.getElementById("info").innerText =
"File uploaded.";
},
function (responseFailed) {
document.getElementById("info").innerText =
"Error uploading file: " + responseFailed.error.message;
}
);
},
function (responseFailed) {
document.getElementById("info").innerText =
"Error signing in: " + responseFailed.error.message;
}
);
}
</script>
Redirect_URL in app settings is also same as mentioned above. I've also created callback.html as mentioned in few places, and replaced my redirect_url with
redirect_uri: "http://apidomain.com/onedriveapi/callback.html",
in page as well as appsettings of https://account.live.com/developers/applications/apisettings.
I also want to save the token received and location of the file uploaded into my db.Please anybody help to fix this issue as I'm struggling with this from last few days.
Thanks
FYI. This is the screenshot of the html page.
<html>
<head>
<script src="http://js.live.net/v5.0/wl.js" type="text/javascript"></script>
<script type="text/javascript">
WL.init({
client_id: "################",
redirect_uri: "http://yashlocal.com/skydrive/response",
scope: ["wl.signin", "wl.skydrive", "wl.skydrive_update"],
response_type: "token"
});
function uploadFile() {
WL.login({
scope: "wl.signin"
}).then(
function (response) {
alert(response);
WL.upload({
//path: "folder.a6b2a7e8f2515e5e.A6B2A7E8F2515E5E!170",
path: "response.data.folders[0].id",
element: "file",
overwrite: "rename"
}).then(
function (response) {
document.getElementById("info").innerText =
"File uploaded.";
},
function (responseFailed) {
document.getElementById("info").innerText =
"Error uploading file: " + responseFailed.error.message;
}
);
},
function (responseFailed) {
document.getElementById("info").innerText =
"Error signing in: " + responseFailed.error.message;
}
);
}
</script>
</head>
<body>
<button onclick="uploadFile()">Save file</button>
<label id="info"></label>
</body>
</html>
Related
I am trying to share my localhost page into facebook. But I am getting This page isn't available message.
I registered my app. Below are the details
App ID - 2129405327086578,
App Domains - loachost ,
Site URL - http://localhost:56897
Below is my code
<button id="shareonfacebook">ShareOnFaceBook</button>
<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) {e.preventDefault();
FB.ui(
{
method: 'popup',
name: 'TestShare',
href: 'http://localhost:56897/MyPage?id=26',
caption: 'hey how is my Application ? ',
description: 'hey how is my Application ?',
message: ''
});
});
});
</script>
<script>
FB.init({
appId: '2129405327086578'
});
</script>
What I am missing here?
Tt`s only possible if you have a static IP-adress, and in this case you have to write {your IP}:{port of localhost} to href field
I'm using Keycloak's bower package to create a very basic demo HTML/JS app. I have Keycloak running locally and keycloak.init() seems to work (no error triggered). However when I call keycloak.login() a 404 is returned. Might the login URL be wrongly created by the adapter?
The URL returned by keycloak.createLoginUrl() is
https://<keycloak url>/realms/<realm>/protocol/openid-connect/auth?client_id=account&redirect_uri=file%3A%2F%2F%2FUsers%2Fjgallaso%2FProjects%2Fdemos%2Fkeycloak-simple-web-client%2Findex.html&state=b167dc0b-3e5b-4c67-87f7-fd5289fb7b8f&nonce=1e2cb386-51db-496a-8943-efcf4ef5d5e1&response_mode=fragment&response_type=code&scope=openid
And this is my entire code:
<head>
<script src="bower_components/keycloak/dist/keycloak.min.js"></script>
</head>
<body>
<button id="login">Login</button>
</body>
<script>
var keycloak = Keycloak({
url: 'https://keycloak-keycloak.192.168.37.1.nip.io',
realm: 'demo',
clientId: 'account'
});
keycloak.init()
.success(authenticated => {
document.getElementById("login")
.addEventListener("click", () => { keycloak.login(); });
}).error(err => {
console.log("init, error: " + err);
});
</script>
</head>
Response is a plain:
ERROR 404: Not Found
You have 2 posibilities :
invoque login automatically in init method
login manually after call init without params
1)
<head>
<script src="bower_components/keycloak/dist/keycloak.min.js"></script>
</head>
<body>
<button id="login">Login</button>
</body>
<script>
var keycloak = Keycloak({
url: 'https://keycloak-keycloak.192.168.37.1.nip.io',
realm: 'demo',
clientId: 'account'
});
keycloak.init('login-required')
.success(function(authenticated) => {
}).error(err => {
console.log("init, error: " + err);
});
</script>
</head>
2)
keycloak.init().success(function(authenticated) {
if(authenticated == true){
alert('usuario logeado');
}else{
alert('usuario no logeado');
keycloak.login();
}
}).error(function() {
alert('failed to initialize');
});
I had trouble trying directly from the management.
file://c:/example.html
To do a better test you should leave your index.html on a local test server.
What I did was install the web server plugin for chrome and it worked for me.
I hope it'll help you.
regards
I want to provide users a facility to sign in with google. However, I want to use my image(only image, no css) as "sign in with google" button. I am using the following code:
<div id="mySignin"><img src="images/google.png" alt="google"/></div>
I am also using gapi.signin.render function as mentioned on google developer console. The code is:
<script src="https://apis.google.com/js/client:platform.js" type="text/javascript"></script>
<script>
function render(){
gapi.signin.render("mySignIn", {
// 'callback': 'signinCallback',
'clientid': 'xxxx.apps.googleusercontent.com',
'cookiepolicy': 'single_host_origin',
'requestvisibleactions': 'http://schema.org/AddAction',
'scope': 'profile'
});
}
The problem is that google signin popup is not opening and I cannot figure out how to solve it. Please suggest. Thanks in advance.
<script type="text/JavaScript">
/**
* Handler for the signin callback triggered after the user selects an account.
*/
function onSignInCallback(resp) {
gapi.client.load('plus', 'v1', apiClientLoaded);
}
/**
* Sets up an API call after the Google API client loads.
*/
function apiClientLoaded() {
gapi.client.plus.people.get({userId: 'me'}).execute(handleEmailResponse);
}
/**
* Response callback for when the API client receives a response.
*
* #param resp The API response object with the user email and profile information.
*/
function handleEmailResponse(resp) {
var primaryEmail;
var jsonobj=JSON.stringify(resp);alert(jsonobj);
var uid= jsonobj.id;
var user_name1= jsonobj.name;
for (var i=0; i < resp.emails.length; i++) {
if (resp.emails[i].type === 'account') primaryEmail = resp.emails[i].value;
}
/* document.getElementById('response').innerHTML = 'Primary email: ' +
primaryEmail + '<br/>id is: ' + uid; */
}
To use an image as your "Google Sign-in" button, you can use the GoogleAuth.attachClickHandler() function from the Google javascript SDK to attach a click handler to your image. Replace <YOUR-CLIENT-ID> with your app client id from your Google Developers Console.
HTML example:
<html>
<head>
<meta name="google-signin-client_id" content="<YOUR-CLIENT-ID>.apps.googleusercontent.com.apps.googleusercontent.com">
</head>
<body>
<image id="googleSignIn" src="img/your-icon.png"></image>
<script src="https://apis.google.com/js/platform.js?onload=onLoadGoogleCallback" async defer></script>
</body>
</html>
Javascript example:
function onLoadGoogleCallback(){
gapi.load('auth2', function() {
auth2 = gapi.auth2.init({
client_id: '<YOUR-CLIENT-ID>.apps.googleusercontent.com',
cookiepolicy: 'single_host_origin',
scope: 'profile'
});
auth2.attachClickHandler(element, {},
function(googleUser) {
console.log('Signed in: ' + googleUser.getBasicProfile().getName());
}, function(error) {
console.log('Sign-in error', error);
}
);
});
element = document.getElementById('googleSignIn');
}
For those who come to here trying to get the button work out: The code below should do the trick.
It looks like the 'callback' method doesn't seem to work not sure if this is something to do with Vue as I am building it on Vue, or Google changed it as this was posted 5 years ago. Anyways, use the example below.
window.onload =() =>{
var GoogleUser = {}
gapi.load('auth2',() =>{
var auth2 = gapi.auth2.init({
client_id: '<client-unique>.apps.googleusercontent.com',
cookiepolicy: 'single_host_origin',
scope: 'profile'
});
auth2.attachClickHandler(document.getElementById('googleSignup'), {},
(googleUser) =>{
console.log('Signed in: ' + googleUser.getBasicProfile().getName());
},(error) =>{
console.log('Sign-in error', error);
}
);
});
}
Change 'client_id' to your client id, and element id to your customized button id.
I hope this saves time for anyone!
Plus: I ended up using the code below, which is clearer:
window.onload = () => {
gapi.load('auth2', () => {
let auth2 = gapi.auth2.init({
client_id: '<client_id>.apps.googleusercontent.com',
cookiepolicy: 'single_host_origin',
scope: 'profile email'
});
document.getElementById('googleSignup').addEventListener('click',() => {
auth2.signIn().then(() => {
let profile = auth2.currentUser.get().getBasicProfile();
... profile functions ...
}).catch((error) => {
console.error('Google Sign Up or Login Error: ', error)
});
});;
});
}
I am using Hello.js for social login in my website . I am using a standard code that has been provided in the documentation HERE.
my code looks something like this
<script>
//user;
hello.on('auth.login', function (auth) {
// call user information, for the given network
hello(auth.network).api('/me').then(function (r) {
// Inject it into the container
//alert(r.name);
window.user = r.email;
window.im_name = r.name;
if (r.email) ajax1();
});
});
hello.init({
facebook: 'xxxxxxxxxxxxxxxxx',
google: 'xxxxxxxxxxxxxxxxxxxxxx5-q6xxxxxxxxxxxxxxxeusercontent.com',
}, {
redirect_uri: 'http://wstation.yzx.com/',
scope: 'email'
});
</script>
HTML
<button class="btn-fb" onclick="hello( 'facebook' ).login()">Facebook</button>
<button class="btn-google" onclick="hello( 'google' ).login()">Google</button>
Every thing is working fine I am able to login through Facebook and then send the credentials to the server to sign in the user. But after the user sign in . The Ajax1() method is called again and again all the time.
I am trying to read through the Documentation but nothing is helping out
UPDATE
I changed the code into something like this
function connect(x){
hello(x).api("/me").then(function(r){
window.user = r.email;
window.im_name = r.name;
if (r.email) ajax1();
}, function(e){
alert("Whoops! " + e.error.message );
});
}
and HTML
<button class="btn-fb" onclick="connect('facebook')">Facebook</button>
<button class="btn-google" onclick="connect('google')">Google</button>
Now I am getting error
Whoops! Error validating access token: This may be because the user logged out or may be due to a system error.
as an alert
Please help me if any one had same problem
Thanks in advance
I got it worked Hopefully it helps some one else having the same problem
<script>
function connect(x){
hello(x).login().then(function(r){
hello(r.network).api('/me').then(function(r){
alert('Login');
window.user = r.email;
window.im_name = r.name;
if (r.email) ajax1();
}, function(e){
alert("Whoops! " + e.error.message );
});
});
}
hello.init({
facebook: '2xxxxxxxxxxx4',
google: '3xxxxxxxxx5-qxxxxxxxxxxxxx6k1nunigepmsd3.apps.googleusercontent.com',
twitter: 'Yxxxxxxxxxxxw'
}, {
redirect_uri: 'http://wstation.inmotico.com/',
scope: 'email'
});
</script>
Thanks & Regards
I'm using the Graph API via JavaScript SDK like this (this is basic example straight from documentation):
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#login').click(function() {
FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
});
})
})
</script>
</head>
<body>
Hellow!
Login
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '249274258430595',
cookie: true,
status: true,
xfbml: true,
oauth: true
});
};
</script>
</body>
</html>
It's also possible to test it live here:
http://bitcells.com
This cookie I need for backend access to API (fbs_249274258430595) is not being set.
Only something called fbsr_249274258430595 is present and this is not what I need. I tested this with FireCookie extension for Firebug.
I really don't understand how this basic example is not working right - meaning that I want to use API from the backend code (PHP, Ruby etc.).
Any ideas?
Thank you!
David
I, on the other hand ended up setting my own cookie which server side can read:
I have one checkbox which asks user if he wants to share on fb, here is the code:
function setFbCookies(response) {
Cookie.set('fb_access_token', response.authResponse.accessToken, {path: '/'})
Cookie.set('fb_user_id', response.authResponse.userID, {path: '/'})
}
when('#share_on_fb', function(checkbox) {
checkbox.observe('change', function(ev) {
if(checkbox.getValue()) {
FB.getLoginStatus(function(response) {
if (response.authResponse) {
setFbCookies(response)
} else {
FB.login(function(response) {
if (response.authResponse) {
setFbCookies(response)
} else {
checkbox.checked = false
}
}, {scope: 'publish_stream'});
}
})
}
})
})
And here is the reason why fbs_xxxxx cookie doesn't get set:
https://developers.facebook.com/blog/post/525/
It looks like if you use oath=false, then it does get set, but this is only valid until 1st of october. There is still no documentation on how to get encrypted access token from the new fbsr_xxxxxx cookie.