整理国外分享和登录方式
facebook分享代码(直接拼接分享地址的方式)
var fbHref = '分享地址';
$("#Jfacebook").on("click", function() {
var _uri = "https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(fbHref) +"&display=popup&ref=plugin&src=share_button";
window.open(_uri,"facebook", "height=500, width=750, top=" +($(window).height() / 2 - 250) + ", left=" +(document.body.offsetWidth / 2 - 375) + ", toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no");
})
fb可以自动读取要分享页面的标题/描述/图片,也可以自己设置，放在head标签里，方法如下
<!--facebook Cards Start -->
<!-- facebook根据og:url设置的地址拿标题、描述、图片 ，这个地址必须是可以访问的页面-->
<meta property="og:url" content="分享地址">
<meta property="og:title" content="标题标题标题">
<meta property="og:description" content="描述描述描述">
<meta property="og:image" content="图片url">
<!--facebook Cards End-->
Twitter分享代码
var twitterHref = '分享地址';
var twitterShare = '分享后附带的描述文案';
$("#Jtwitter").on("click", function() {
var _uri = 'http://twitter.com/share?url=' + encodeURIComponent(twitterHref) + '&text=' + encodeURIComponent(twitterShare);
window.location.href = _uri;
});
twitter可以自动读取要分享页面的标题/描述/图片,也可以自己设置，放在head标签里，方法如下
<!--Twitter Cards Start -->
<meta name="twitter:card" content="summary">
<meta property="og:url" content="分享地址" />
<meta name="twitter:title" content="标题标题标题">
<meta name="twitter:description" content="描述描述描述">
<meta name="twitter:image" content="图片url">
<!--Twitter Cards End-->
whatapps分享代码
var whatsappHref = 'https://api.whatsapp.com/send?text='+encodeURIComponent('分享地址'+' '+'分享文案');
$('#JwhatsappBtn').attr('href',whatsappHref);
Facebook 集成SDK形式的分享代码
跟直接拼接分享地址的方式一样要设置facebook Cards
// 异步加载SDK
(function(d, s, id) {
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/zh_CN/sdk.js#xfbml=1&version=v2.10';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
window.fbAsyncInit = function() {
//FB.init初始化SDK
FB.init({
appId: '181549225736868', //控制面板-->应用编号
cookie: true, // enable cookies to allow the server to access the session
xfbml: true, // parse social plugins on this page
version: 'v2.10' // use graph api version 2.10
});
};
$("#JshareToFb").bind("click", function(e) {
// 详细参数参考https://developers.facebook.com/docs/sharing/reference/share-dialog
FB.ui({
method: 'share',
href: 'http://www.onmyojigame.jp/index.html' //地址要带上.html
}, function(response) {
});
})
分享踩的坑
- Facebook的分享图片是不能通过url参数拼接,应该是未加修饰的网址，没有会话变量、用户识别参数或计数器。
- Facebook分享存在缓存问题，可以通过facebook分享调试器的批量失效工具进行处理(刷新meat card方法)https://developers.facebook.com/tools/debug/sharing/
- Facebook的分享图片尺寸
为了在高分辨率设备上完美展示，建议使用分辨率至少达到 1200 x 630 像素的图片。作为最低要求，您应使用 600 x 315 像素的图片，以便显示带较大图片的链接页面帖子。 文件大小不得超过 8MB。
小图片:当图片小于 600 x 315 像素时，虽然它也能在链接页面帖子中显示，但尺寸会非常小。最小图片尺寸为 200 x 200 像素。如果使用更小的图片，分享调试器将报错
建议尽量使用接近 1.91:1 宽高比的图片，以便能在动态消息中完整显示，无需任何裁剪。
Facebook两种授权登录方式
Facebook两种授权登录方式是基于官网的文档整理
- 利用 JavaScript SDK 部署网页版“Facebook 登录”，可以参考Space官网的git地址
nie.define("FbLogin", function() {
// 异步加载SDK
(function(d, s, id) {
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/zh_CN/sdk.js#xfbml=1&version=v2.10';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//当SDK加载完毕后，就会调用window.fbAsyncInit，而FB.init必须在其他初始化代码之前被调用
window.fbAsyncInit = function() {
FB.init({
appId: '181549225736868', //控制面板-->应用编号
cookie: true, // enable cookies to allow the server to access the session
xfbml: true, // parse social plugins on this page
version: 'v2.10' // use graph api version 2.10
});
}
//检查登录状态
function checkLoginState() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
function statusChangeCallback(response) {
console.log(response);
if (response.status === 'connected') {
//用户登录了 Facebook 和您的应用
//response.authResponse.accessToken //包括应用用户的访问口令
registerbyFb(response.authResponse.accessToken);
} else {
loginFb();
}
}
//呈现“登录”对话框提示登录
function loginFb() {
FB.login(function(response) {
console.log(response);
// 用户登录了 Facebook 和您的应用。
if (response.status === 'connected') {
console.log('Successful login for: ' + response.authResponse.userID);
registerbyFb(response.authResponse.accessToken); //应用用户的访问口令
}else {
// The person is not logged into this app or we are unable to tell.
}
}, {
auth_type: 'rerequest',
scope: 'email,publish_actions' //向应用用户请求的一系列以逗号分隔的权限
});
}
function registerbyFb(token) {
//console.log(token);
// 登录成功后具体要做的事情
}
function addEvent() {
//登录按钮
$("#JloginBtn").bind("click", function() {
checkLoginState();
})
//退出登录
$("#JloginOut").bind("click", function() {
FB.logout(function(response) {
alert('退出成功！');
});
})
}
addEvent();
})
- 不使用 Facebook SDK，手动构建登录流程
//不使用 Facebook SDK，手动构建登录流程
nie.define("FbLogin", function(e) {
// 异步加载SDK
(function(d, s, id) {
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/zh_CN/sdk.js#xfbml=1&version=v2.10';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
var appId = '181549225736868'; //638864706286069,1888151414802180 //控制面板-->应用编号
//让用户登录 呈现“登录”对话框提示他们登录
function loginFb() {
var _uri = "https://www.facebook.com/v2.10/dialog/oauth?client_id=" + appId + "&redirect_uri=" +encodeURIComponent('http://test.163.com:8080/');
window.location.href = _uri;
}
//当SDK加载完毕后，就会调用window.fbAsyncInit，而FB.init必须在其他初始化代码之前被调用
window.fbAsyncInit = function() {
FB.init({
appId: appId,
cookie: true, // enable cookies to allow the server to access the session
xfbml: true, // parse social plugins on this page
version: 'v2.10' // use graph api version 2.10
});
if (getUrlParams('code')) {
//确认登录 code
registerbyFb(getUrlParams('code'));
}else if(getUrlParams('error')){
//取消登录 将被重定向至以下位置
// YOUR_REDIRECT_URI?
// error_reason=user_denied
// &error=access_denied
// &error_description=The+user+denied+your+request.
}else{
loginFb();
}
};
var getUrlParams = function(name) {
var params = {};
var url = window.location.href;
var idx = url.indexOf("?");
if (idx > 0) {
var queryStr = url.substring(idx + 1);
var args = queryStr.split("&");
for (var i = 0, a, nv; a = args[i]; i++) {
nv = args[i] = a.split("=");
params[nv[0]] = nv.length > 1 ? nv[1] : true;
}
}
return params[name];
}
function registerbyFb(code) {
console.log(code);
// 登录成功后具体要做的事情
}
function addEvent(){
//登录
$('#JloginBtn').bind('click',function(){
// console.log(getUrlParams('code'));
if (getUrlParams('code')) {
registerbyFb(getUrlParams('code'));
}else{
loginFb();
}
})
}
addEvent();
})
- FB 退出登录
1.调用FB.logout();
要求页面域名必须与应用配置的网站地址同域。
2.使用以下代码退出登录
FB.getLoginStatus(function (response) {
if (response.authResponse) {
window.location = "https://www.facebook.com/logout.php?confirm=1&api_key=1888151414802180&next=" +
'http://test.nie.163.com/' +
"&access_token=" + response.authResponse.accessToken;
} else {
//HIDE **LOGOUT BUTTON**
//SHOW **LOGIN BUTTON**
}
});
要求：next参数必须是应用配置的网站地址同域。。
3.当页面域名和配置的网站域名不同域时，可以使用方法2，先跳到与配置同域的一个页面下，再跳回当前页面域名的页面做退出后处理。
需要注意的是app_id的创建和设置（上线使用的app_id是由编辑/营销提供），详细操作请看下图
最后需要将创建的应用发布上线才能使用
DMM接入
思路：点击登录按钮后获取token，然后拼接地址请求登入画面，选择 事前登录/Facebook/Twitter/Google 登录后，回跳到设置的地址，不管登录成功与否都会带上参数，此时根据参数进行相关的操作（假如访问出现异常，会带上message参数，值为错误信息）
var host = "https://g37-40027.webapp.easebar.com/g37/"; //平台接口
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg); //
if (r != null) return r[2];
return null;
}
function Base64() {
// private property
_keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
// public method for encoding
this.encode = function(input) {
var output = "";
var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
var i = 0;
input = _utf8_encode(input);
while (i < input.length) {
chr1 = input.charCodeAt(i++);
chr2 = input.charCodeAt(i++);
chr3 = input.charCodeAt(i++);
enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 63;
if (isNaN(chr2)) {
enc3 = enc4 = 64;
} else if (isNaN(chr3)) {
enc4 = 64;
}
output = output +
_keyStr.charAt(enc1) + _keyStr.charAt(enc2) +
_keyStr.charAt(enc3) + _keyStr.charAt(enc4);
}
return output;
}
// public method for decoding
this.decode = function(input) {
var output = "";
var chr1, chr2, chr3;
var enc1, enc2, enc3, enc4;
var i = 0;
input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
while (i < input.length) {
enc1 = _keyStr.indexOf(input.charAt(i++));
enc2 = _keyStr.indexOf(input.charAt(i++));
enc3 = _keyStr.indexOf(input.charAt(i++));
enc4 = _keyStr.indexOf(input.charAt(i++));
chr1 = (enc1 << 2) | (enc2 >> 4);
chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
chr3 = ((enc3 & 3) << 6) | enc4;
output = output + String.fromCharCode(chr1);
if (enc3 != 64) {
output = output + String.fromCharCode(chr2);
}
if (enc4 != 64) {
output = output + String.fromCharCode(chr3);
}
}
output = _utf8_decode(output);
return output;
}
// private method for UTF-8 encoding
_utf8_encode = function(string) {
string = string.replace(/\r\n/g, "\n");
var utftext = "";
for (var n = 0; n < string.length; n++) {
var c = string.charCodeAt(n);
if (c < 128) {
utftext += String.fromCharCode(c);
} else if ((c > 127) && (c < 2048)) {
utftext += String.fromCharCode((c >> 6) | 192);
utftext += String.fromCharCode((c & 63) | 128);
} else {
utftext += String.fromCharCode((c >> 12) | 224);
utftext += String.fromCharCode(((c >> 6) & 63) | 128);
utftext += String.fromCharCode((c & 63) | 128);
}
}
return utftext;
}
// private method for UTF-8 decoding
_utf8_decode = function(utftext) {
var string = "";
var i = 0;
var c = c1 = c2 = 0;
while (i < utftext.length) {
c = utftext.charCodeAt(i);
if (c < 128) {
string += String.fromCharCode(c);
i++;
} else if ((c > 191) && (c < 224)) {
c2 = utftext.charCodeAt(i + 1);
string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
i += 2;
} else {
c2 = utftext.charCodeAt(i + 1);
c3 = utftext.charCodeAt(i + 2);
string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
i += 3;
}
}
return string;
}
}
var base64 = new Base64();
//获取token
function getToken(callback) {
$.ajax({
url: host + "user/token",
type: "get",
dataType: "jsonp",
success: function(data) {
if (data.success) {
callback(data);
} else {
alert('error');
}
}
})
}
//跳转登录页面
function login() {
getToken(function(data) {
var token = data.token; //获取token
var app_id = "628060"; //应用程序ID_编辑/营销提供
var href = base64.encode(location.href + '?token=' + token);
var finishurl = host + 'user/finish?page=' + href; //设置登录后回跳地址
var param = base64.encode("app_id=" + app_id + "&token=" + token + "&finishurl=" + finishurl);
location.href = "https://netgame-api.dmm.com/api/Auth/Login?p=" + param;
})
}
$('#JloginBtn').click(function() {
// 获取token_跳转登录页面_点击跳去登录页面
login();
})
//DMM登录成功回跳后的相关操作
var tokenPage = getUrlParam('token'); //用户token
var message = getUrlParam('message'); //假如访问出现异常，会带上message参数，值为错误信息
if (tokenPage) {
//成功登录后回跳进行的操作处理
var install_status = getUrlParam('install_status') * 1; //是否安装（预约）游戏，1/0
if (install_status) { //已经预约游戏
} else { //未预约游戏
}
} else if (message) {
//登录异常后回跳进行的操作处理
alert('网络错误，请稍后重试');
var href = '//www.onmyojigame.jp/pc/';
location.href = href;
}
手机阅读请扫描下方二维码：
12345678
12345678
12345678
12345678
12345678
12345678
12345678
1
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
1
1
555
555
555
555
555
555
1
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
mykujudqjpsfwyxxkagl
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
hthemvuhiefntptixbxo
12345678
12345678
12345678
12345678
12345678
12345678
12345678
12345678
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
555
1
1
1
555
1
1
1
1
1
1
555
1
555
1
1
1
1
test
test
1
555
1
1
555
1
555
1
1
1
1
1
1
1
1
1
1
1
1
1