In my siteweb I'm implementing authentication with Facebook API.
<fb:login-button onlogin="fbLoginEvent(arguments)">Enter with Facebook</fb:login-button>
My function fbLoginEvent:
function fbLoginEvent( args ) {
//console.log( "fbLogin", args );
//var session = FB.getSession();
var session = FB.getAuthResponse();
if (session) {
fbCheckSession(session, function(data) {
if (data.result) {
fbLoginNow();
} else {
$('#facebook-register').data("overlay").load();
}
});
}
}
And my function for check the session:
var fbLogin = { status: false, uid: 0, access_token: "" };
function fbCheckSession( session, callback ) {
if ( session && $.type(callback) == "function" ) {
ajaxCall( "facebook", "check_session", {uid: session.uid, token: session.access_token}, function(data){
if ( data.result ) {
fbLogin.status = true;
fbLogin.fbuid = session.uid;
fbLogin.uid = data.info.id;
fbLogin.access_token = session.access_token;
callback( { result: true, info: { name: data.info.name, fbLogin: fbLogin } } );
} else {
callback( { result: false } );
}
});
}
}
I made various checks and I have noticed that uid and tokens value are empty.
Any solution?
Thk
You made a mistake by assigning session variable to FB.getAuthResponse function of JS-SDK
Use
var session = FB.getAuthResponse();
Instead of
var session = FB.getAuthResponse
You also using incorrect properties names, authResponse use the same format as FB.getLoginStatus not in format returned by getSession of previous version of JS-SDK.
uid named userID, and access_token is accessToken
Related
I want to retrieve the id of the user that's currently online. But I CANNOT do it with the following code:
Route::middleware('auth:api')->post('/optionelections', function (Request $request) {
return $request->user();
});
The reason is that I keep getting the same unauthorised error from Laravel. I've been trying to fix this error for days and I can't seem to find a solution. So I'm trying to do it in a different way but I don't know how. I'm currently using Passport to store my token and my client_id in local storage.
this is my apply_election.vue
import {apiDomain} from '../../config'
export default {
name: 'applyForElection',
data () {
return {
election: {},
newOption: {'election_id': ''},
//this is where the user_id should come
newOption: {'user_id': ''}
}
},
methods: {
createOption: function () {
var itemId = this.$route.params.id
this.newOption.election_id = itemId
this.$http.post(apiDomain + 'optionelections', this.newOption)
.then((response) => {
this.newOption = {'election_id': itemId}
alert('you applied!')
this.$router.push('/electionsnotstarted')
}).catch(e => {
console.log(e)
alert('there was an error')
this.$router.push('/electionsnotstarted')
})
}
},
created: function () {
var itemId = this.$route.params.id
this.$http.get('http://www.nmdad2-05-elector.local/api/v1/elections/' + itemId)
.then(function (response) {
this.election = response.data
})
}
}
And this in my OptionElectionsController.php
public function store(Request $request)
{
$optionElection = new OptionElection();
$optionElection->user_id = $request['user_id'];
$optionElection->option = "something";
$optionElection->votes = 0;
$optionElection->election_id = $request['election_id'];
$optionElection->accepted = 0;
if ($optionElection->save()) {
return response()
->json($optionElection);
}
}
This is my Auth.js
export default function (Vue) {
Vue.auth = {
setToken (token, expiration) {
localStorage.setItem('token', token)
localStorage.setItem('expiration', expiration)
},
getToken () {
var token = localStorage.getItem('token')
var expiration = localStorage.getItem('expiration')
if (!token || !expiration) {
return null
}
if (Date.now() > parseInt(expiration)) {
this.destroyToken()
return null
} else {
return token
}
},
destroyToken () {
localStorage.removeItem('token')
localStorage.removeItem('expiration')
},
isAuthenticated () {
if (this.getToken()) {
return true
} else {
return false
}
}
}
Object.defineProperties(Vue.prototype, {
$auth: {
get: () => {
return Vue.auth
}
}
})
}
You are using the TokenGuard of Laravel, There many way to let the guard recognise the authentication, the best methods:
Send the token in api_token attribute in the request's query.
this.newOption.api_token = token;
Send the token in Authorization header with Bearer prefix.
{
headers: {
Authorization: 'Bearer THE_TOKEN'
}
}
I'm trying to implement google sign-in to on my website.
I've done the steps from here Authenticate with Google.
This function executes after i have logged in to google :
function onSignIn(googleUser) {
var googleResponse = googleUser.getAuthResponse();
google_login(googleResponse, true);
};
Google_login function:
function google_login(res) {
var httpObject = getXMLHTTPObject();
var ajax_url = siteURL + 'google_login';
var params = 'token='+encodeURIComponent(res.id_token);
httpObject.open('POST', ajax_url, true);
httpObject.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
httpObject.onreadystatechange = function() {
if (httpObject.readyState == 4) {
if(httpObject.responseText == 'true') {
window.location = httpObject.responseURL;
}
else {
if(httpObject.responseText == '') {
window.location = siteURL + 'login_again';
}
else {
window.location = siteURL + 'google_login_error';
}
}
}
};
httpObject.send(params);
}
And in my model I'm using this code:
private $google_client;
function Google_model() {
parent::__construct();
$this->google_client = new Google_Client(['client_id' => 'my_client_id','client_secret' =>'my_client_secret']);
}
function check_google_user($access_token) {
$payload = $this->google_client->verifyIdToken($access_token);
if ($payload) {
return $payload;
}
return false;
}
In my controller I'm calling check_google_user function.
And here appears a strange behaviour. Sometimes when I try to login I get the payload, and sometimes not (PS: I'm trying to login with the same user in the same day). Am I doing something wrong?
EDIT:
I'm getting this error: Caught exception: Cannot handle token prior to 2017-01-25T16:20:24+0200
Solved this by commenting these lines in firebase JWT.php file:
throw new BeforeValidException(
'Cannot handle token prior to ' . date(DateTime::ISO8601, $payload->iat)
);
I'm using Yii2 and I have setup a login process which works fine (cookies as well) via the standard login page which is not AJAX.
I have built a dropdown login field which works fine at logging them in, however it doesn't seem to set the cookie as the user doesn't stay logged in and there is no bookie created.
I figured that this was because of AJAX and the cookie wasn't being created on the users system, but upon further reading it seems it should work.
I have verified that the cookie value is being set correctly, the only issue is the cookie doesn't seem to being created.
My login code:
JS:
function doLogin() {
// Set file to prepare our data
var loadUrl = "../../user/login/";
// Set parameters
var dataObject = $('#login_form').serialize();
// Set status element holder
var status_el = $('#login_status');
// Make sure status element is hidden
status_el.hide();
// Run request
getAjaxData(loadUrl, dataObject, 'POST', 'json')
.done(function(response) {
if (response.result == 'success') {
//.......
} else {
//.......
}
})
.fail(function() {
//.......
});
// End
}
function getAjaxData(loadUrl, dataObject, action, type) {
if ($('meta[name="csrf-token"]').length) {
// Add our CSRF token to our data object
dataObject._csrf = $('meta[name="csrf-token"]').attr('content');
}
return jQuery.ajax({
type: action,
url: loadUrl,
data: dataObject,
dataType: type
});
}
Controller:
public function actionLogin() {
// Check if they already logged in
if (!Yii::$app->user->isGuest and !Yii::$app->request->isAjax) {
return $this->redirect('/');
}
if (Yii::$app->request->isAjax) {
// Set our data holder
$response = ['output' => '', 'result' => 'error'];
}
// Let's send the POST data to the model and see if their login was valid
if (Yii::$app->request->isAjax and $this->user->validate() and $this->user->login()) {
$response['result'] = 'success';
} elseif (!Yii::$app->request->isAjax and Yii::$app->request->isPost and $this->user->validate() and $this->user->login()) {
//.......
} else {
//.......
}
if (Yii::$app->request->isAjax) {
echo Json::encode($response);
}
}
Model:
public function login() {
// Set cookie expire time
$cookie_expire = 3600 * 24 * Yii::$app->params['settings']['cookie_expire'];
return Yii::$app->user->login($this->getUser(), ($this->remember_me ? $cookie_expire : 0));
}
As I suspected (see my earlier comment) response might not be correctly generated in case of simply echoing the data. Or maybe Content-Type header matters. If someone can confirm this it will be great.
Anyway, I'm glad it works now (data needs to be returned).
And you can use Response handy format as well.
public function actionLogin() {
// ...
if (Yii::$app->request->isAjax) {
Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
return $response;
}
}
I am using this code to save user gallery images on my website.First when user logged in then all gallery images loads and when user will select any image then i need to save that image in a directory. This is my code. Image is saveing with the name but image size is zero.
$file = file_get_contents('https://graph.facebook.com/[Fb-Photo-ID]/picture?width=378&height=378&access_token=[Access-Token]');
$img = file_put_contents($target_dir['path'].'/'."facebook3.jpg",$file);
This is code of image gallery.
<script>
/**
* This is the getPhoto library
*/
function makeFacebookPhotoURL( id, accessToken ) {
//alert(id);
return 'https://graph.facebook.com/v2.6/' + id + '/picture?access_token=' + accessToken;
}
function login( callback ) {
FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
if (callback) {
callback(response);
}
} else {
console.log('User cancelled login or did not fully authorize.');
}
},{scope: 'publish_actions,user_location,user_photos,email'} );
}
function getAlbums( callback ) {
FB.api(
'/me/albums',
{fields: 'id,cover_photo'},
function(albumResponse) {
console.log( ' got albums ' );
if (callback) {
callback(albumResponse);
console.log(albumResponse);
}
}
);
}
function getPhotosForAlbumId( albumId, callback ) {
//alert(albumId);
console.log(albumId);
FB.api(
'/'+albumId+'/photos',
{fields: 'id'},
function(albumPhotosResponse) {
console.log( ' got photos for album ' + albumId );
if (callback) {
callback( albumId, albumPhotosResponse );
}
}
);
}
function getLikesForPhotoId( photoId, callback ) {
FB.api(
'/'+albumId+'/photos/'+photoId+'/likes',
{},
function(photoLikesResponse) {
console.log(photoLikesResponse);
if (callback) {
callback( photoId, photoLikesResponse );
}
}
);
}
function getPhotos(callback) {
var allPhotos = [];
var accessToken = '';
login(function(loginResponse) {
accessToken = loginResponse.authResponse.accessToken || '';
//console.log(accessToken);
getAlbums(function(albumResponse) {
var i, album, deferreds = {}, listOfDeferreds = [];
for (i = 0; i < albumResponse.data.length; i++) {
album = albumResponse.data[i];
deferreds[album.id] = $.Deferred();
listOfDeferreds.push( deferreds[album.id] );
getPhotosForAlbumId( album.id, function( albumId, albumPhotosResponse ) {
var i, facebookPhoto;
for (i = 0; i < albumPhotosResponse.data.length; i++) {
facebookPhoto = albumPhotosResponse.data[i];
allPhotos.push({
/* 'id' : facebookPhoto.id,
'added' : facebookPhoto.created_time, */
'url' : makeFacebookPhotoURL( facebookPhoto.id, accessToken )
});
}
deferreds[albumId].resolve();
});
}
$.when.apply($, listOfDeferreds ).then( function() {
if (callback) {
callback( allPhotos );
}
}, function( error ) {
if (callback) {
callback( allPhotos, error );
}
});
});
});
}
</script>
<script>
/**
* This is the bootstrap / app script
*/
// wait for DOM and facebook auth
var docReady = $.Deferred();
var facebookReady = $.Deferred();
$(document).ready(docReady.resolve);
window.fbAsyncInit = function() {
FB.init({
appId : '00000000000',
channelUrl : '//conor.lavos.local/channel.html',
status : true,
cookie : true,
xfbml : true
});
facebookReady.resolve();
};
$.when(docReady, facebookReady).then(function() {
if (typeof getPhotos !== 'undefined') {
getPhotos( function( photos ) {
//console.log(photos);
var str= JSON.stringify(photos);
var contact=jQuery.parseJSON(str);
$.each( photos, function( index, value ){
$.each( value, function( index1, value1 ){
console.log(value);
//console.log( index1+value1);
//console.log( index1+value1);
//console.log( index1+value1);
$("#images").append('<img height="100" width="150" src='+value1+' />');
$("a.myimg img").click(function()
{
var imgSrc = $(this).attr('src');
$("#fbimg").val(imgSrc);
});
});
});
});
}
});
</script>
The problem is that you are using FB API in incorrect way.
You should have version of your API request
check access_token -> whether it has correct wright ( user_photos )
in such way of request you won't receive image content. You can receive only link on static image.
So only after receiving of image - you can save it
Your link should be like :
https://graph.facebook.com/v2.6/[photo_Id]/picture?access_token=[access_token_with_wrights]
this will return JSON data kind of :
{
"data": {
"is_silhouette": false,
"url": "https://scontent.xx.fbcdn.net/[image_url]"
}
}
read more here and you can add additional params for thumbs ( aka "images" )
UPDATE
so in your way it would be like :
$jsonstring = json_decode(file_get_contents("https://graph.facebook.com/v2.6/[photo_Id]?fields=picture,images&access_token=[access_token_with_wrights]
"));
$file = file_get_contents($jsonstring['images'][0]['source']) /* chose your size */
$img = file_put_contents($target_dir['path'].'/'."facebook3.jpg",$file);
OR use FB PHP SDK
UPDATE #2
If you received static link to image from JS => just use it, not the graphApi request. It means that you can SEND ALREADY RECEIVED LINKS to server side. And they should be like https://scontent.xx.fbcdn.net/XXXXXX and after receiving them on server side you can just use them. and make
$file = file_get_contents("https://scontent.xx.fbcdn.net/");
But link should not be on http://graph.facebook.com!
UPDATE 3
Yes, it's correct request ( from question ).
JS code for images with static path:
FB.api(
'/' + albumId + '/photos',
{ fields: 'id,images' }, /* main is images array in response */
function ( albumPhotosResponse ) {
console.log( ' got photos for album ' + albumId );
if ( callback ) {
callback( albumId, albumPhotosResponse );
}
} );
parse the path for image from there.
I am sure this is probably something simple that i am not doing. Running livevalidation.js jquery plugin (livevalidation.com). It provides for custom function callbacks. I am trying to check for username availability. The server side is working fine and I am getting the proper responses back in my data var...
Here is my JS:
Validate.Username = function(value, paramsObj) {
var paramsObj = paramsObj || {};
var message = paramsObj.failureMessage || "Username is not available";
var isSuccess = true;
$.post("<?php echo fURL::getDomain(); ?>/ajax/username",
function(data) {
if (data.status === 'notavailable')
{
Validation.fail('oops, not available.');
}
});
};
I am calling it using:
var username = new LiveValidation('username', { validMessage: curr_username + "is available!" });
username.add( Validate.Presence, { failureMessage: "Choose a username" });
username.add( Validate.Username, { failureMessage: "Username is not available." } );
The problem I am getting is:
Uncaught ReferenceError: Validation is not defined
If I put the Validation.fail() outside of my .post() function it works fine. So am pretty sure it is because it's not able to be referenced inside the .post() function.
I've tried using a callback function
if (data.status === 'notavailable')
{
status_not_available();
}
I get the same error.
I realize this is something probably extremely simple, but any help would be appreciated. Thank you in advance.
i am having the same issue.
Ive found the following, http://forum.jquery.com/topic/ajax-return-value-on-success-or-error-with-livevalidation but have not been able to get it working.
BUT YES! At this very moment i made som (crappy) javascript addon that made it behave, i think :)
This is what i use.
function check_avail(name, id, postUrl)
{
var dataVal = name+'='+$(id).val();
var isaccepted = ''
$(id).next('div').remove();
$(id).after("Undersøger om "+name+" er ledigt");
$.ajax({
url: postUrl,
cache: false,
type: 'post',
dataType: 'json',
data: dataVal,
async: false,
success: function(data) {
if( data.success == 'true' )
{
$('#'+name+'-availability').remove();
//return false;
isaccepted = false;
}
if( data.success == 'false' )
{
$('#'+name+'-availability').remove();
// name.destroy();
isaccepted = true;
}
}
});
if (isaccepted == false) {
return false;
} else{
return true
};
}
And
f1.add( Validate.Custom, { against: function() {
return check_avail( 'brugernavn', '#ft001', 'usernamecheck.asp' );
}, failureMessage: 'Brugernavnet er optaget' } );
Hope it helps you :)
The json query you can read about on the link in the begining :)
(I am not at all skilled at javascript, and the "isaccepted" solution could problalby be made a lot better)
try to change it from Validation.fail to Validate.fail
try wrapping it in another function and try putting your validateStatus(status) function both inside and outside your Validate.Username function. example below is inside
Validate.Username = function(value, paramsObj) {
var paramsObj = paramsObj || {};
var message = paramsObj.failureMessage || "Username is not available";
var isSuccess = true;
$.post("<?php echo fURL::getDomain(); ?>/ajax/username",
function(data) {
validateStatus(data.status);
});
function validateStatus(status){
if (status === 'notavailable'){
Validate.fail("not available");
}
}
};