做有态度的前端团队

网易FEG前端团队

整理国外分享和登录方式

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) {
    });
})

分享踩的坑

  1. Facebook的分享图片是不能通过url参数拼接,应该是未加修饰的网址,没有会话变量、用户识别参数或计数器。
  2. Facebook分享存在缓存问题,可以通过facebook分享调试器的批量失效工具进行处理(刷新meat card方法)https://developers.facebook.com/tools/debug/sharing/
  3. Facebook的分享图片尺寸
    为了在高分辨率设备上完美展示,建议使用分辨率至少达到 1200 x 630 像素的图片。作为最低要求,您应使用 600 x 315 像素的图片,以便显示带较大图片的链接页面帖子。 文件大小不得超过 8MB。
    微信截图_20171225095114.png

小图片:当图片小于 600 x 315 像素时,虽然它也能在链接页面帖子中显示,但尺寸会非常小。最小图片尺寸为 200 x 200 像素。如果使用更小的图片,分享调试器将报错
2.png
建议尽量使用接近 1.91:1 宽高比的图片,以便能在动态消息中完整显示,无需任何裁剪。


Facebook两种授权登录方式

Facebook两种授权登录方式是基于官网的文档整理

  1. 利用 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();
})
  1. 不使用 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();
})
  1. FB 退出登录
    1.调用FB.logout();
    要求页面域名必须与应用配置的网站地址同域。
    clipboard.png

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是由编辑/营销提供),详细操作请看下图
test1.png
test2.png
test3.png
test4.png
最后需要将创建的应用发布上线才能使用


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;
}

手机阅读请扫描下方二维码:

添加新评论

ali-40.gifali-41.gifali-42.gifali-43.gifali-44.gifali-45.gifali-46.gifali-47.gifali-48.gifali-49.gifali-50.gifali-51.gifali-52.gifali-53.gifali-54.gifali-55.gifali-56.gifali-57.gifali-58.gifali-59.gifali-60.gifali-61.gif