网站服务部小组文档

移动端网站易信授权的处理方法

目的

众所周知，人们的生活越来越离不开易信。分享到易信朋友圈是目前公司移动端项目推广与传播的主要途径之一。所以急需让每个移动端开发人员熟悉易信授权的整个开发流程。

易信授权简介

如果用户在易信中（Web易信除外）访问公众号的第三方网页，公众号开发者可以通过此接口获取当前用户基本信息（包括昵称、头像、性别、城市、国家）。利用用户信息，可以实现体验优化、用户来源统计等功能。

易信授权与微信授权的区别

拥有一个易信公众账号，并获取到appid、secret（公众号开通并开启开发者模式后可在后台看到这两个参数）--平台同事需要做的。

提供跳转域名（redirect_uri），该回调地址必须和开发者模式所填的url在同一域名下，若开发者模式填的是IP地址，此处也必须是这个IP地址。--前端同事需要做的（简单地说，就是前端开发过程中，当前的URL要跟redirect_uri同域。如果你当前的URL是http://127.0.0.1/index.html 那么回调地址redirect_uri也必须是http://127.0.0.1 开头的一个URL。这样大家就明白跟微信授权的区别了，微信必须在有申请微信授权的nie域名下运行。而易信授权只需要当前域和重定向域相同即可运行。方便我们直接在本地或test.nie下面测试）

目前易信网页授权中应用授权作用域“scope”参数限定为snsapi_base。因此，易信网页授权是静默授权，用户无感知。（也就是说不会弹出授权框框，偷偷地就授权获取用户信息了） 而微信授权的“scope”参数有snsapi_userinfo（弹出授权页面，可通过openid拿到昵称、性别、所在地。并且，即使在未关注的情况下，只要用户授权，也能获取其信息）和snsapi_base（不弹出授权页面，直接跳转，只能获取用户微信id）

总之，易信授权更加简单！

项目开发流程

第一步：获取code

将index.html和app.html页面放于与redirect_uri同域名下。

index.html

跟微信授权不同，易信授权进来，我们不需要判断是要拿用户的微信id还是拿用户的详细信息。一进来就直接跑以下格式的链接（要严格按照格式来）： http://open.plus.yixin.im/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#yixin_redirect

参数解释：

appid：易信公众号ID 如 6481fb6680ca467fae626396b7652185-该参数必须

redirect_uri:重定向地址，需要和当前页面域名同域（且redirect_uri不支持携带自定义参数）-该参数必须

response_type:code 要响应的东西-该参数必须

scope:应用授权作用域，固定参数snsapi_base-该参数必须

state:重定向后会带上state参数，根据项目实际情况可带上任意参数-该参数非必须

<!DOCTYPE HTML>
<html>
<head>
<title>梦幻树洞-可匿名吐槽社区</title>
<meta name="keywords" content="梦幻西游,树洞,倾述,八卦,匿名" />
<meta name="description" content="梦幻西游玩家二次元吐槽地，看看同服小伙伴们在讨论什么吧，可匿名放心吐。" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta charset="gb2312">
<meta name="front-end technicist" content="suqiuhong">
<link rel="dns-prefetch" href="http://res.nie.netease.com">
<link type="text/css" rel="stylesheet" href="css/index.less" media="all" />
<script charset="gb2312" src="http://res.nie.netease.com/comm/js/jquery(mixNIE).last.js"></script>
</head>
<body>
<section class="main">
  <section id="tips">这是一个穿越页面，当你看到这个页面的时候请耐心等待。</section>
</section>
<script>
//请求超过6秒钟，显示提示信息
setTimeout(function(){
  document.getElementById('tips').style.display='block';
}, 6000);

var toLink = '';
//game.163.com正式地址
toLink="http://open.plus.yixin.im/connect/oauth2/authorize?appid=6481fb6680ca467fae626396b7652185&redirect_uri=http%3A%2F%2Fgame.163.com%2Fyixin%2Fxxxx%2Fapp.html&response_type=code&scope=snsapi_base&state=163#yixin_redirect";
//xxxx替换为你的目录名称。如game/yixin/xxxx/app.html



