微信小程序登录笔记

原创
2018/08/29 16:26
阅读数 971

登录流程

从 2018/4/30 开始,使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持,(因为Facebook用户隐私泄密事件引发的社会关注),想获取用户隐私信息必须要友好!,现在的方式是

  1. 使用 button 组件,并将 open-type 指定为 getUserInfo 类型,获取用户基本信息。引导用户点击按钮
  2. 用户点击按钮后使用绑定的bindgetuserinfo事件处理函数调用wx.login方法获取code
  3. 使用获取的code到后台换取openId, sessionKey, unionId,http.post('/user_we_mini/login',{ app_id: app_id, code: code })
  4. 调用wx.getUserInfo方法获取用户微信信息
  5. 使用获得的微信信息去自己服务器更新用户信息http.post('/user_we_mini/info',userInfo)

第三步中使用code到后台获取openId的接口是https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code,在后台使用http的get请求去微信服务器获取openId,这个openId就是客户身份id,可以存到数据库,根据第四步获取的微信用户信息在第五步使用openId来更新这个客户信息

登录按钮pages/index.wpy

我使用的是wapy,登录按钮放在index.wpy页

<button class="weui-btn" type="primary" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>

当用户点击这个按钮时,触发bindGetUserInfo方法

methods = {
    //用户点击授权登录
    bindGetUserInfo(e) {
        this.$parent.getSession(function(userInfo) {
            console.log(userInfo) 
        });
    }
}

登录处理app.wpy

登录处理全放到了app.wpy页面

<style lang="less">
@import "./style/weui.less";
</style>

<script>
import wepy from "wepy";
import "wepy-async-function";
import http from './utils/http';

export default class extends wepy.app {
    config = {
        pages: [
            "pages/index", 
            "pages/recommend", 
            "pages/my",
            "pages/doctor",
        ],
        window: {
        backgroundTextStyle: "light",
        navigationBarBackgroundColor: "#fff",
        navigationBarTitleText: "WeChat",
        navigationBarTextStyle: "black"
        },
        tabBar: {
        list: [
            {
            pagePath: "pages/index",
            text: "首页",
            iconPath: "images/icon_home.png",
            selectedIconPath: "images/icon_home_active.png"
            },
            {
            pagePath: "pages/recommend",
            text: "我要推荐",
            iconPath: "images/icon_classify.png",
            selectedIconPath: "images/icon_classify_active.png"
            },
            {
            pagePath: "pages/my",
            text: "我的",
            iconPath: "images/icon_info.png",
            selectedIconPath: "images/icon_info_active.png"
            }
        ]
        }
    };

    //全局变量
    globalData = {
        Authorization: null,
        userInfo: null
    };

    //配置
    cfg = {
        app_id: "your appid",
        host: "http://192.168.1.91:8099",
        serverHost: "http://192.168.1.91:8099/v1/api"    
    };

    constructor() {
        super();
        this.use('requestfix'); //修复微信原生同时发送多个请求可能会出现错误的bug
        this.use('promisify'); //引入promise
            
        //全局拦截器
        this.intercept('request', {
            config (p) {
                let Authorization = wepy.getStorageSync('Authorization');
                if (Authorization){
                    p.header['Authorization'] =  Authorization;
                }
                return p;
            },
            success (response) {
                if(response.data.status==0){
                    return response.data;
                }else if(response.statusCode=='404'){
                    wepy.showToast({title:'404 请求页面不存在'})
                }
                return response;
            },
            fail (response) {
                wepy.showModal({
                    title: '提示',
                    content: `服务器错误,请稍候再试! ${response.errMsg}`
                })       
                return response;
            }
        });
    }

    //登录流程
    async login() {
        let cfg = this.cfg;
        wepy.setStorageSync('cfg', cfg);
        wepy.setStorageSync('Authorization',null);

        //获取code
        try {
            var login = await wepy.login();
        } catch (error) {
            return {errMsg:'微信登录失败',data:error};
        }

        //用code 到后台换取 openId, sessionKey, unionId
        try {
            var res = await http.post('/user_we_mini/login',{ app_id: cfg.app_id, code: login.code })
        } catch (error) {
            return {errMsg:'登录失败',data:error};
        }
        wepy.setStorageSync('Authorization',res.data.Authorization);
        this.globalData.Authorization = res.data.Authorization;
        
        //获取微信用户信息
        try {
            var userInfo = await wepy.getUserInfo();
        } catch (error) {
            return {errMsg:'获取微信用户信息失败',data:error};
        }

        //使用微信用户信息更新后台用户信息
        try {
            var session = await http.post('/user_we_mini/info',userInfo)
        } catch (error) {
            return {errMsg:'更新用户信息失败',data:error};
        }
        
        return session.data
    }

    //获取登陆信息
    getSession(cb){
        if(this.globalData.userInfo){
            cb(this.globalData.userInfo);
            return;
        }
        this.login().then(res=>{
            if(res.errMsg){
                wx.showToast({title: res.errMsg});
            }else{
                cb(res)
            }            
        });
    }
  
}
</script>

utils/http.js

这里简单封装了下wepy.request方法,导出了两个方法get和post

import wepy from 'wepy';
const get = (url, data, header) => {
    header = header ? header : {};
    return Ajax(url, 'GET', data, header);
}

const post = (url, data, header) => {
    header = header ? header : {};
    header['Content-Type'] = 'application/x-www-form-urlencoded';
    return Ajax(url, 'POST', data, header);
}

const Ajax = (url, method, data, header) => {
    let cfg = wepy.getStorageSync('cfg');
    url = cfg.serverHost + url;
    header = header ? header : {};

    return new Promise((resolve,reject)=>{
        wepy.request({
            url: url,
            data: data,
            method: method,
            header: header
        }).then(res=>{
            if(res.status==0){
                resolve(res);
            }else{
                reject(res)
            }
        },error=>{  
            reject(error);
        })
    }) 
}

export default {
    get,
    post
}

参考资料

https://developers.weixin.qq.com/miniprogram/dev/api/api-login.html

https://tencent.github.io/wepy/document.html

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部