12 | May | 2020 | Rex's Personal Site

Javascript Example

$(document).ready(function(){
    google_app.init();
});

var googleUser = {};

function ginit(){
    gapi.load('auth2', function() {
        /* Ready. Make a call to gapi.auth2.init or some other API */
        auth2 = gapi.auth2.init({
            client_id: '12345.apps.googleusercontent.com'
        });

        attachSignin(document.getElementById('login_google'));
        attachSignin(document.getElementById('signup_google'));
    });
}

function attachSignin(element) {
    auth2.attachClickHandler(
        element, 
        {},
        function(googleUser) {
            console.log(googleUser.getBasicProfile());
            google_app.auto_login(googleUser.getBasicProfile());
        }, 
        function(error) {
          alert(JSON.stringify(error, undefined, 2));
        }
    );
}

var google_app = function(){
 
    function auto_login(profile){
        var data = {
            id: profile.getId(), 
            name: profile.getName(), 
            email: profile.getEmail()
        }

        login(data);
    }

    function login(data){
        var params = data;
        /* Test data
        var params = {
            name: "RRR", 
            email: "email@gmail.com", 
            id: "102200000000000000"
        }
        */

        $.ajax({
            type: 'post',
            url: front_base + '/member/login_google_memebr',
            data: params,
            dataType: 'json',
            success: function(res){
                if(typeof res.status == 'undefined'){
                    alert(res);
                }else if(res.status == 'fail'){
                    alert(res.message);
                }else{
                    //console.log(res);
                    var data = res.data;
                    alert('登入成功');
                    if(data == 'cart'){
                        window.location.href = front_base + '/cart/checkout/';
                    }else{
                        window.location.href = front_base + '/member/';
                    }
                }
            },
            error: function(res){
                console.log(res);
            }
        });
    }
 
    return {
        auto_login: auto_login
    }
}();

$(document).ready(function(){

google_app.init();

});

var googleUser = {};

function ginit(){

gapi.load('auth2', function() {

/* Ready. Make a call to gapi.auth2.init or some other API */

auth2 = gapi.auth2.init({

client_id: '12345.apps.googleusercontent.com'

});

attachSignin(document.getElementById('login_google'));

attachSignin(document.getElementById('signup_google'));

});

}

