微信小程序登录授权步骤

微信小程序的登录逻辑

先来一张微信登录的流程图：

具体操作步骤：

1，首先用户打开小程序，进入之后通过 wx.getSetting 判断是否有授权过

wx.getSetting({//wx.getSetting方法获取用户的当前设置（查看是否授权）
sucsess:res=>{//调用成功的回调函数
if (res.authSetting[‘scope.userInfo’]) {//如果res.authSetting[‘scope.userInfo’]有值时，代表已授权
}else{//否则就是没有授权
}
}
})

2，如果没有授权，我们通过一个按钮来实现授权登录

开发文档button组件地址
https://developers.weixin.qq.com/miniprogram/dev/component/button.html

3，通过按钮绑定的bindgetuserinfo事件，我们可以获取到个人的信息、加密偏移数据、加密用户信息（e.detail获取）

getuserinfo(e){
console.log(e.detail);//可以获取到个人的信息、加密偏移数据、加密用户信息
}

4，这时点击授权按钮，弹出授权提示框，用户可以授权，也可以取消授权

1），一种情况，用户点了取消授权

//当用户取消授权时，我们可以做一个提示
wx.showModal({//显示模态框
title: ‘警告’,
content: ‘您点击了拒绝授权，将无法进入小程序，请授权之后再进入!!!’,
showCancel: false,
confirmText: ‘返回授权’,
success: function (res) {
// 用户没有授权成功，不需要改变 isHide 的值
if (res.confirm) {
console.log(‘用户点击了“返回授权”’);
}
}
})

2），另一种情况，用户点了授权，然后通过wx.login操作

wx.login({//登录
success: (res) => {//成功的回调
// console.log(res.code);//获取临时登录凭证code
if (res.code) {//当有临时登录凭证code码时，我们请求登录接口
//请求登录接口
}
}
})

5，根据获取的code和登录接口传过来的code码，判断用户是否时新用户

1），一种情况，如果不是新用户，我们就直接保存下token（服务器返回的token）

2），另一种情况，如果是新用户，我们就要先注册，在登录

6，当用户注册成功后，在调登录接口，保存token。在有些页面需要使用token

注意：

在步骤1中，当我们授权过时，我们要看token是否存在

当token存在时，我们直接执行逻辑代码

当token不存在时，我们就需要登录，登录后判断返回的code码，在根据code码判断用户是否是新用户。最后保存token

操作完成！！！