feat: 公众号网页授权登录

main
wx-jincw 1 month ago
parent d56c5394e8
commit 623c9333de

@ -24,6 +24,19 @@ export function loginH5(data) {
return request.post("login", data, { noAuth : true });
}
/**
* 小程序公众号网页授权 code 换登录态后端待对接
* 约定 data{ token, uid } 已绑定直接登录{ needBind: true } 需使用账号密码绑定后再拿 token
*/
export function loginMpByGzhCode(code, spread_spid) {
void code;
void spread_spid;
// 对接后启用,并删除下方占位 reject
// return request.get('wechat/authorize/mp_gzh_login', { code, spread_spid: spread_spid || 0 }, { noAuth: true });
// 本地联调「需绑定」分支时可改为return Promise.resolve({ data: { needBind: true } });
return Promise.reject(new Error('MP_GZH_LOGIN_PENDING'));
}
/**
* h5用户手机号登录
* @param data object 用户手机号 也只能

@ -316,3 +316,35 @@ class AuthWechat {
export default new AuthWechat();
// #endif
/**
* 小程序内打开 web-view 完成公众号网页授权 H5 落地页通过 postMessage 回传 { code }
* redirect_uri / appid 请按实际公众号与业务域名配置
*/
export function wxGZHAuth() {
return new Promise((resolve, reject) => {
const redirectUri = encodeURIComponent('https://www.fjyfzh.com/gzh-mp/gzh-login');
const url =
`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx49d7d3aba9479a85&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`;
uni.navigateTo({
url: '/pages/webview/webview',
events: {
callbackData(data) {
// uni.navigateBack({ delta: 1 });
if (data && (data.code || typeof data === 'string')) {
resolve(typeof data === 'string' ? { code: data } : data);
} else {
reject(new Error('未获取到公众号授权 code'));
}
}
},
success(res) {
res.eventChannel.emit('acceptData', { url });
},
fail(err) {
reject(err || new Error('打开授权页失败'));
}
});
});
}

@ -968,6 +968,16 @@
"navigationBarTitleText": "精品推荐"
}
}]
},
{
"root": "pages/webview",
"name": "webview",
"pages": [{
"path": "webview",
"style": {
"navigationBarTitleText": "微信授权"
}
}]
}
],
"globalStyle": {

@ -48,6 +48,9 @@
</div>
<div class="logon" @click="loginMobile" v-if="current !== 0"></div>
<div class="logon" @click="submit" v-if="current === 0"></div>
<!-- #ifdef MP-WEIXIN -->
<div class="logon logon-wechat" v-if="current === 0" @click="mpGzhWechatLogin"></div>
<!-- #endif -->
<div class="tips">
<!-- <div v-if="current==0" @click="current = 1"></div> -->
<div v-if="current==1" @click="current = 0"></div>
@ -62,6 +65,7 @@
import {
loginH5,
loginMobile,
loginMpByGzhCode,
registerVerify,
register,
// getCodeApi,
@ -81,6 +85,11 @@
import {
VUE_APP_API_URL
} from "@/utils";
// #ifdef MP-WEIXIN
import {
wxGZHAuth
} from "@/libs/wechat";
// #endif
const BACK_URL = "login_back_url";
@ -106,7 +115,8 @@
appUserInfo: null, //
appleLoginStatus: false, //
appleUserInfo: null,
appleShow: false // ios13
appleShow: false, // ios13
pendingGzhCode: '' //
};
},
watch:{
@ -254,7 +264,7 @@
this.getUserInfo(res.data);
}
}).catch(res => {
that.$util.Tips({
this.$util.Tips({
title: res
});
});
@ -370,6 +380,60 @@
navTap: function(index) {
this.current = index;
},
// #ifdef MP-WEIXIN
async mpGzhWechatLogin() {
const that = this;
try {
uni.showLoading({
title: '授权中'
});
const auth = await wxGZHAuth();
const code = auth && auth.code ? auth.code : '';
if (!code) {
uni.hideLoading();
return that.$util.Tips({
title: '未获取到授权码'
});
}
const res = await loginMpByGzhCode(code, that.$Cache.get('spread'));
uni.hideLoading();
const d = res.data || {};
if (d.token) {
that.pendingGzhCode = '';
that.$store.commit('LOGIN', {
token: d.token
});
that.getUserInfo({
uid: d.uid
});
return;
}
if (d.needBind) {
that.pendingGzhCode = code;
uni.showModal({
title: '提示',
content: '当前微信未绑定账号,请使用账号密码完成绑定登录',
showCancel: false
});
return;
}
that.$util.Tips({
title: d.msg || '登录失败'
});
} catch (e) {
uni.hideLoading();
const msg = (e && e.message) || e || '授权失败';
if (msg === 'MP_GZH_LOGIN_PENDING') {
return that.$util.Tips({
title: '公众号登录接口待对接'
});
}
that.$util.Tips({
title: typeof msg === 'string' ? msg : '授权失败'
});
}
},
// #endif
async submit() {
let that = this;
if (!that.account) return that.$util.Tips({
@ -381,14 +445,20 @@
if (!that.password) return that.$util.Tips({
title: '请填写密码'
});
loginH5({
account: that.account,
password: that.password,
spread: that.$Cache.get("spread")
})
const loginPayload = {
account: that.account,
password: that.password,
spread: that.$Cache.get("spread")
};
// mp_gzh_oauth_code
if (that.pendingGzhCode) {
loginPayload.mp_gzh_oauth_code = that.pendingGzhCode;
}
loginH5(loginPayload)
.then(({
data
}) => {
that.pendingGzhCode = '';
this.$store.commit("LOGIN", {
'token': data.token
});
@ -400,7 +470,7 @@
});
});
},
getUserInfo(data){
getUserInfo(data){
this.$store.commit("SETUID", data.uid);
getUserInfo().then(res => {
this.$store.commit("UPDATE_USERINFO", res.data);
@ -603,6 +673,11 @@ getUserInfo(data){
font-size: 30rpx;
}
.logon-wechat {
margin-top: 32rpx;
background-color: #07c160;
}
.tips {
margin: 30rpx;
text-align: center;

@ -0,0 +1,38 @@
<template>
<web-view :src="url" @message="handleMessage" @load="handleLoad" @error="handleError"></web-view>
</template>
<script>
export default {
data() {
return {
url: '',
}
},
onLoad() {
const eventChannel = this.getOpenerEventChannel();
eventChannel.on('acceptData', (data) => {
this.url = data.url;
});
},
methods: {
handleMessage(e) {
console.log(e.detail.data);
const data = e.detail.data || [];
const eventChannel = this.getOpenerEventChannel();
eventChannel.emit('callbackData', data[0] || {});
},
//
handleLoad(e) {
},
//
handleError(e) {
uni.showToast({ title: '加载失败', icon: 'none' });
}
}
}
</script>
<style>
</style>
Loading…
Cancel
Save