SECTICA/client_main.html Secret

## client_main.html
<head>
    <title>FB test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="favicon.ico?v=2" />
</head>
<body>
    <div id="app"></div>
</body>

## client_main.jsx
import React from 'react';
import {Meteor} from 'meteor/meteor';
import reactDom from 'react-dom';

import App from '/imports/ui/app';


Meteor.startup(()=>{
	reactDom.render(
		<App/>
	, document.getElementById('app'));

});

## imports_ui_app.jsx
/**
 * Created by osboxes on 30/06/17.
 */

import React from 'react';
import {withTracker} from 'meteor/react-meteor-data';

class AppWrapper extends React.Component {
  constructor(props) {
    super(props);

  }

  _handleLogin = () => {
    Meteor.loginWithFacebook({
      // loginStyle: 'redirect',
      requestPermissions: ['email', 'public_profile']
    }, (err) => {
      if ( err ) {
       console.error('Login failed');
       console.error(err);
      } else {
        console.log(Meteor.user());
      }
    });
  };

  _handleLogout = () => {
    Meteor.logout();
  };

  render() {
    return (
      <div>
        {!this.props.user && <button onClick={this._handleLogin}>Login with facebook</button>}
        {this.props.user && <button onClick={this._handleLogout}>Logout</button>}
      </div>
    );
  }
}

export default withTracker(() => ({user: Meteor.user()}))(AppWrapper);

## installed packages
METEOR:

  react-meteor-data
  static-html
  accounts-facebook
  service-configuration


NPM:

 "@babel/runtime": "^7.0.0-beta.51",
 "meteor-node-stubs": "^0.4.1",
 "react": "^16.4.1",
 "react-dom": "^16.4.1",

## server_main.js
import { Meteor } from 'meteor/meteor';

const services = Meteor.settings.private.oAuth;

Meteor.startup(() => {
    if (services) {
      for (let service in services) {
        if (services.hasOwnProperty(service)) {
          ServiceConfiguration.configurations.upsert({service: service}, {
            $set: services[service]
          });
        }
      }
    }

  Accounts.onCreateUser((options, user) => {

    if (user.services.facebook) {
      let fb = user.services.facebook;

      if (options.profile) {
        user.profile = options.profile;
      } else {
        user.profile = {};
      }

      try {
        let additionalData = getAdditionalFBInfo(fb.accessToken);

        user.profile.FBId = additionalData.id;
        user.profile.firstName = additionalData.first_name;
        user.profile.lastName = additionalData.last_name;
        user.profile.picture = additionalData.picture.data.url;

        if ( additionalData.email ){
          user.emails = [{
            address: additionalData.email,
            verified: false
          }];
        }
      } catch (e) {
        console.error('FB user create failure');
        console.error(e);
      }

    }

    return user;
  });

  Accounts.onLogin((params) => {
    let user = Meteor.user();
    console.log('User logged in');
    console.log(user);
  });

  Accounts.onLoginFailure((attempt) => {
   console.error('Login attempt failure');
   console.error(attempt);
  });

  function getAdditionalFBInfo(accessToken) {
    let result;

    result = Meteor.http.get("https://graph.facebook.com/me", {
      params: {
        access_token: accessToken,
        fields: 'first_name,last_name,email,picture.type(large)'
      }
    });

    if (result.error) {
      throw result.error;
    }

    return JSON.parse(result.content);
  }

});

## settings.json
{
  "public": {
    "environment": "development",
    "version": "0.0.1"
  },
  "private": {
    "oAuth": {
      "facebook": {
        "appId": "<APP ID HERE>",
        "secret": "<SECRET HERE>"
      }
    }
  }
}
	<head>
	<title>FB test</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<link rel="icon" href="favicon.ico?v=2" />
	</head>
	<body>
	<div id="app"></div>
	</body>
	import React from 'react';
	import {Meteor} from 'meteor/meteor';
	import reactDom from 'react-dom';

	import App from '/imports/ui/app';


	Meteor.startup(()=>{
	reactDom.render(
	<App/>
	, document.getElementById('app'));

	});
	/**
	* Created by osboxes on 30/06/17.
	*/

	import React from 'react';
	import {withTracker} from 'meteor/react-meteor-data';

	class AppWrapper extends React.Component {
	constructor(props) {
	super(props);

	}

	_handleLogin = () => {
	Meteor.loginWithFacebook({
	// loginStyle: 'redirect',
	requestPermissions: ['email', 'public_profile']
	}, (err) => {
	if ( err ) {
	console.error('Login failed');
	console.error(err);
	} else {
	console.log(Meteor.user());
	}
	});
	};

	_handleLogout = () => {
	Meteor.logout();
	};

	render() {
	return (
	<div>
	{!this.props.user && <button onClick={this._handleLogin}>Login with facebook</button>}
	{this.props.user && <button onClick={this._handleLogout}>Logout</button>}
	</div>
	);
	}
	}

	export default withTracker(() => ({user: Meteor.user()}))(AppWrapper);
	METEOR:

	react-meteor-data
	static-html
	accounts-facebook
	service-configuration


	NPM:

	"@babel/runtime": "^7.0.0-beta.51",
	"meteor-node-stubs": "^0.4.1",
	"react": "^16.4.1",
	"react-dom": "^16.4.1",
	import { Meteor } from 'meteor/meteor';

	const services = Meteor.settings.private.oAuth;

	Meteor.startup(() => {
	if (services) {
	for (let service in services) {
	if (services.hasOwnProperty(service)) {
	ServiceConfiguration.configurations.upsert({service: service}, {
	$set: services[service]
	});
	}
	}
	}

	Accounts.onCreateUser((options, user) => {

	if (user.services.facebook) {
	let fb = user.services.facebook;

	if (options.profile) {
	user.profile = options.profile;
	} else {
	user.profile = {};
	}

	try {
	let additionalData = getAdditionalFBInfo(fb.accessToken);

	user.profile.FBId = additionalData.id;
	user.profile.firstName = additionalData.first_name;
	user.profile.lastName = additionalData.last_name;
	user.profile.picture = additionalData.picture.data.url;

	if ( additionalData.email ){
	user.emails = [{
	address: additionalData.email,
	verified: false
	}];
	}
	} catch (e) {
	console.error('FB user create failure');
	console.error(e);
	}

	}

	return user;
	});

	Accounts.onLogin((params) => {
	let user = Meteor.user();
	console.log('User logged in');
	console.log(user);
	});

	Accounts.onLoginFailure((attempt) => {
	console.error('Login attempt failure');
	console.error(attempt);
	});

	function getAdditionalFBInfo(accessToken) {
	let result;

	result = Meteor.http.get("https://graph.facebook.com/me", {
	params: {
	access_token: accessToken,
	fields: 'first_name,last_name,email,picture.type(large)'
	}
	});

	if (result.error) {
	throw result.error;
	}

	return JSON.parse(result.content);
	}

	});
	{
	"public": {
	"environment": "development",
	"version": "0.0.1"
	},
	"private": {
	"oAuth": {
	"facebook": {
	"appId": "<APP ID HERE>",
	"secret": "<SECRET HERE>"
	}
	}
	}
	}