//test.nie.163.com测试地址
  /*toLink="http://open.plus.yixin.im/connect/oauth2/authorize?appid=6481fb6680ca467fae626396b7652185&redirect_uri=http%3A%2F%2Ftest.nie.163.com%2Ftest11%2Fxxxx%2Fapp.html&response_type=code&scope=snsapi_base&state=163#yixin_redirect";*/

//xxxx替换为你的目录名称。如test/test11/xxxx/app.html

setTimeout(function(){
  window.location.href=toLink;
}, 200);    
</script>
</body>
</html>

app.html

是主要的内容页，其中依赖的app.js就是主程序了。

<!DOCTYPE HTML>
<html>
<head>
<title>梦幻树洞-可匿名吐槽社区</title>
<meta name="keywords" content="梦幻西游,树洞,倾述,八卦,匿名" />
<meta name="description" content="梦幻西游玩家二次元吐槽地，看看同服小伙伴们在讨论什么吧，可匿名放心吐。" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta charset="gb2312">
<meta name="front-end technicist" content="suqiuhong">
<link rel="dns-prefetch" href="http://res.nie.netease.com">
<link type="text/css" rel="stylesheet" href="css/app.less?v=0" media="all" />
</head>
<body>
  <p class="loading" id="loading">正在获取数据...</p>
<section class="main">
  <p class="alert">检测到您的易信号暂未与树洞账号绑定</p>
  <p class="btnwrap">
    <a href="javascript:void(0);" class="btn" id="no-bind">不绑定，直接登录</a>
    <a href="javascript:void(0);" class="btn" id="bind">我要绑定</a>
  </p>
  <p class="tips color">Tips：绑定之后，在易信公众号无需登录可直接进入树洞。</p>
</section>
<script charset="gb2312" src="http://res.nie.netease.com/comm/js/jquery(mixNIE).last.js"></script>
<script charset="gb2312" type="text/javascript" src="js/app/app.js"></script>
</body>
</html>

第二步：书写主程序app.js

这一步跟《移动端网站微信授权的处理方法》中的第三步是一样，下面简单写一个登录接口

注：以下接口只是案列，不是通用的，不同的项目要请平台开发相应的接口！

登录接口

/**
 * 梦幻西游公众号-树洞账号绑定-易信号与树洞账号绑定
 * @author gzsuqiuhong
 * @update 20150520
 */
var rootUrl = "http://xxx.webapp.163.com/";
var user = {
  token: '',
  user_id: null,
  id: 0,
  nickname: '',
  headimgurl: ''
};
var pageCtrl = {
  params: function(u, p) {
    var m = new RegExp("(?:&|/?)" + p + "=([^&$]+)").exec(u);
    return m ? m[1] : '';
  },
  dataMsg: function(data) {
    alert(data.msg);
  },
  yixin_valid: function() {
    //用户code
    var code = me.params(location.search, "code");
    //location.href = 'indexcode.html?code=' + code;
    $.ajax({
      url: rootUrl + "user/yixin_valid",
      data: {
        'code': code
      },
      async: false,
      dataType: "jsonp",
      success: function(data) {
        if (data.success) {
          user.token = data.token;
          user.user_id = data.user_id;
          user.id = data.id;
        } else {
          //code失效处理，重新跳转到index.html，重新获取新的code
          if (data.msg == 'invalid code' || data.msg == '\u767b\u5f55\u5931\u8d25') {
            window.location.href = "index.html?_t=" + Math.random();
            return;
          }
          me.dataMsg(data);
          window.location.href = "index.html?_t=" + Math.random();
        }
      },
      error: function() {
        alert('网络信号不好，请刷新再试');
      }
    });
  },
  init: function() {
    me = this;
    me.yixin_valid();
  }
};
//页面初始化
pageCtrl.init();

第四步：调试代码

易信授权项目只需要 当前域名和重定向域名 在同一个即可，跟平常的移动端项目调试方法一致，可放在test.nie下面调试。 移动端调试方法： http://res.nie.netease.com/comm/doc/tools/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E8%B0%83%E8%AF%95%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E.html

参与过易信授权项目的平台人员：赵广銮 gzzhaoguangluan@corp.netease.com

反馈与建议

POPO：gzsuqiuhong@corp.netease.com

感谢阅读