zoukankan      html  css  js  c++  java
  • 小程序开发,授权登录逻辑

    官方文档

    文档相关地址:

    用户登录 
    获取用户数据 
    用户数据的签名验证和加解密

    登录时序图.png

    微信两个api所拿到的信息:login和getUserInfo

    返回的信息.png

    注册/登录

    小程序端:

    通过上面wx.login和wx.getUserInfo两个api拿到相应的信息,并通过上方接口传给自己的服务器. 
    需要传输的信息有7个参数:

    appid  小程序唯一标识
    secret  小程序的 app secret
    js_code  //wx.login登录时获取的 code,用于后续获取session_key
    
    //下面两个参数用户服务器端签名校验用户信息的
    signature 使用 sha1( rawData + sessionkey ) 得到字符串,用于校验用户信息。
    rawData  不包括敏感信息的原始数据字符串,用于计算签名。
    
    //下面两个参数是用于解密获取openId和UnionId的
    encryptedData  包括敏感数据在内的完整用户信息的加密数据
    iv 加密算法的初始向量
    

    当然,可以精简为以下三个参数. 
    其余的签名校验的参数可省略,而appid和secret可以直接写在服务器.

    js_code //  wx.login登录时获取的 code,用于后续获取session_key
    encryptedData  包括敏感数据在内的完整用户信息的加密数据
    iv 加密算法的初始向量
    

    服务端处理逻辑

    相关的信息传输给服务器后,服务器

    1.先根据js_code去微信服务器拿到session_key 
    2.(此步可省略)使用 sha1( rawData + sessionkey )拿到字符串,判断与signature值是否相同,如果相同则用户信息无误,可进行下一步.如果不同,则说明用户信息被篡改或过期. 
    3.然后根据解密算法自行解密(输入参数为appId,sessionKey,encryptedData,iv,返回一个jsonObj),拿到openId和unionId等信息,执行服务器端的注册/登录操作. 
    4.注册/登录操作逻辑完成后,将我们服务器的sessionId(或其他token),以及用户信息返回给客户端.

    其中,服务器去获取session_key的请求为:

    (小写为固定写好的,大写为待替换的) 
    https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

    返回:

        //正常返回的JSON数据包
        {
              "openid": "OPENID",
              "session_key": "SESSIONKEY"
              "expires_in": 2592000
        }
        //错误时返回JSON数据包(示例为Code无效)
        {
            "errcode": 40029,
            "errmsg": "invalid code"
        }
    

    相关解密算法:

    https://mp.weixin.qq.com/debug/wxadoc/dev/api/signature.html

    注意:示例代码中有node,c++,php,python的,没有java的.

    需要服务器返回的信息:

    sessionId/token 登录状态标识
    userInfo: jsonObject,用户在我们平台上的信息,其内容与getPersonalInfo接口返回的相同.
    

    最后,将登录操作封装成方法,需要处调用即可

    //最终供外面调用的方法
    function login(){
        console.log('logining..........');
        //调用登录接口
        wx.login({
            success: function (e) {
                console.log('wxlogin successd........');
                var code = e.code;
                wx.getUserInfo({
                    success: function (res) {
                        console.log('wxgetUserInfo successd........');
                        var encryptedData = encodeURIComponent(res.encryptedData);
                        thirdLogin(code,encryptedData,res.iv);//调用服务器api
                    }
                })
            }
        });
    }
    
    function  thirdLogin(code,encryptedData,iv){
        var url = "eeee/xxx/login/ttttt";
        var params = new Object();
        params.code = code;
        params.encryptedData = encryptedData;
        params.iv =iv;
    
        buildRequest(new Object(),url,params,{
            onPre: function(page){},
            onSuccess:function (data){
                console.log('my  login successd........');
                console.log(data);
                getApp().globalData.session_id = data.session_id;
                getApp().globalData.uid = data.uid;
                getApp().globalData.isLogin = true;
            },
            onError : function(msgCanShow,code,hiddenMsg){
            }
        }).send();
    }
  • 相关阅读:
    Mac environment setting
    详解nginx.conf文件配置项(包括负载均衡)
    检查windows端口被占用
    linux下的环境变量
    利用MVC思想和php语言写网站的心得
    React学习:列表&&Key
    React学习:条件渲染
    事件处理
    state&生命周期
    react学习:组件&props
  • 原文地址:https://www.cnblogs.com/thinheader/p/9558187.html
Copyright © 2011-2022 走看看