基于milo的登录组件
使用场景：适用于PC端、移动端的QQ及微信登录 如在使用中遇到问题，请联系内部前端重构同学
[warning] 注意
- PC端、移动端都推荐引用bundle版本的milo库；
- milo库按需加载依赖时，统一不要带"-min",例如加载登录：need("biz.login",function(LoginManager){});
PC端登录
适用于PC端的QQ登录、微信登录 效果演示：DEMO
组件CDN
bundle版本
<script src="//ossweb-img.qq.com/images/js/milo_bundle/milo.js"></script>
[PC端登录]代码示例
[warning] 注意
- 登录前的容器ID名为
unlogin、登录后的容器ID名logined，登录后的用户信息ID名login_qq_span不可修改；- 登录功能需要在qq.com域名下才能正常使用，注意为登录后用户信息显示预留足够的位置。
<body>
<!--登录前状态 Start-->
<div id="unlogin" class="login" style="display: block;">
你好，请【<a id="btn_qqlogin" href="javascript:void(0)" title="QQ登录">QQ登录</a>】
【<a id="btn_wxlogin" href="javascript:void(0);" title="微信登陆">微信登陆</a>】
【<a id="btn_wxandqqlogin" href="javascript:void(0);" title="一体化登录">QQ微信一体化登录</a>】
</div>
<!--登录前状态 End-->
<!--登录后状态 Start-->
<div id="logined" class="login" style="display: none; ">
欢迎您，<span id="login_qq_span"></span>
<span id="ams_user_headimg"></span>
【<a id="btn_logout" href="javascript:void(0)" title="注销">注销</a>】
</div>
<!--登录后状态 End-->
<script src="//ossweb-img.qq.com/images/js/milo_bundle/milo.js"></script>
<script>
milo.ready(function () {
need("biz.login",function(LoginManager){
//QQ登录
milo.addEvent(g('btn_qqlogin'),'click',function(e){
LoginManager.login();
});
//微信登录
milo.addEvent(g('btn_wxlogin'),'click',function(e){
LoginManager.loginByWx({
"appId":"xxxxxxx", //游戏在微信的appid，联系内部
gameDomain:"xxx.qq.com",
serviceType:"xxx"
});
});
//QQ微信一体化登录
milo.addEvent(g("btn_wxandqqlogin"),"click",function(){
LoginManager.loginByWXAndQQ({
"appId":"xxxxxxx", //游戏在微信的appid
gameDomain:"xxx.qq.com",
serviceType:"xxx"
},function(){
alert("已登录，即将刷新页面");
location.reload();
});
});
//检查登录态
milo.addEvent(g("checkLogin"),"click",function(){
LoginManager.checkLogin(function(userInfo){
g("loginInfobox").innerHTML="已登录:<br/>"+JSON.stringify(userInfo);
},function(){
g("loginInfobox").innerHTML="未登录";
})
})
//注销
milo.addEvent(g("btn_logout"),"click",function(){
LoginManager.logout();
})
var chkLoginFunc=function(str){
LoginManager.checkLogin(function(){
console.log("已登录: "+str);
},function(){
console.log("未登录: "+str);
})
}
//执行验证登陆操作
LoginManager.checkLogin(function(userinfo){
//此处返回用户的基本信息
console.log("已登录：\n",userinfo);
//如果登陆类型是qq，使用LoginManager.getUserFace方法去获取头像
if (userinfo.logtype=="qq"){
LoginManager.getUserFace(function(data){
$("#ams_user_headimg").html("<img src=\""+data.userFace+"\"> ");
});
}else if(userinfo.logtype=="wx"){
//如果登陆类型是wx微信，就直接获取基本信息里的头像
$("#ams_user_headimg").html("<img src=\""+userinfo.headimgurl+"/64\"> ");
}
},function(){
console.log("未登录");
//LoginManager.init();
});
});
});
</script>
</body>
效果演示：DEMO
移动端登录
适用于移动端的QQ登录、微信登录 效果演示：DEMO
组件CDN
bundle版本
<script src="//ossweb-img.qq.com/images/js/mobile_bundle/milo.js"></script>
[warning] 注意
- 页面中如需引用zepto.js，请使用need("util.zepto",function($){...})的方式。如果行不通,请在加载milo.js之前，手动加载Milo目录中的zepto：；
<script src="//ossweb-img.qq.com/images/js/mobile_bundle/util/zepto.js"></script>
[移动端登录]代码示例
[warning] 注意
- 登录前的容器ID名为
unlogin、登录后的容器ID名logined，登录后的用户信息ID名userinfo不可修改；- 登录功能需要在qq.com域名下才能正常使用，注意为登录后用户信息显示预留足够的位置。
<body>
<!-- 登录信息 -->
<div id="ams_loginbar">
<div id="unlogin">
你好，请<a id="ptLoginBtn" href="javascript:;" style="cursor: pointer;">[QQ登录]</a>
<a id="wxloginBtn" href="javascript:void(0);">[微信登录]</a>
</div>
<div id="logined" style="display: none;">
<span>欢迎您，</span>
<span id="userinfo">1079682165</span>
【<a id="ptLogoutBtn" href="javascript:;" style="cursor: pointer;">注销</a>】
</div>
</div>
<script src="//ossweb-img.qq.com/images/js/mobile_bundle/milo.js"></script>
<script>
milo.ready(function () {
need("biz.login", function (LoginManager) {
LoginManager.init({
appConfig: {
"avoidConflict":"false",//默认值为空，判断是否需要校验微信登录态串号，设为true，为必须校验，设为false，为不校验，默认值""表示在微信环境下校验，其它app环境下不校验
"QQBrowserAppId": "xxx", //在QQ浏览器端申请的APPID，联系内部同学
"WxAppId" : "xxxxxxxxxxx", //需要在微信申请openLink权限，联系内部同学
"AppName" : "业务的中文名称", //业务的中文名称
"scope" : "snsapi_base", //默认是 snsapi_base 静默授权，如果游戏无静默权限，就需要手动改成 snsapi_userinfo
"LogoUrl" : "//ossweb-img.qq.com/images/feiji/web201507/logo.png" //业务在授权时需要显示的正方形标准Logo，图片要求：尺寸：100x100px
}
});
//QQ登录
milo.addEvent(g('ptLoginBtn'), 'click', function (e) {
LoginManager.login();
});
//微信登录
milo.addEvent(g('wxloginBtn'), 'click', function (e) {
LoginManager.loginByWX();
});
//检查登录态
LoginManager.checkLogin(function(userInfo){
console.log("已登录");
console.log("登录信息：",userInfo);
},function(){
console.log("未登录");
});
//注销
milo.addEvent(g("ptLogoutBtn"),"click",function(){
LoginManager.logout(
{
logoutCallback:function(){
alert("已注销");
}
}
);
})
});
});
</script>
</body>
效果演示：DEMO