根据官方的接入文档,编写适合自己用的接入代码
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 );
}
});
}