小程序登录页新增统一身份认证入口
登录方式由两种扩为三种(密码 / 微信授权 / 统一身份认证), 新增 loginByGxmuSso 与 fetchGxmuSsoAvailable 两个接口封装。
This commit is contained in:
+69
-5
@@ -2,7 +2,7 @@
|
||||
<view class="page">
|
||||
<view class="hero-card">
|
||||
<view class="hero-title">进入智慧团委小程序</view>
|
||||
<view class="hero-desc">支持手机号密码登录,也支持微信手机号授权登录。</view>
|
||||
<view class="hero-desc">支持手机号密码登录、微信手机号授权登录,也支持学校统一身份认证登录。</view>
|
||||
</view>
|
||||
|
||||
<view class="login-card">
|
||||
@@ -21,6 +21,13 @@
|
||||
>
|
||||
微信授权登录
|
||||
</view>
|
||||
<view
|
||||
class="tab-item"
|
||||
:class="{ 'tab-item--active': loginMode === 'gxmu' }"
|
||||
@tap="loginMode = 'gxmu'"
|
||||
>
|
||||
统一身份认证
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="loginMode === 'password'" class="form-section">
|
||||
@@ -46,7 +53,7 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else class="form-section">
|
||||
<view v-else-if="loginMode === 'wechat'" class="form-section">
|
||||
<view class="wechat-intro">授权后将使用微信手机号完成登录。</view>
|
||||
<button
|
||||
class="submit-btn submit-btn--wechat"
|
||||
@@ -57,12 +64,36 @@
|
||||
{{ loading ? '登录中...' : '微信授权登录' }}
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<view v-else class="form-section">
|
||||
<view class="wechat-intro">使用学校统一身份认证账号(学号)和密码登录。</view>
|
||||
<uv-input
|
||||
v-model.trim="ssoForm.username"
|
||||
class="field-input"
|
||||
type="text"
|
||||
placeholder="请输入学号"
|
||||
:maxlength="-1"
|
||||
border="none"
|
||||
/>
|
||||
<uv-input
|
||||
v-model="ssoForm.password"
|
||||
class="field-input"
|
||||
type="password"
|
||||
placeholder="请输入统一身份认证密码"
|
||||
:maxlength="-1"
|
||||
border="none"
|
||||
password
|
||||
/>
|
||||
<view class="submit-btn" :class="{ 'submit-btn--loading': loading }" @tap="submitGxmuLogin">
|
||||
{{ loading ? '登录中...' : '统一身份认证登录' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { loginByMpWxPhone, loginByPassword } from './service'
|
||||
import { loginByGxmuSso, loginByMpWxPhone, loginByPassword } from './service'
|
||||
import { hasToken, setAuthInfo } from '../../utils/request'
|
||||
|
||||
export default {
|
||||
@@ -75,6 +106,10 @@
|
||||
form: {
|
||||
username: '',
|
||||
password: ''
|
||||
},
|
||||
ssoForm: {
|
||||
username: '',
|
||||
password: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -137,6 +172,35 @@
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
async submitGxmuLogin() {
|
||||
if (this.loading) {
|
||||
return
|
||||
}
|
||||
if (!this.ssoForm.username) {
|
||||
this.showToast('请输入学号')
|
||||
return
|
||||
}
|
||||
if (!this.ssoForm.password) {
|
||||
this.showToast('请输入统一身份认证密码')
|
||||
return
|
||||
}
|
||||
this.loading = true
|
||||
try {
|
||||
const result = await loginByGxmuSso({
|
||||
username: this.ssoForm.username,
|
||||
password: this.ssoForm.password
|
||||
})
|
||||
setAuthInfo(result)
|
||||
this.showToast('登录成功')
|
||||
setTimeout(() => {
|
||||
this.navigateAfterLogin()
|
||||
}, 300)
|
||||
} catch (error) {
|
||||
this.showToast((error && error.message) || '统一身份认证登录失败')
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
async handleWxPhoneLogin(event) {
|
||||
if (this.loading) {
|
||||
return
|
||||
@@ -229,7 +293,7 @@
|
||||
|
||||
.tab-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 14rpx;
|
||||
}
|
||||
|
||||
@@ -238,7 +302,7 @@
|
||||
border-radius: 22rpx;
|
||||
background: #edf5ff;
|
||||
color: #1496f2;
|
||||
font-size: 24rpx;
|
||||
font-size: 22rpx;
|
||||
font-weight: 600;
|
||||
line-height: 82rpx;
|
||||
text-align: center;
|
||||
|
||||
+20
-1
@@ -1,4 +1,4 @@
|
||||
import { DEFAULT_TENANT_ID, post } from '../../utils/request'
|
||||
import { DEFAULT_TENANT_ID, get, post } from '../../utils/request'
|
||||
|
||||
export function loginByPassword(data) {
|
||||
return post(
|
||||
@@ -19,3 +19,22 @@ export function loginByMpWxPhone(data) {
|
||||
auth: false
|
||||
})
|
||||
}
|
||||
|
||||
// 学校统一身份认证登录:学号 + 统一身份认证密码,由后端调认证平台校验
|
||||
export function loginByGxmuSso(data) {
|
||||
return post(
|
||||
'/sso/login',
|
||||
{
|
||||
username: data.username,
|
||||
password: data.password
|
||||
},
|
||||
{
|
||||
auth: false
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
// 统一身份认证登录是否已开通(后端未配置 appid/appsecret 时返回 false)
|
||||
export function fetchGxmuSsoAvailable() {
|
||||
return get('/sso/available', {}, { auth: false })
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user