Click here to Skip to main content
15,888,286 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I recently put registering and logging with facebook on my website, which works, but i have one problem. When I change the name, photo, etc on my website profile and log out, as soon as I log back in, the changes are not updated. I think the right approach here is to check whether a user has already registered with the email address that matches their social email address and if they have AND their name/profile photo are set, then we don’t update their name/profile photo. I don't know how to manage that.

JavaScript
(function($, document, window) {
var hello = window.hello;

var makeApiRequest = window.makeApiRequest;

var SocialAuth;

'use strict';

// only proceed if hello.js has already been referenced
if (typeof window.hello === 'undefined') {
    return;
}


/**
 * Lib for making Facebook and Google OAuth API calls.
 * @type {Object}
 */
SocialAuth = {

    /**
     * Initialize the social login APIs.
     */
    init: function() {

        // initialize hello.js
        hello.init({
            facebook: '1684686755117990',
            google: '617421937193-dbfsdngr0j1i3g10ecdum7ugjf92t6r6.apps.googleusercontent.com'
        }, {
            'redirect_uri': '',
            scope: 'basic, email, friends'
        });
    },


    /**
     * Registers a new user or logs in an existing user.
     * @param  {string}   provider - Must be either 'facebook' or 'google' (required)
     * @param  {Function} callback - Called after the login request is completed
     */
    login: function(provider, callback) {
        var self = this;

        // if there is a valid token in localStorage, the user is already authenticated
        if (this.isLoggedIn()) {
            typeof callback === 'function' && callback(true);
            return;
        }

        // first authenticate with the provider
        hello(provider)
            .login()
            .then(function() {
                var authToken, data;
                if (provider == 'facebook') {
                    authToken = JSON.parse(localStorage.hello).facebook['access_token'];
                    data = {
                        'token': authToken, 'provider': 'facebook'
                    };
                }
                else if (provider == 'google') {
                    authToken = JSON.parse(localStorage.hello).google['access_token'];
                    data = {
                        'token': authToken, 'provider': 'google'
                    };
                }

                // after that make the login api request to own site
                makeApiRequest('auth/oauth', data, 'POST')
                    .success(function(response) {
                        self.setLoginToken(true);
                        self.setAccountType(provider);
                        typeof callback === 'function' && callback(true);
                    })
                    .error(function() {
                        typeof callback === 'function' && callback(false);
                    });
            }, function() {
                typeof callback === 'function' && callback(false);
            });
    },


    /**
     * Logs the current user out.
     * @param  {Function} callback - Called after the user is logged out
     */
    logout: function(callback) {
        hello.logout()
             .then(callback);
    },


    /**
     * Checks if the user is logged in with a valid token.
     * @returns {Boolean} - is true when user is logged in
     */
    isLoggedIn: function() {
        return !!localStorage.ProjectToken;
    },


    /**
     * Gets the login token from localStorage.
     * @returns {string} - the login token
     */
    getLoginToken: function() {
        return localStorage.ProjectToken;
    },


    /**
     * Sets the login token in localStorage.
     * @param {string} token - the login token provided by the API (required)
     */
    setLoginToken: function(token) {
        localStorage.Project = token;
    },


    /**
     * Sets the account type in localStorage.
     * @param {string} type - possible values 'google' and 'facebook'
     */
    setAccountType: function(type) {
        localStorage.accountType = type;
    },


    /**
     * Retrieves some user data from the provider's API & stores it in the DB.
     * @param {string} provider - Either 'google' or 'facebook' (required)
     */
    getUserData: function(provider) {
        var data;
        hello(provider)
            .api('me')
            .then(function(json) {
                data = {};
                data.email = json.email;
                data['first_name'] = json['first_name'];
                data['family_name'] = json['last_name'];

                if (provider == 'facebook') {
                    data.avatar = json.picture + '?width=200&height=200';
                }
                else if (provider == 'google') {
                    data.avatar = json.picture.split('?')[0] + '?sz=200';
                }

                makeApiRequest('users/me', data, 'PATCH', true);
            });
    }
};

SocialAuth.init();

window.SocialAuth = SocialAuth;
}(jQuery, document, window));


What I have tried:

I don't know how to put it to work
Posted
Updated 3-Nov-16 7:06am

1 solution

You can have a flag to determine whether user has updated the fields from Facebook or not.
 
Share this answer
 
Comments
Member 12737957 3-Nov-16 16:04pm    
But how to put changes to the code that ifs updated, it not copies info from facebook?
You need to check that flag. If flag is true, then don't copy again because you have already copied.
Member 12737957 4-Nov-16 3:21am    
Could you write me that part of code? And where to put it?
You need to write the code. Just write it where you Are deciding to fetch from FACEBOOK. Else you have to hire me. ;)

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900