做有态度的前端团队

网易FEG前端团队

如何提高微信授权页面制作效率

前言

刚接触微信授权页面的时候,感觉很麻烦,之前苏苏也总结了一篇文档 【移动端网站微信授权的处理方法】,看完之后对整个授权过程有了大致的了解,但是总感觉还是很麻烦,比如:

  • 页面需要放到game域名(game.163.com)下(因为只有game域名是已经配置好授权回调的),第一,测试环境(text.nie.163.com)下无法授权成功,请点击测试demo;第二,所有这种页面都放在,慢慢多了就不好找了。
    QQ截图20160129093439.png

  • 每个项目都需要建立index.html和app.html页面,然后index.html只是完成授权的操作,然后每次都要修改里面的type值(是否需要获取用户的详细信息,因为如果只需要id,是不需要出现那个授权确定界面的)、跳转链接等等信息

总的来说,这种方式的处理不好上手,新手看到都胆怯了,总感觉很高深,很麻烦。有没有更简单的处理流程来解决呢?本文介绍另一种通用方式,这种方式杭州的童鞋已经在使用的了,我只是总结分享出来,尝试提高新童鞋在这类页面的制作效率。

分析授权流程

授权页面的用意是通过微信授权,取得用户信息,整个流程可以简化如下:

  • 用户打开页面,首先去授权,我们把授权代码(代码下面会讲到)在index.html
  • 授权成功后,取得微信的code值,跳去指定的某个页面
  • 在跳转后的页面有个微信登录的接口,该接口接受微信的code值,返回拿到的用户信息,比如头像、昵称等
  • 然后拿到用户信息展示在页面

整个授权的过程就算完成了。在整个流程中,里面提到两个重要信息:

1、授权代码是什么

授权代码就是微信提供给开发者使用的一个授权地址,地址如下:

https://open.weixin.qq.com/connect/oauth2/authorize?appid=&redirect_uri=&response_type=code&scope=

它包含三个主要参数:
appid: 微信公众号id(我们现在使用的是 网易游戏玩家俱乐部 的appid)
redirect_uri:授权成功后,跳转的地址
scope:授权类型,分别是snsapi_userinfo(该类型代码详细信息授权,返回用户的所有详细信息,包括微信id,昵称,头像,性别,城市,国家等。会弹出绿色的授权提示框,让用户确认授权)和snsapi_base(该类型代表基础授权,只返回微信id,授权过程不会出现用户确认界面)

2、授权域名是什么

授权域名是指在微信公众号绑定的某个授权域名,而这个域名是和上面的appid是一致的,也只有一致了才会授权成功。而我们使用的 网易游戏玩家俱乐部 微信公众号绑定的授权域名就是 game.163.com。另外写有上面授权代码的页面需要放到授权域名下才可以,而授权跳转后的页面可以放在任何域名下,不需要放在授权域名下(这个是本文提供方法的重点)

新的制作方式

说了那么多,终于到正文了~
首先,根据上面的分析,我们知道授权代码其实是一致通用的,只是参数不一样,而且都是要放到授权域名下,所以根据这个特点,我们可以搞一个公用的授权页面 authorize.html,而这个页面现在已经有了,后续项目可以直接使用,地址是:
http://game.163.com/******/authorize.html
如何使用:

/***
@appid: 默认使用网易游戏玩家俱乐部的appId,所以可以不传
@scope: 授权类型:snsapi_userinfo/snsapi_base
@final_uri: 授权成功后,跳转的地址,一般是当前页面地址
***/

var rURL = 'http://game.163.com/***/authorize.html?scope=snsapi_userinfo&final_uri='+encodeURIComponent(location.origin + location.pathname);

如果想研究下authorize页面的代码,请移步点击打开git

授权成功后,跳转回来,我们需要把传回来的code值去请求登录接口,获取用户信息:

/***
@url:微信授权登陆接口,这个需要平台提供,目前貌似是跟产品的,不知是否用公用的
@code:授权成功后传回来的code值
@need_userinfo:是否获取用户详细信息,需要和上面授权类型一致,但是传的值不一样,下面的例子 1 代码是snsapi_userinfo类型
(可能还有其他参数,不同接口根据实际情况)

***/

$.ajax({
    type: "get",
    url: 'http://wx-share.webapp.163.com/ma21/weixin_login',//微信授权登陆接口
    dataType: "jsonp",
    data : {
        'code' : code,
        'need_userinfo':1
    },
    success: function(json) {
        if(json.success){
            alert('微信授权成功,你的昵称是:'+json.nickname);
            userImg = json.headimgurl;//拿到用户头像

            PageInit();//授权成功后,页面主js的入口
        }else{
            location.href = rURL;
        }
    },
    error: function() {
        alert('网络错误请刷新重试!!')
    }
});

所以最终的js代码是:

nie.define('Authorize',function(){
    var userImg = '',
        rURL = 'http://game.163.com/****/authorize.html?scope=snsapi_userinfo&final_uri='+encodeURIComponent(location.origin + location.pathname),
        GetQueryString = function(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");
            var r = window.location.search.substr(1).match(reg);
            if (r!=null) return (r[2]); return null;
        },
        code = GetQueryString('code'),
        init = function(){
            if(code){
                $.ajax({
                    type: "get",
                    url: 'http://wx-share.webapp.163.com/***/weixin_login',//微信授权登陆接口
                    dataType: "jsonp",
                    data : {
                        'code' : code,
                        'need_userinfo':1
                    },
                    success: function(json) {
                        if(json.success){
                            alert('微信授权成功,你的昵称是:'+json.nickname);
                            userImg = json.headimgurl;//拿到用户头像

                            PageInit();//授权成功后,页面主js的入口
                        }else{
                            location.href = rURL;
                        }
                    },
                    error: function() {
                        alert('网络错误请刷新重试!!')
                    }
                });
            }else{
                location.href = rURL;
            }
        };
    init();//初始化

})

请戳这里测试demo
QQ截图20160129093625.png

测试结果如下:
测试成功demo

后语

最后再来一句:
以后遇到微信授权的页面,我们整个流程就变得简单清晰了,只需要在主js里面加上上面授权跳转和请求登录接口获取用户信息的代码即可,其它做法和普通项目一样,我们不需要再专门建一个授权页面不再需要说这种项目一定要放game.163.com域名下(当然,如果需求本身就需要放到这里,那就没得说了)。

本文的测试demo源码地址(里面的index.html是旧的方式,index2.html是本文说方式)

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