小程序:授权登录流程

1、当用户进入小程序时,我们先判断用户是否授权小程序

javascript 复制代码
wx.getSetting({(查看是否授权)
    success:res=>{//调用成功的回调函数	
        if (res.authSetting['scope.userInfo']) {
            // 有值时,代表已授权
        } else{
           //没有授权
        }
    }
})

2、没有授权,我们要通过按钮授权

在微信小程序开发文档中,我们可以知道当button组件的open-type="getUserInfo" 并结合bindgetuserinfo事件,可以获取到用户信息(是否授权)

javascript 复制代码
<button open-type="getUserInfo" bindgetuserinfo="getuserinfo">授权</button>

3、通过bindgetuserinfo事件,我们可以获取到个人的信息、加密偏移数据、加密用户信息(e.detail获取)

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

4、用户可以授权登录,也可以取消授权

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

// 2、取消授权:显示模态框
wx.showModal({
    title: '提示',
    content: '请先授权之后再进入',
    showCancel: false,
    confirmText: '返回授权',
    success: function (res) {
        // 用户没有授权成功,不需要改变 isHide 的值
        if (res.confirm) {
            console.log('用户点击了"返回授权"');
        }
    }
})

5、根据登录接口返回的code码,判断用户是否时新用户

javascript 复制代码
//根据登录返回的code码,我们在需要注册的里面,请求注册接口,并配置好参数、请求方式等
//例如:登录接口code码返回10000时,代表未注册,返回0时,代表注册过
if (data.code == 10000) {
     //注册请求接口
 } else if (data.code == 0) {
    wx.setStorage({//保存token
        data: token,
        key: 'token'
    })
 }

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

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

8、当token存在时,我们直接执行逻辑代码

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

相关推荐
QT.qtqtqtqtqt24 分钟前
uni-app小程序前端开发笔记(更新中)
前端·笔记·小程序·uni-app
CHU7290352 小时前
直播商城APP前端功能全景解析:打造沉浸式互动购物新体验
java·前端·小程序
黑客老李12 小时前
web渗透实战 | js.map文件泄露导致的通杀漏洞
安全·web安全·小程序·黑客入门·渗透测试实战
游戏开发爱好者81 天前
日常开发与测试的 App 测试方法、查看设备状态、实时日志、应用数据
android·ios·小程序·https·uni-app·iphone·webview
2501_915106321 天前
app 上架过程,安装包准备、证书与描述文件管理、安装测试、上传
android·ios·小程序·https·uni-app·iphone·webview
2501_915106321 天前
使用 Sniffmaster TCP 抓包和 Wireshark 网络分析
网络协议·tcp/ip·ios·小程序·uni-app·wireshark·iphone
宠友信息1 天前
2025社交+IM及时通讯社区APP仿小红书小程序
java·spring boot·小程序·uni-app·web app
光影少年2 天前
AIGC + Taro / 小程序
小程序·aigc·taro
2501_915918412 天前
在 iOS 环境下查看 App 详细信息与文件目录
android·ios·小程序·https·uni-app·iphone·webview
2501_916007472 天前
没有 Mac 用户如何上架 App Store,IPA生成、证书与描述文件管理、跨平台上传
android·macos·ios·小程序·uni-app·iphone·webview