小程序登录页新增统一身份认证入口
登录方式由两种扩为三种(密码 / 微信授权 / 统一身份认证), 新增 loginByGxmuSso 与 fetchGxmuSsoAvailable 两个接口封装。
This commit is contained in:
+69
-5
@@ -2,7 +2,7 @@
|
|||||||
<view class="page">
|
<view class="page">
|
||||||
<view class="hero-card">
|
<view class="hero-card">
|
||||||
<view class="hero-title">进入智慧团委小程序</view>
|
<view class="hero-title">进入智慧团委小程序</view>
|
||||||
<view class="hero-desc">支持手机号密码登录,也支持微信手机号授权登录。</view>
|
<view class="hero-desc">支持手机号密码登录、微信手机号授权登录,也支持学校统一身份认证登录。</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="login-card">
|
<view class="login-card">
|
||||||
@@ -21,6 +21,13 @@
|
|||||||
>
|
>
|
||||||
微信授权登录
|
微信授权登录
|
||||||
</view>
|
</view>
|
||||||
|
<view
|
||||||
|
class="tab-item"
|
||||||
|
:class="{ 'tab-item--active': loginMode === 'gxmu' }"
|
||||||
|
@tap="loginMode = 'gxmu'"
|
||||||
|
>
|
||||||
|
统一身份认证
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view v-if="loginMode === 'password'" class="form-section">
|
<view v-if="loginMode === 'password'" class="form-section">
|
||||||
@@ -46,7 +53,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view v-else class="form-section">
|
<view v-else-if="loginMode === 'wechat'" class="form-section">
|
||||||
<view class="wechat-intro">授权后将使用微信手机号完成登录。</view>
|
<view class="wechat-intro">授权后将使用微信手机号完成登录。</view>
|
||||||
<button
|
<button
|
||||||
class="submit-btn submit-btn--wechat"
|
class="submit-btn submit-btn--wechat"
|
||||||
@@ -57,12 +64,36 @@
|
|||||||
{{ loading ? '登录中...' : '微信授权登录' }}
|
{{ loading ? '登录中...' : '微信授权登录' }}
|
||||||
</button>
|
</button>
|
||||||
</view>
|
</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>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { loginByMpWxPhone, loginByPassword } from './service'
|
import { loginByGxmuSso, loginByMpWxPhone, loginByPassword } from './service'
|
||||||
import { hasToken, setAuthInfo } from '../../utils/request'
|
import { hasToken, setAuthInfo } from '../../utils/request'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@@ -75,6 +106,10 @@
|
|||||||
form: {
|
form: {
|
||||||
username: '',
|
username: '',
|
||||||
password: ''
|
password: ''
|
||||||
|
},
|
||||||
|
ssoForm: {
|
||||||
|
username: '',
|
||||||
|
password: ''
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -137,6 +172,35 @@
|
|||||||
this.loading = false
|
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) {
|
async handleWxPhoneLogin(event) {
|
||||||
if (this.loading) {
|
if (this.loading) {
|
||||||
return
|
return
|
||||||
@@ -229,7 +293,7 @@
|
|||||||
|
|
||||||
.tab-row {
|
.tab-row {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
gap: 14rpx;
|
gap: 14rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -238,7 +302,7 @@
|
|||||||
border-radius: 22rpx;
|
border-radius: 22rpx;
|
||||||
background: #edf5ff;
|
background: #edf5ff;
|
||||||
color: #1496f2;
|
color: #1496f2;
|
||||||
font-size: 24rpx;
|
font-size: 22rpx;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 82rpx;
|
line-height: 82rpx;
|
||||||
text-align: center;
|
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) {
|
export function loginByPassword(data) {
|
||||||
return post(
|
return post(
|
||||||
@@ -19,3 +19,22 @@ export function loginByMpWxPhone(data) {
|
|||||||
auth: false
|
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