微信小程序登录:一键登录

pull/32/MERGE
YunaiV 2023-12-23 19:45:44 +08:00
parent b23fca683b
commit 789cbe8461
6 changed files with 67 additions and 59 deletions

View File

@ -183,12 +183,12 @@
</template> </template>
<script setup> <script setup>
import { computed, ref, reactive, onBeforeMount } from 'vue'; import { computed, reactive, onBeforeMount } from 'vue';
import { mobile, password, username } from '@/sheep/validate/form';
import sheep from '@/sheep'; import sheep from '@/sheep';
import { clone } from 'lodash'; import { clone } from 'lodash';
import { showAuthModal } from '@/sheep/hooks/useModal'; import { showAuthModal } from '@/sheep/hooks/useModal';
import FileApi from '@/sheep/api/infra/file'; import FileApi from '@/sheep/api/infra/file';
import UserApi from '@/sheep/api/member/user';
const state = reactive({ const state = reactive({
model: {}, // model: {}, //
@ -278,7 +278,7 @@
// //
async function onSubmit() { async function onSubmit() {
const { code } = await sheep.$api.user.update({ const { code } = await UserApi.updateUser({
avatar: state.model.avatar, avatar: state.model.avatar,
nickname: state.model.nickname, nickname: state.model.nickname,
sex: state.model.sex, sex: state.model.sex,

View File

@ -65,7 +65,24 @@ const AuthUtil = {
custom: { custom: {
showSuccess: true, showSuccess: true,
loadingMsg: '登陆中', loadingMsg: '登陆中',
// TODO 芋艿:登录成功??? },
});
},
// 微信小程序的一键登录
weixinMiniAppLogin: (phoneCode, loginCode, state) => {
debugger
return request({
url: '/app-api/member/auth/weixin-mini-app-login',
method: 'POST',
data: {
phoneCode,
loginCode,
state
},
custom: {
showSuccess: true,
loadingMsg: '登陆中',
successMsg: '登录成功',
}, },
}); });
}, },

View File

@ -30,16 +30,6 @@ export default {
auth: true, auth: true,
}, },
}), }),
update: (data) =>
request2({
url: 'member/user/update',
method: 'PUT',
custom: {
showSuccess: true,
auth: true,
},
data,
}),
// 账号登录 // 账号登录
accountLogin: (data) => accountLogin: (data) =>
request({ request({

View File

@ -32,18 +32,16 @@
<!-- 立即注册&快捷登录 TextButton --> <!-- 立即注册&快捷登录 TextButton -->
<view v-if="sheep.$platform.name === 'WechatMiniProgram'" class="ss-flex register-box"> <view v-if="sheep.$platform.name === 'WechatMiniProgram'" class="ss-flex register-box">
<view class="register-title">还没有账号?</view> <view class="register-title">还没有账号?</view>
<button class="ss-reset-button register-btn" @tap="showAuthModal('smsRegister')"> <button class="ss-reset-button login-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
立即注册 快捷登录
</button> </button>
<view class="or-title"></view> <view class="circle" />
<button class="ss-reset-button login-btn" @tap="thirdLogin('wechat')"></button>
<view class="circle"></view>
</view> </view>
<!-- 公众号|App微信登录 --> <!-- 微信的公众号App小程序的登录基于 openid + code -->
<button <button
v-if=" v-if="
['WechatOfficialAccount', 'App'].includes(sheep.$platform.name) && ['WechatOfficialAccount', 'WechatMiniProgram', 'App'].includes(sheep.$platform.name) &&
sheep.$platform.isWechatInstalled sheep.$platform.isWechatInstalled
" "
@tap="thirdLogin('wechat')" @tap="thirdLogin('wechat')"
@ -55,7 +53,7 @@
/> />
</button> </button>
<!-- iOS登录 --> <!-- iOS 登录 -->
<button <button
v-if="sheep.$platform.os === 'ios' && sheep.$platform.name === 'App'" v-if="sheep.$platform.os === 'ios' && sheep.$platform.name === 'App'"
@tap="thirdLogin('apple')" @tap="thirdLogin('apple')"
@ -64,12 +62,12 @@
<image <image
class="auto-login-img" class="auto-login-img"
:src="sheep.$url.static('/static/img/shop/platform/apple.png')" :src="sheep.$url.static('/static/img/shop/platform/apple.png')"
></image> />
</button> </button>
</view> </view>
<view <view
v-if="['accountLogin', 'smsLogin', 'smsRegister'].includes(authType)" v-if="['accountLogin', 'smsLogin'].includes(authType)"
class="agreement-box ss-flex ss-row-center" class="agreement-box ss-flex ss-row-center"
:class="{ shake: currentProtocol }" :class="{ shake: currentProtocol }"
> >
@ -98,7 +96,7 @@
</view> </view>
</label> </label>
</view> </view>
<view class="safe-box"></view> <view class="safe-box"/>
</view> </view>
</su-popup> </su-popup>
</template> </template>
@ -126,12 +124,12 @@
const currentProtocol = ref(false); const currentProtocol = ref(false);
// // TODO
function onChange() { function onChange() {
state.protocol = !state.protocol; state.protocol = !state.protocol;
} }
// // TODO
function onProtocol(id, title) { function onProtocol(id, title) {
closeAuthModal(); closeAuthModal();
sheep.$router.go('/pages/public/richtext', { sheep.$router.go('/pages/public/richtext', {
@ -140,7 +138,7 @@
}); });
} }
// / // /
function onConfirm(e) { function onConfirm(e) {
currentProtocol.value = e; currentProtocol.value = e;
setTimeout(() => { setTimeout(() => {
@ -167,6 +165,19 @@
// #endif // #endif
} }
}; };
// https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html
const getPhoneNumber = async (e) => {
if (e.detail.errMsg !== 'getPhoneNumber:ok') {
sheep.$helper.toast('快捷登录失败');
return;
}
let result = await sheep.$platform.useProvider().mobileLogin(e.detail);
if (result) {
debugger
closeAuthModal();
}
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@ -25,55 +25,45 @@ const login = async () => {
// 1. 获得微信 code // 1. 获得微信 code
const codeResult = await uni.login(); const codeResult = await uni.login();
if (codeResult.errMsg !== 'login:ok') { if (codeResult.errMsg !== 'login:ok') {
resolve(false); return resolve(false);
} }
// 2. 社交登录 // 2. 社交登录
const loginResult = await loginByCode(codeResult.code); const loginResult = await AuthUtil.socialLogin(socialType, codeResult.code, 'default');
debugger
if (loginResult.code === 0) { if (loginResult.code === 0) {
setOpenid(loginResult.data.openid); setOpenid(loginResult.data.openid);
resolve(true); return resolve(true);
} else { } else {
resolve(false); return resolve(false);
} }
return loginResult.code === 0 ? resolve(true) : resolve(false);
}); });
}; };
function loginByCode(code) {
return AuthUtil.socialLogin(socialType, code, 'default');
// TODO 芋艿shareLog
}
// 微信小程序手机号授权登陆 // 微信小程序手机号授权登陆
const mobileLogin = async (e) => { const mobileLogin = async (e) => {
return new Promise(async (resolve, reject) => { return new Promise(async (resolve, reject) => {
console.log(e.errMsg)
if (e.errMsg !== 'getPhoneNumber:ok') { if (e.errMsg !== 'getPhoneNumber:ok') {
resolve(false); return resolve(false);
return;
} }
const { error } = await third.wechat.login({ // 1. 获得微信 code
platform: 'miniProgram', const codeResult = await uni.login();
shareInfo: uni.getStorageSync('shareLog') || {}, if (codeResult.errMsg !== 'login:ok') {
payload: encodeURIComponent( return resolve(false);
JSON.stringify({
sessionId: uni.getStorageSync('sessionId'),
code: e.code,
iv: e.iv,
encryptedData: e.encryptedData,
}),
),
});
if (error === 0) {
resolve(true);
} }
if (error === -1) { // 2. 一键登录
getSessionId(false); debugger
const loginResult = await AuthUtil.weixinMiniAppLogin(e.code, codeResult.code, 'default');
if (loginResult.code === 0) {
setOpenid(loginResult.data.openid);
return resolve(true);
} else {
return resolve(false);
} }
resolve(false); // TODO 芋艿shareInfo: uni.getStorageSync('shareLog') || {},
}); });
}; };
@ -256,5 +246,6 @@ export default {
unbind, unbind,
checkUpdate, checkUpdate,
bindUserPhoneNumber, bindUserPhoneNumber,
mobileLogin,
subscribeMessage, subscribeMessage,
}; };

View File

@ -31,7 +31,6 @@ const app = defineStore({
posterInfo: {}, // 海报信息 posterInfo: {}, // 海报信息
linkAddress: '', // 复制链接地址 linkAddress: '', // 复制链接地址
}, },
auto_login: 0, // 自动登陆
bind_mobile: 0, // 登陆后绑定手机号提醒 (弱提醒,可手动关闭) bind_mobile: 0, // 登陆后绑定手机号提醒 (弱提醒,可手动关闭)
}, },
chat: {}, chat: {},