uniapp 小程序授权登录

（1）小程序端调用 wx.login方法获取用户登录凭证code，将code发送给小程序后台服务器;服务器调用登录凭证校验接口（需要传参appid+appsecret+code）,进而换取用户登录态信息，包括用户的唯一标识（openid）及本次登录的会话密钥（session_key）等，将这些信息存入缓存中。
（2）点击button按钮触发获取微信手机号弹框!
（3）绑定微信账号，存在相应手机号账号时自动登录；不存在时自动创建

具体代码如下：

<template><view class="longinelse-btns"><!-- #ifdef MP-WEIXIN --><button class="longinelse-btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber"@click="getUserInfo()"><image src="../../static/login/wx.png" class="_img"></image></button><!-- #endif --><button class="longinelse-btn" @click="open"><image src="../../static/login/wb.png" class="_img"></image></button><button class="longinelse-btn" @click="open"><image src="../../static/login/qq.png" class="_img"></image></button></view>
</template>
export default {data() {return {openid: null,session_key: null,hkey_code: null,nickName: null,gender: '男',}},methods: {// #ifdef MP-WEIXIN// 获取用户信息getUserInfo() {uni.getUserProfile({desc: '登录xxx',success: (res) => {console.log(res);this.nickName = res.userInfo.nickName;this.gender = res.userInfo.gender == 0 ? '男' : '女';},fail: (err) => {console.log(err);}});},//#endif// #ifdef MP-WEIXIN//  ========================微信授权相关==========================/*** 尝试进行微信授权登录，成功后跳转到下一页* @param {String} _code [in] 微信授权代码*/tryLoginWx(_code) {utils.api.sso.wx.login.call(null, {code: _code}).then((_res) => {console.log("utils.api.sso.wx.login", _res)this.openid = _res.data.wx.openid;this.session_key = _res.data.wx.session_key;this.hkey_code = _res.data.hkey_code;if (!_res.data.user) {utils.local.ls.token.value = _res.data.user.token;//utils.local.ls.userName.value = this.account;uni.switchTab({url: "/pages/function",});}}).catch(utils.api.sso.wx.login.doCatch)},onGetPhoneNumber(e) {console.log("onGetPhoneNumber", e);if (e.detail.errMsg == "getPhoneNumber:fail user deny") { //用户决绝授权console.log("用户决绝授权")return;} else {console.log("允许授权")//获取手机号，查询是否有相应的用户utils.api.sso.wx.getphone.call(null, {key: this.session_key,v: e.detail.iv,data: e.detail.encryptedData}).then((_res) => {console.log("utils.api.sso.wx.getphone", _res);this.bindLoginWx(_res.data.phoneNumber);}).catch(utils.api.sso.wx.getphone.doCatch)}},/*** 绑定微信账号，存在相应手机号账号时自动登录；不存在时自动创建* @param {Object} _phone*/bindLoginWx(_phone) {utils.api.sso.wx.bindLogin.call(null, {code: this.hkey_code,openid: this.openid,phone: _phone,login: true}).then((_res) => {console.log("utils.api.sso.wx.bindLogin", _res)if (_res.data) {utils.local.ls.token.value = _res.data.token;utils.local.ls.userName.value = _phone;uni.switchTab({url: "/pages/function",});} else {this.newUser(_phone);}}).catch(utils.api.sso.wx.bindLogin.doCatch)},
},onLoad() {//获取code信息uni.login({provider: 'weixin',success: (loginRes) => {var code = loginRes.codeconsole.log("获取信息", code)this.tryLoginWx(code);}});}
}
//#endif

uniapp 小程序授权登录相关推荐

【uniapp小程序授权登录】
uniapp微信小程序授权登录具体流程打开小程序公众平台,申请小程序appid hbuilderx创建项目并打开项目,点击manifest.json->点击小程序配置->配置小程序app ...
uniapp微信小程序授权登录和获取微信绑定的手机号码
uniapp微信小程序授权登录和获取微信绑定的手机号码弹出授权的弹框 <view class="weixinOk" @tap="getUserProfile&qu ...
基于Uniapp+SpringBoot实现微信小程序授权登录
手把手教你做微信小程序授权登录交互一.uni.login请求临时code 二.uni.request向后台交换数据三.源代码前台:在GetUserInfo中添加接口后台:SpringBoot后 ...
SpringBoot微信小程序授权登录
SpringBoot微信小程序授权登录一.appId 1.1.自己是管理者:微信公众平台,申请或登录自己的微信小程序,在开发者管理中即可看到 2.2.自己是开发者:让管理员将自己加入到小程序开发者管 ...
微信小程序授权登录三种实现方式
方式一:小程序授权登录通过wx.login获取临时登录凭证code,向后端换取token. 可以做到无感登录. 时序图: 说明: 1.客户端调用 wx.login() 获取临时登录凭证code, ...
小程序授权登录的体验优化
小程序授权登录的体验优化大多数小程序的登录,都是这样设计的: 进来就提示你需要授权,有部分人可能就会点"拒绝"(拒绝的比例可能超出我们的预估) 然后在后续操作的时候,就进行不下去 ...
微信小程序授权登录组件的封装
微信小程序授权登录组件的封装新建components文件写wxml文件 wxss部分 js部分 json引用页面使用页面js 授权登录流程如下: 因为多个页面功能需要登录状态所以做了个组 ...
提高微信小程序的应用速度的常见方式有哪些? 小程序怎么实现下拉刷新? 简述微信小程序原理？小程序的发布流程（开发流程）分析下微信小程序的优劣势？小程序授权登录流程？小程序支付如何实现
小程序部分常见面试题提高微信小程序的应用速度的常见方式有哪些? 提高页面加载速度用户行为预测减少默认data的大小组件化方案分包预下载小程序与原生App相比优缺点? 优点: 基于微信平台开 ...
基于Thinkphp5+EasyWeChat+fastadmin微信小程序授权登录获取手机号微信公众号网页---联合授权登录
战前准备 1.使用 composer 安装 EasyWeChat $ composer require overtrue/wechat:~4.0 -vvv 或者在composer.json文件renq ...

uniapp 小程序授权登录

uniapp 小程序授权登录相关推荐

最新文章

热门文章