前言

在uniapp中小程序登录这一块上,关于如何登录授权,获取openid,存储用户信息,网上虽然有很多范例,但都讲的很乱,很容易就把人看晕了,这里简单总结下,真正使用时应该是按需使用。

openid

openid是微信小程序中由官方生成的每个账户对每个小程序唯一的一串字符,不管用户有没有授权,只要用户访问了小程序就可以获取openid,openid可以作为用户的身份识别id。获取方法是通过uni.login获取一个code,这个code每次刷新后都是不唯一的,需要利用这个code向微信官方接口换取openid。
uni.login:https://uniapp.dcloud.net.cn/api/plugins/login?id=login
openid换取接口:https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/login/auth.code2Session.html
要注意的是,用code换取openid时需要传递小程序appid和secret,所以这个请求过程建议在后台而非前端进行,比如在云函数中请求:

'use strict';
exports.main = async (event, context) => {
    const appid = '小程序后台查看'
    const secret = '小程序后台查看'
    const js_code = event.code
    const grant_type = 'authorization_code'
    const url = 'https://api.weixin.qq.com/sns/jscode2session'
    const res = await uniCloud.httpclient.request(url, {
        data: {
            appid,
            secret,
            js_code,
            grant_type
        },
        dataType: 'json'
    })
    return res
};

授权登陆

我这里授权登录指的是弹出那个获取昵称和头像的授权框,准确的说只是授权,登录是上面的login,但很多小程序都把这个按钮叫做登陆按钮,也就混为一谈了。由于微信小程序政策的变化,好像现在只能通过用户点击按钮进行主动登录,通过设置button按钮的open-type属性即可弹出授权框,触发@getuserinfo事件可以获取用户信息,网上这里案例很多。
详见:https://uniapp.dcloud.net.cn/component/button

获取用户信息

除了在用户授权时获取用户信息,如果用户没有登出或清除授权信息,用户是已知保持登陆状态的,可以主动通过uni.getUserInfo来获取用户信息用于判断用户是否登录或者其他用途。
详见:https://uniapp.dcloud.net.cn/api/plugins/login?id=getuserinfo

获取平台信息

uniapp还有一个uni.getProvider方法用来获取服务供应商信息,其实就是检测当前是小程序还是app什么的,只有在程序跨端时才会用到,因为我们前面的方法在使用时需要传入一个provider信息,该信息就可以通过本方法来获取。
详见:https://uniapp.dcloud.net.cn/api/plugins/provider?id=getprovider

存储用户信息

货去了用户的openid或者其他信息后就需要在数据存到缓存中,这样下次用户就不用重复登录,程序也不用重复获取信息了,不论你是把信息存到全局变量还是vuex中,用户刷新后这些信息都会重置,真正应该存到的应该是本地,用到的方法是uni.setStorageSync,与之对应的读取缓存信息的方法是uni.getStorage
详见:https://uniapp.dcloud.net.cn/api/storage/storage?id=setstoragesync

最后修改:2021 年 01 月 13 日
你的赞赏是我前进的动力