Facebook,Google用户登录的接入

根据官方的接入文档，编写适合自己用的接入代码

1.Facebook接入

// 加载Facebook JS SDK
(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'));

//加载完js sdk之后立即初始化
window.fbAsyncInit = function() {
  FB.init({
    appId      : 'your app-id',
    cookie     : true,                     // Enable cookies to allow the server to access the session.
    xfbml      : true,                     // Parse social plugins on this webpage.
    version    : 'v5.0'           // Use this Graph API version for this call.
  });
  //初始化之后立即执行，如果不需要可以不用
  //FB.getLoginStatus(function(response) {   // Called after the JS SDK has been initialized.
    //statusChangeCallback(response);        // Returns the login status.
  //});
};

//Facebook的登录状态检测，在这里可以获取到FB的登录结果，可以加入自己的方法
function statusChangeCallback(response) {  // Called with the results from FB.getLoginStatus().
  console.log('FB登录结果:', response);     // The current login status of the person.
  if (response.status === 'connected') {   // Logged into your webpage and Facebook.
    testAPI();
  } else {                                 // Not logged into your webpage or we are unable to tell.
    alert('Not Login Facebook')
  }
}

function testAPI() {                      // Testing Graph API after login.  See statusChangeCallback() for when this call is made.
  console.log('Welcome!  Fetching your information.... ');
  // FB.api 第二个参数可以加入指定对象 {fields: 'id,name,token_for_business'}
  FB.api('/me', function(response) {
    console.log('Successful login for: ' + response.name);
  });
}

//点击登录按钮执行操作
function onFacebookLogin() {
  //调用Facebook的内置登录方法
  FB.login(function (response) {
    statusChangeCallback(response);
  });
}

// 点击退出登录按钮执行的操作
function onFacebookLogout() {
  FB.logout(function(response) {
    console.log(response);
    console.log("Person is now logged out");
  });
}

2.Google接入

首先要引入js文件

https://apis.google.com/js/api:client.js

var googleUser = {};
var startApp = function () {
    gapi.load('auth2', function () {
        // Retrieve the singleton for the GoogleAuth library and set up the client.
        auth2 = gapi.auth2.init({
            client_id: 'your id', //客户端ID
            cookiepolicy: 'single_host_origin',
            scope: 'profile' //可以请求除了默认的'profile' and 'email'之外的数据
        });
        //为登录按钮设置ID:customBtn，会自动增加触发事件
        attachSignin(document.getElementById('customBtn'));
    });
};

function attachSignin(element) {
	//点击登录按钮后就会弹出google登录
    auth2.attachClickHandler(element, {},
    	//登录结果返回
        function (googleUser) {
        	console.log(googleUser);
            var profile = auth2.currentUser.get().getBasicProfile();
            var authResponse = auth2.currentUser.get().getAuthResponse();
            console.log('ID: ' + profile.getId());
            console.log('Full Name: ' + profile.getName());
            console.log('Given Name: ' + profile.getGivenName());
            console.log('Family Name: ' + profile.getFamilyName());
            console.log('Image URL: ' + profile.getImageUrl());
            console.log('Email: ' + profile.getEmail());
            console.log('access_token: ' + authResponse.access_token);
            console.log('idToken: ' + authResponse.id_token);
        }, function (error) {
            console.log(JSON.stringify(error, undefined, 2));
        });
}

//注销
function signOut() {
	var auth2 = gapi.auth2.getAuthInstance();
	auth2.signOut().then(function () {
		alert('用户注销成功');
	});
}

//启动google登录初始化方法
startApp();

3.Twitter登录

首先要加载jQuery文件

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

function twitter(){
	$.ajax({
		type: "POST",
		url: "https://api.twitter.com/oauth/authorize",
		data: "oauth_token=Z6eEdO8MOmk394WozF5oKyuAv855l4Mlqo7hhlSLik",
		success: function(msg){
			alert( "Data Saved: " + msg );
		}
	});
}