uniapp使用云函数中的插件uni-id实现微信小程序的登录

  • uni-id是官方为我们写好的插件,通过这个插件,我们只需要在前端写入相对应的数据就会在云函数中生成相应的数据,他里面是封装好的登录注册等接口(可以直接将用户的信息传递到云数据库中,并为我们做了一些验证的方法),我们只需要调用传值就可以了,可以说是很方便我们的使用,但是怎么使用呢?请继续往下看!
  • 首先我们自己的项目中要先创建一个云服务空间,并且关联上这个云服务空间,之后再官方的文档中有或者是去插件市场搜索uni-id,下载并导入到云服务空间及部署到我们的项目中,如果不会创建的话,请看我的另一篇,unicloud入门里面有讲解到。
image.png

image.png
  • 然后进入到插件市场中


    image.png

    image.png
  • 之后根据提示导入到你的项目中就可以了


    image.png
  • 为了方便你更好的理解,官方也有uni-id的项目,可以在创建一个项目进行查看


    image.png
  • 然后我们将下载的官方提供的案例下的云服务空间下的文件拷贝一下


    image.png
  • 将图中的两个文件复制到我们的云服务空间的文件夹下,然后进行上传部署及初始化云数据库,这里有兴趣的小伙伴可以打开user-center文件夹下的index.js进行查看源码,你就差不多明白了我们接下来的操作
  • 在这里演示下,微信小程序的登录并将数据上传到云数据库中
这是微信小程序中的点击按钮进行登录,获取用户的信息,方便我们后面获取用户的token
<button class="my-nav-title wx-title"  open-type="getUserInfo"
            @getuserinfo = "wx_user">未登入,点击登入</button>

wx_user(e){//点击获取用户信息
            var that = this;
                uni.showLoading({
                    title:'登录中...'
                })
                uni.login({
                    success(res) {
                        uniCloud.callFunction({
                            name:'user-center',
                            data:{
                                action: 'loginByWeixin',//这是我们云函数文件中的微信登录的值
                                params:{
                                    code:res.code//这是登录的code值
                                }
                            },
                            success:ret=>{
                                if(ret.result.code == 0){
                                    that.is_token = true;
                                    uni.hideLoading();
                                    that.img_url = e.detail.userInfo.avatarUrl;
                                    that.userName = e.detail.userInfo.userName;
                                    console.log(that.img_url);
                                    console.log(that.userName)
                                    uni.setStorageSync('user',e.detail.userInfo);
                                    uni.setStorageSync('token',ret.result.token);
                                    uni.setStorageSync('uni_id_token_expired',ret.result.tokenExpired);
                                }
                            },
                            fail:msg1=>{
                                that.is_token = false;
                                uni.hideLoading();
                                console.error(msg1);
                                uni.showModal({
                                    showCancel: false,
                                    content: '微信登录失败,请稍后再试'
                                })
                            }
                        })
                    },fail:msg=>{
                        that.is_token = false;
                        uni.hideLoading();
                        console.error(msg);
                        uni.showModal({
                            showCancel: false,
                            content: '微信登录失败,请稍后再试'
                        })
                    }
                })
                
            },
  • 好了,基本的uni-id云函数你学会了吗,想要了解更多的,你可以看看官方的文档中uni-id下的API,里面有好多方法,尽情的挖掘吧!

推荐阅读更多精彩内容