uni-app微信小程序授权登录详解(带注释)

授权目的:1获取用户信息,2部分接口需要用户同意授权才可以调用。

方式:使用 button 组件,并将 open-type 指定为 getUserInfo 类型,获取用户基本信息。(还有一种open-type为getPhoneNumber可以获取用户手机号码,但是此方法需要用户授权两次,因为此方法只能获取用户电话号码,你如果需要获取用户头像和名称需要调用getUserInfo,这就导致用户会有2次授权的操作个人觉得体验不是很好,因此解决办法就是只获取用户头像和名称,手机号在用户登录后需要去修改资料页面自己填写,当然不填写也不影响对小程序的浏览,只是部分功能需要手机号而已.) 以上方式在每次做开发都会给客户说明并让其选择,所以这个问题不是大问题就不细说,如果有大佬能指教一二,不胜感激!

此处演示仅为button按钮的open-type为getUserInfo

特别说明::获取登录临时code

一 引导用户进行授权

引导用户进行授权,声明按钮并将open-type指定为getUserInfo

二 同意授权进入回调

当用户点击按钮后会进入getUserInfo的回调,回调携带参数 到这里就进入到关键了,不管用户点击同意授权还是拒绝授权都会进入到这个回调中。因此你需要获取用户设置来验证是否同意授权。

三 获取用户设置

如果用户已经授权返回true 反之没授权返回false。接下来就是同意授权的操作了,同意授权将你服务器需要的参数进行组装访问接口即可,将返回的数据保存本地,或者全局变量中,来确保登录状态。接下来附上全部代码.

这里面用到了登录成功后利用vuex全局保存登录状态,下篇文章就会说到全局保存的方式方法以及详解。

如代码有问题或错误,请在留言中指出问题,在此我先谢过了!

经验分享 程序员 微信小程序 职场和发展