提交 09bbee5f 编写于 作者: DCloud_JSON's avatar DCloud_JSON

1. 微信小程序端,新增:微信登陆成功后,弹出是否获取微信头像和昵称,完善个人资料的弹框 2....

1. 微信小程序端,新增:微信登陆成功后,弹出是否获取微信头像和昵称,完善个人资料的弹框 2. APP端,新增逻辑:微信登陆成功后,自动获取用户的微信昵称和头像完善用户个人资料 - 提示:因为微信的头像一旦更换,微信返回的头像url会失效。所以,以上两示例功能将url(客户端:下载到临时目录/服务端:转为Buffer)再上传到uniCloud云存储中再使用。
上级 001ce67b
## 1.0.43(2021-08-02)
1. 微信小程序端,新增:微信登陆成功后,弹出是否"获取微信头像和昵称,完善个人资料"的弹框
2. APP端,新增逻辑:微信登陆成功后,自动获取用户的微信昵称和头像完善用户个人资料
- 提示:因为微信的头像一旦更换,微信返回的头像url会失效。所以,以上两示例功能将url(客户端:下载到临时目录/服务端:转为Buffer)再上传到uniCloud云存储中再使用。
## 1.0.42(2021-07-29)
新增绑定手机号码页面前端校验
## 1.0.41(2021-07-27)
......
<template>
<view class="quick-login-box">
<view class="item" v-for="(item,index) in servicesList" :key="index"
@click="item.path?to(item.path):login_before(item.id,false)">
<image class="logo" :src="item.logo" mode="widthFix"></image>
<text class="login-title">{{item.text}}</text>
</view>
<template>
<view>
<view class="quick-login-box">
<view class="item" v-for="(item,index) in servicesList" :key="index"
@click="item.path?to(item.path):login_before(item.id,false)">
<image class="logo" :src="item.logo" mode="widthFix"></image>
<text class="login-title">{{item.text}}</text>
</view>
</view>
<!-- #ifdef MP-WEIXIN -->
<uni-user-profile @next="doUserProfileNext" ref="userProfile"></uni-user-profile>
<!-- #endif -->
</view>
</template>
<script>
......@@ -14,6 +19,8 @@
} from 'vuex';
//前一个窗口的页面地址。控制点击切换快捷登录方式是创建还是返回
import loginSuccess from '@/pages/ucenter/login-page/common/loginSuccess.js';
const db = uniCloud.database();
const usersTable = db.collection('uni-id-users')
export default {
computed: {
loginConfig() {
......@@ -106,10 +113,13 @@
//去掉配置中不存在的
servicesList = servicesList.filter(item => this.loginConfig.includes(item.id))
//处理一键登录
if(this.loginConfig.includes('univerify')){
if (this.loginConfig.includes('univerify')) {
this.univerifyStyle.privacyTerms.privacyItems = this.agreements
//设置一键登录功能底下的快捷登陆按钮
servicesList.forEach(({id,logo}) => {
servicesList.forEach(({
id,
logo
}) => {
if (id != 'univerify') {
this.univerifyStyle.buttons.list.push({
"iconPath": logo,
......@@ -120,14 +130,14 @@
}
//如果当前页面为默认登陆界面。当前第一优先级的“微信和苹果登陆”要隐藏,因为他已经被渲染在默认登陆界面顶部
if (
this.getRoute(1) == '/pages/ucenter/login-page/index/index' &&
['weixin','apple'].includes(this.loginConfig[0])
this.getRoute(1) == '/pages/ucenter/login-page/index/index' && ['weixin', 'apple'].includes(this
.loginConfig[0])
) {
servicesList = servicesList.filter(item => item.id != this.loginConfig[0])
}
//去掉当前页面对应的登录选项
this.servicesList = servicesList.filter(item => {
let path = item.path?item.path.split('?')[0]:'';
let path = item.path ? item.path.split('?')[0] : '';
return path != this.getRoute(1)
})
console.log('servicesList', servicesList, this.servicesList);
......@@ -289,7 +299,10 @@
})
},
login(params, type) { //联网验证登录
console.log({params,type});
console.log({
params,
type
});
let action = 'loginBy' + type.trim().toLowerCase().replace(type[0], type[0].toUpperCase())
uniCloud.callFunction({
name: 'uni-id-cf',
......@@ -297,18 +310,25 @@
action,
params
},
success: ({
success: async ({
result
}) => {
console.log("login-result",result);
console.log("login-result", result);
if (result.code === 0) {
if (type == 'univerify') {
uni.closeAuthView()
}
uni.hideLoading()
loginSuccess(result)
delete result.userInfo.token
uni.hideLoading()
delete result.userInfo.token
// #ifdef MP-WEIXIN
if (type == 'weixin' && !result.userInfo.nickname) {
return this.$refs.userProfile.open(result.uid)
}
// #endif
this.setUserInfo(result.userInfo)
loginSuccess(result)
} else {
uni.showModal({
content: result.msg,
......@@ -321,6 +341,9 @@
}
})
},
doUserProfileNext(){
loginSuccess()
},
async getUserInfo(e) {
return new Promise((resolve, reject) => {
uni.getUserInfo({
......@@ -344,12 +367,13 @@
<style lang="scss" scoped>
/* #ifndef APP-NVUE */
view{
display: flex;
box-sizing: border-box;
flex-direction: column;
}
/* #endif */
view {
display: flex;
box-sizing: border-box;
flex-direction: column;
}
/* #endif */
.quick-login-box {
flex-direction: row;
width: 750rpx;
......@@ -375,4 +399,4 @@ view{
margin-top: 4px;
font-size: 26rpx;
}
</style>
</style>
<template>
<uni-popup ref="popup" type="bottom">
<view class="box">
<text class="headBox">绑定资料</text>
<text class="tip">获取你的微信头像和昵称,完善你的个人资料</text>
<view class="btnBox">
<text @click="closeMe" class="close">关闭</text>
<button class="agree" type="warn" @click="getUserProfile">确定</button>
</view>
</view>
</uni-popup>
</template>
<script>
import {
mapMutations,
mapGetters
} from 'vuex';
const db = uniCloud.database();
const usersTable = db.collection('uni-id-users')
let userId = ''
export default {
emits:['next'],
computed: {
...mapGetters({
userInfo: 'user/info',
login: 'user/hasLogin'
})
},
data() {
return {}
},
methods: {
...mapMutations({
setUserInfo: 'user/login'
}),
async open(uid){
userId = uid
this.$refs.popup.open()
},
async getUserProfile(){
uni.showLoading();
let res = await new Promise((callBack) => {
uni.getUserProfile({
desc: "用于设置账户昵称和头像",
complete: (e) => {
// console.log("getUserProfile:", e);
callBack(e)
}
})
})
// console.log("userInfo", res.userInfo);
if(res.errMsg != "getUserProfile:ok"){
return this.closeMe()
}
let {avatarUrl,nickName} = res.userInfo,
cloudPath = userId+'/'+Date.now()+'avatarUrl.jpg';
let tempFilePath = await new Promise((callBack)=>{
uni.downloadFile({
url: avatarUrl,
success: (res) => {
if (res.statusCode === 200) {
// console.log('下载成功');
callBack(res.tempFilePath)
}
callBack()
},
complete: (e) => {
// console.log("downloadFile",e);
}
});
})
// console.log(tempFilePath);
const result = await uniCloud.uploadFile({
filePath: tempFilePath,
cloudPath,
fileType:'image'
});
// console.log("上传成功",{result});
let userInfo = {
"nickname":nickName,
"avatar_file":{
name:cloudPath,
extname:"jpg",
url:result.fileID
}
}
this.doUpdate(userInfo,()=>{
this.$refs.popup.close()
})
},
closeMe(e){
uni.showLoading();
this.doUpdate({nickname:"微信匿名用户"},()=>{
uni.hideLoading()
this.$refs.popup.close()
})
},
doUpdate(data,callback){
// console.log('dododo',data);
// 使用 clientDB 提交数据
usersTable.where('_id==$env.uid').update(data).then((res) => {
// console.log(res);
this.setUserInfo(data);
callback(res)
}).catch((err) => {
uni.showModal({
content: err.message ||
'请求服务失败',
showCancel: false
})
callback(err)
}).finally(() => {
this.$emit('next')
uni.hideLoading()
})
}
}
}
</script>
<style lang="scss" scoped>
view{
display: flex;
}
.box{
background-color: #FFFFFF;
height:200px;
width: 750rpx;
flex-direction: column;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.headBox{
padding:20rpx;
height:80rpx;
line-height:80rpx;
text-align: left;
font-size:32upx;
color:#333333;
margin-left: 15rpx;
}
.tip{
color:#666666;
text-align: left;
justify-content: center;
margin:10rpx 30rpx;
font-size:36rpx;
}
.btnBox{
margin-top:45rpx;
justify-content: center;
flex-direction: row;
}
.close,.agree{
text-align: center;
width:200rpx;
height:80upx;
line-height:80upx;
border-radius:50px;
margin:0 20rpx;
font-size:36rpx;
}
.close{
color:#999999;
border-color: #EEEEEE;
border-style: solid;
border-width: 1px;
background-color:#FFFFFF;
}
.close:active{
color:#989898;
background-color:#E2E2E2;
}
.agree{
background-color:#DD524D;
color:#FFFFFF;
}
/* #ifdef MP */
.agree::after {
border: none;
}
.agree{
background-color:#DD524D;
}
/* #endif */
.agree:active{
background-color:#F5F5F6;
}
</style>
......@@ -37,6 +37,8 @@
"FaceID": {
},
"Push": {
},
"Geolocation": {
}
},
"distribute": {
......@@ -50,7 +52,6 @@
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
......@@ -80,9 +81,9 @@
"apple": {
},
"weixin": {
"appid": "wxffdd8fa6ec4ef2a0",
"appid": "",
"appsecret": "",
"UniversalLinks": "https://static-76ce2c5e-31c7-4d81-8fcf-ed1541ecbc6e.bspapp.com/uni-universallinks/__UNI__03B096E"
"UniversalLinks": ""
},
"univerify": {
}
......@@ -91,11 +92,19 @@
},
"share": {
"weixin": {
"appid": "wxffdd8fa6ec4ef2a0",
"UniversalLinks": "https://static-76ce2c5e-31c7-4d81-8fcf-ed1541ecbc6e.bspapp.com/uni-universallinks/__UNI__03B096E"
"appid": "",
"UniversalLinks": ""
}
},
"geolocation": {
"baidu": {
"__platform__": [
"ios",
"android"
],
"appkey_ios": "请填写地图的key",
"appkey_android": "请填写地图的key"
}
},
"push": {
"unipush": {
......@@ -103,6 +112,42 @@
},
"payment": {
}
},
"icons": {
"android": {
"hdpi": "",
"xhdpi": "",
"xxhdpi": "",
"xxxhdpi": ""
},
"ios": {
"appstore": "",
"ipad": {
"app": "",
"app@2x": "",
"notification": "",
"notification@2x": "",
"proapp@2x": "",
"settings": "",
"settings@2x": "",
"spotlight": "",
"spotlight@2x": ""
},
"iphone": {
"app@2x": "",
"app@3x": "",
"notification@2x": "",
"notification@3x": "",
"settings@2x": "",
"settings@3x": "",
"spotlight@2x": "",
"spotlight@3x": ""
}
}
},
"splashscreen": {
"iosStyle": "common",
"androidStyle": "common"
}
},
"nvueLaunchMode": ""
......@@ -116,7 +161,12 @@
"es6": false
},
"usingComponents": true,
"betterScopedSlots": true
"betterScopedSlots": true,
"permission": {
"scope.userLocation": {
"desc": "演示在onShow生命周期获取地理位置"
}
}
},
"mp-alipay": {
"usingComponents": true
......
{
"id": "uni-starter",
"displayName": "uni-starter",
"version": "1.0.42",
"version": "1.0.43",
"description": "云端一体应用快速开发基本项目模版",
"keywords": [
"login",
......@@ -72,7 +72,11 @@
"快应用": {
"华为": "u",
"联盟": "u"
}
},
"Vue": {
"vue2": "y",
"vue3": "u"
}
}
}
}
......
......@@ -164,7 +164,7 @@
}
}
],
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-starter",
......
......@@ -17,4 +17,4 @@ export default function(result){
})
// console.log('判断需要返回几层',delta);
uni.navigateBack({delta})
}
\ No newline at end of file
}
......@@ -110,13 +110,15 @@
<style lang="scss" scoped>
/* #ifndef APP-NVUE */
view{
display: flex;
box-sizing: border-box;
flex-direction: column;
}
/* #endif */
view {
display: flex;
box-sizing: border-box;
flex-direction: column;
}
/* #endif */
@import url("../common/login-page.css");
.quickLogin {
width: 650rpx;
height: 350px;
......@@ -128,4 +130,4 @@ view{
margin: 20px 0;
width: 450rpx;
}
</style>
</style>
......@@ -6,8 +6,9 @@
fileMediatype="image" :del-icon="false" return-type="object" :image-styles="listStyles" disablePreview
disabled />
<image v-else class="logo-img" src="/static/uni-center/defaultAvatarUrl.png"></image>
<view class="logo-title">
<text class="uer-name">{{userInfo.nickname||userInfo.username||userInfo.mobile||'未登录'}}</text>
<view class="logo-title">
<text class="uer-name" v-if="hasLogin">{{userInfo.nickname||userInfo.username||userInfo.mobile}}</text>
<text class="uer-name" v-else>未登陆</text>
</view>
</view>
<uni-grid class="grid" :column="4" :showBorder="false" :square="true">
......@@ -118,7 +119,8 @@
}
}
},
onLoad() {
onLoad() {
console.log(313,this.userInfo,this.hasLogin);
//#ifdef APP-PLUS
this.ucenterList[this.ucenterList.length - 2].unshift({
title: '检查更新',
......@@ -132,7 +134,7 @@
computed: {
...mapGetters({
userInfo: 'user/info',
login: 'user/hasLogin'
hasLogin: 'user/hasLogin'
})
// #ifdef APP-PLUS
,
......
......@@ -218,13 +218,53 @@ exports.main = async (event, context) => {
res.needCaptcha = needCaptcha;
break;
case 'loginByWeixin':
res = await uniID.loginByWeixin(params);
await uniID.updateUser({
uid: res.uid,
username: "微信用户"
});
res.userInfo.username = "微信用户"
case 'loginByWeixin':
let loginRes = await uniID.loginByWeixin(params);
if(loginRes.code===0){
//用户完善资料(昵称、头像)
if(context.PLATFORM == "app-plus" && !loginRes.userInfo.nickname){
let {accessToken:access_token,openid} = loginRes,
{appid,appsecret:secret} = uniIdConfig['app-plus'].oauth.weixin;
let wxRes = await uniCloud.httpclient.request(
`https://api.weixin.qq.com/sns/userinfo?access_token=${access_token}&openid=${openid}&scope=snsapi_userinfo&appid=${appid}&secret=${secret}`, {
method: 'POST',
contentType: 'json', // 指定以application/json发送data内的数据
dataType: 'json' // 指定返回值为json格式,自动进行parse
})
if(wxRes.status == 200){
let {nickname,headimgurl} = wxRes.data;
let headimgurlFile = {},cloudPath = loginRes.uid+'/'+Date.now()+"headimgurl.jpg";
let getImgBuffer = await uniCloud.httpclient.request(headimgurl)
if(getImgBuffer.status == 200){
let {fileID} = await uniCloud.uploadFile({
cloudPath,
fileContent: getImgBuffer.data
});
headimgurlFile = {
name:cloudPath,
extname:"jpg",
url:fileID
}
}else{
return getImgBuffer
}
await uniID.updateUser({
uid: loginRes.uid,
nickname,
avatar_file:headimgurlFile
})
loginRes.userInfo.nickname = nickname;
loginRes.userInfo.avatar_file = headimgurlFile;
}else{
return wxRes
}
}
delete loginRes.accessToken
delete loginRes.refreshToken
return loginRes
}else{
return loginRes
}
await loginLog(res)
break;
case 'loginByUniverify':
......
{
"id": "auni-load-state",
"displayName": "auni-load-state",
"version": "1.0.0",
"description": "auni-load-state",
"keywords": [
"auni-load-state"
],
"repository": "",
"engines": {
"HBuilderX": "^3.1.0"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "",
"data": "",
"permissions": ""
},
"npmurl": ""
},
"uni_modules": {
"dependencies": [],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "u",
"aliyun": "u"
},
"client": {
"App": {
"app-vue": "u",
"app-nvue": "u"
},
"H5-mobile": {
"Safari": "u",
"Android Browser": "u",
"微信浏览器(Android)": "u",
"QQ浏览器(Android)": "u"
},
"H5-pc": {
"Chrome": "u",
"IE": "u",
"Edge": "u",
"Firefox": "u",
"Safari": "u"
},
"小程序": {
"微信": "u",
"阿里": "u",
"百度": "u",
"字节跳动": "u",
"QQ": "u"
},
"快应用": {
"华为": "u",
"联盟": "u"
}
}
}
}
}
\ No newline at end of file
......@@ -5,6 +5,33 @@
"mp-weixin" : {
"appid" : ""
},
"app-plus" : {
"distribute" :{
"sdkConfigs" : {
"oauth" : {
"weixin" : {
"appid" : "",
"appsecret" : "",
"UniversalLinks" : ""
},
"univerify" : {}
},
"share" : {
"weixin" : {
"appid" : "",
"UniversalLinks" : ""
}
},
"geolocation" : {
"baidu" : {
"__platform__" : [ "ios", "android" ],
"appkey_ios" : "请填写地图的key",
"appkey_android" : "请填写地图的key"
}
}
}
}
},
"_spaceID" : "",
"vueVersion" : "2"
},
......
......@@ -32,7 +32,8 @@
"Share" : {},
"OAuth" : {},
"FaceID" : {},
"Push" : {}
"Push" : {},
"Geolocation" : {}
},
"distribute" : {
"android" : {
......@@ -45,7 +46,6 @@
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
......@@ -81,11 +81,53 @@
"UniversalLinks" : "https://static-76ce2c5e-31c7-4d81-8fcf-ed1541ecbc6e.bspapp.com/uni-universallinks/__UNI__03B096E"
}
},
"geolocation" : {},
"geolocation" : {
"baidu" : {
"__platform__" : [ "ios", "android" ],
"appkey_ios" : "111",
"appkey_android" : "111"
}
},
"push" : {
"unipush" : {}
},
"payment" : {}
},
"icons" : {
"android" : {
"hdpi" : "",
"xhdpi" : "",
"xxhdpi" : "",
"xxxhdpi" : ""
},
"ios" : {
"appstore" : "",
"ipad" : {
"app" : "",
"app@2x" : "",
"notification" : "",
"notification@2x" : "",
"proapp@2x" : "",
"settings" : "",
"settings@2x" : "",
"spotlight" : "",
"spotlight@2x" : ""
},
"iphone" : {
"app@2x" : "",
"app@3x" : "",
"notification@2x" : "",
"notification@3x" : "",
"settings@2x" : "",
"settings@3x" : "",
"spotlight@2x" : "",
"spotlight@3x" : ""
}
}
},
"splashscreen" : {
"iosStyle" : "common",
"androidStyle" : "common"
}
},
"nvueLaunchMode" : ""
......@@ -98,7 +140,12 @@
"es6" : false
},
"usingComponents" : true,
"betterScopedSlots" : true
"betterScopedSlots" : true,
"permission" : {
"scope.userLocation" : {
"desc" : "演示在onShow生命周期获取地理位置"
}
}
},
"mp-alipay" : {
"usingComponents" : true
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册