function attachSignin(element) {

auth2.attachClickHandler(

element,

{},

function(googleUser) {

console.log(googleUser.getBasicProfile());

google_app.auto_login(googleUser.getBasicProfile());

function(error) {

alert(JSON.stringify(error, undefined, 2));

}

);

}

var google_app = function(){

function auto_login(profile){

var data = {

id: profile.getId(),

email: profile.getEmail()

}

function login(data){

var params = data;

/* Test data

var params = {

email: "[email protected]",

id: "102200000000000000"

}

$.ajax({

type: 'post',

url: front_base + '/member/login_google_memebr',

data: params,

dataType: 'json',

success: function(res){

if(typeof res.status == 'undefined'){

alert(res);

}else if(res.status == 'fail'){

alert(res.message);

}else{

//console.log(res);

var data = res.data;

alert('登入成功');

if(data == 'cart'){

window.location.href = front_base + '/cart/checkout/';

}else{

window.location.href = front_base + '/member/';

}

error: function(res){

console.log(res);

}

});

}

return {

auto_login: auto_login

}

}();

PHP (Laravel)

    public function login_google_memebr(Request $req){
        $data = $req->input();
        //logg($data);

        $member = MemberM::where('email', $data['email'])
            ->first();
        if($member == false){
            //自動註冊
            $member = new MemberM;
            $member->google_id = $data['id'];
            $member->email = $data['email'];
            $member->name = $data['name'];
            $member->password = Hash::make($data['id']);
            $member->type = 3;
            $member->save();

            $this->send_reg_email($member->id);
        }else{
            $member->google_id = $data['id'];
            $member->password = Hash::make($data['id']);
            $member->type = 3;
            $member->save();
        }

        $remember = true;
        $credentials = [
            'email' => $data['email'],
            'password' => $data['id']
        ];
        //logg($credentials);
        //logg(Hash::make($password));
        $result = $this->guard()->attempt($credentials, $remember);

        $cart = new Cart;
        if($cart->item_count() > 0){
            return $this->success_response('cart');
        }else{
            return $this->success_response(true);
        }
    }

public function login_google_memebr(Request $req){

$data = $req->input();

//logg($data);

$member = MemberM::where('email', $data['email'])

->first();

if($member == false){

//自動註冊

$member = new MemberM;

$member->google_id = $data['id'];

$member->email = $data['email'];

$member->name = $data['name'];

$member->password = Hash::make($data['id']);

$member->type = 3;

$member->save();

$this->send_reg_email($member->id);

}else{

$member->google_id = $data['id'];

$member->password = Hash::make($data['id']);

$member->type = 3;

$member->save();

}

$remember = true;

$credentials = [

'email' => $data['email'],

'password' => $data['id']

];

//logg($credentials);

//logg(Hash::make($password));

$result = $this->guard()->attempt($credentials, $remember);

$cart = new Cart;

if($cart->item_count() > 0){

return $this->success_response('cart');

}else{

return $this->success_response(true);

}

Reference:

Official
https://developers.google.com/identity/sign-in/web/sign-in#before_you_begin

Sample Javascript:

var fb_token = '';
var fb_id = '';

function statusChangeCallback(response) {  // Called with the results from FB.getLoginStatus().
    console.log('statusChangeCallback');
    //console.log(response);                   // The current login status of the person.
    if (response.status === 'connected') {   // Logged into your webpage and Facebook.
        //fb_token = response.authResponse.accessToken;
        //fb_id = response.authResponse.userID;
        //testAPI(); 
        fb_app.auto_login();
    } else {                                 // Not logged into your webpage or we are unable to tell.
        document.getElementById('status').innerHTML = 'Please log ' +
            'into this webpage.';
    }
}

function checkLoginState() {  
    console.log('checkLoginState'); // Called when a person is finished with the Login Button.
    FB.getLoginStatus(function(response) {// See the onlogin handler
        statusChangeCallback(response);
    });
}

window.fbAsyncInit = function() {
    FB.init({
        appId      : '1116666666',
        cookie     : true,                     // Enable cookies to allow the server to access the session.
        xfbml      : true,                     // Parse social plugins on this webpage.
        version    : 'v7.0'           // Use this Graph API version for this call.
    });
};
  
(function(d, s, id) {                      // Load the SDK asynchronously
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

 
function testAPI() {                      // Testing Graph API after login.  See statusChangeCallback() for when this call is made.
    console.log('Welcome!  Fetching your information.... ');
    FB.api(
        '/me?fields=name,email', 
        function(response) {
            console.log(response);
            console.log('Successful login for: ' + response.name);
        }
    );
}


$(document).ready(function(){
    fb_app.init();
});

var fb_app = function(){
 
    function init(){
        $('#login_fb, #signup_fb').on('click', function(e){
            e.preventDefault();
            FB.login(function(response) {
                console.log('FB.login');
                console.log(response);
                checkLoginState();
            }, {scope: 'public_profile,email'});
        });

        //Test in dev
        //login();
    }

    function auto_login(){
        FB.api(
            '/me?fields=name,email', 
            function(response) {
                console.log(response);
                login(response);
            }
        );
    }

    function login(data){
        var params = data;
        /* Test data
        var params = {
            name: "RRR", 
            email: "email@gmail.com", 
            id: "102200000000000000"
        }
        */

        $.ajax({
            type: 'post',
            url: front_base + '/member/login_fb_memebr',
            data: params,
            dataType: 'json',
            success: function(res){
                if(typeof res.status == 'undefined'){
                    alert(res);
                }else if(res.status == 'fail'){
                    alert(res.message);
                }else{
                    //console.log(res);
                    var data = res.data;
                    alert('登入成功');
                    if(data == 'cart'){
                        window.location.href = front_base + '/cart/checkout/';
                    }else{
                        window.location.href = front_base + '/member/';
                    }
                }
            },
            error: function(res){
                console.log(res);
            }
        });
    }
 
    return {
        init: init, 
        auto_login: auto_login
    }
}();

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

var fb_token = '';

var fb_id = '';

function statusChangeCallback(response) { // Called with the results from FB.getLoginStatus().

console.log('statusChangeCallback');

//console.log(response); // The current login status of the person.

if (response.status === 'connected') { // Logged into your webpage and Facebook.

//fb_token = response.authResponse.accessToken;

//fb_id = response.authResponse.userID;

//testAPI();

fb_app.auto_login();

} else { // Not logged into your webpage or we are unable to tell.

document.getElementById('status').innerHTML = 'Please log ' +

'into this webpage.';

}

function checkLoginState() {

console.log('checkLoginState'); // Called when a person is finished with the Login Button.

FB.getLoginStatus(function(response) {// See the onlogin handler

statusChangeCallback(response);

});

}

window.fbAsyncInit = function() {

FB.init({

appId : '1116666666',

cookie : true, // Enable cookies to allow the server to access the session.

xfbml : true, // Parse social plugins on this webpage.

version : 'v7.0' // Use this Graph API version for this call.

});

};

(function(d, s, id) { // Load the SDK asynchronously

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) return;

js = d.createElement(s); js.id = id;

js.src = "https://connect.facebook.net/en_US/sdk.js";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));

function testAPI() { // Testing Graph API after login. See statusChangeCallback() for when this call is made.

console.log('Welcome! Fetching your information.... ');

FB.api(

'/me?fields=name,email',

function(response) {

console.log(response);

console.log('Successful login for: ' + response.name);

}

);

}

$(document).ready(function(){

fb_app.init();

});

var fb_app = function(){

function init(){

$('#login_fb, #signup_fb').on('click', function(e){

e.preventDefault();

FB.login(function(response) {

console.log('FB.login');

console.log(response);

checkLoginState();

}, {scope: 'public_profile,email'});

});

//Test in dev

//login();

}

function auto_login(){

FB.api(

'/me?fields=name,email',

function(response) {

console.log(response);

}

);

}

function login(data){

var params = data;

/* Test data

var params = {

email: "[email protected]",

id: "102200000000000000"

}

$.ajax({

type: 'post',

url: front_base + '/member/login_fb_memebr',

data: params,

dataType: 'json',

success: function(res){

if(typeof res.status == 'undefined'){

alert(res);

}else if(res.status == 'fail'){

alert(res.message);

}else{

//console.log(res);

var data = res.data;

alert('登入成功');

if(data == 'cart'){

window.location.href = front_base + '/cart/checkout/';

}else{

window.location.href = front_base + '/member/';

}

error: function(res){

console.log(res);

}

});

}

return {

init: init,

auto_login: auto_login

}

}();

PHP Example (Laravel)

    public function login_fb_memebr(Request $req){
        $data = $req->input();
        //logg($data);

        $member = MemberM::where('email', $data['email'])
            ->first();
        if($member == false){
            //自動註冊
            $member = new MemberM;
            $member->fb_id = $data['id'];
            $member->email = $data['email'];
            $member->name = $data['name'];
            $member->password = Hash::make($data['id']);
            $member->type = 2;
            $member->save();

            $this->send_reg_email($member->id);
        }else{
            //如果再用goggle登入就被蓋掉，所以每次都要更新
            $member->fb_id = $data['id'];
            $member->password = Hash::make($data['id']);
            $member->type = 2;
            $member->save();
        }

        $remember = true;
        $credentials = [
            'email' => $data['email'],
            'password' => $data['id']
        ];
        //logg($credentials);
        //logg(Hash::make($password));
        $result = $this->guard()->attempt($credentials, $remember);

        $cart = new Cart;
        if($cart->item_count() > 0){
            return $this->success_response('cart');
        }else{
            return $this->success_response(true);
        }
    }

public function login_fb_memebr(Request $req){

$data = $req->input();

//logg($data);

$member = MemberM::where('email', $data['email'])

->first();

if($member == false){

//自動註冊

$member = new MemberM;

$member->fb_id = $data['id'];

$member->email = $data['email'];

$member->name = $data['name'];

$member->password = Hash::make($data['id']);

$member->type = 2;

$member->save();

$this->send_reg_email($member->id);

}else{

//如果再用goggle登入就被蓋掉，所以每次都要更新

$member->fb_id = $data['id'];

$member->password = Hash::make($data['id']);

$member->type = 2;

$member->save();

}

$remember = true;

$credentials = [

'email' => $data['email'],

'password' => $data['id']

];

//logg($credentials);

//logg(Hash::make($password));

$result = $this->guard()->attempt($credentials, $remember);

$cart = new Cart;

if($cart->item_count() > 0){

return $this->success_response('cart');

}else{

return $this->success_response(true);

}

Reference:

Official Example:
https://developers.facebook.com/docs/facebook-login/web#logindialog
API reference:
https://developers.facebook.com/docs/graph-api/reference/user/?locale=zh_TW

Rex's Personal Site

This site is built on WordPress and contains personal notes, photos and videos

Daily Archives: 05/12/2020

Google Sign-in for Websites

Facebook Login (Javascript)