dev-cjl
parent
5eccb83e3f
commit
076f301920
@ -0,0 +1,65 @@ |
||||
<template> |
||||
<div class="p-20px"> |
||||
<p class="mb-30px font-bold text-20px">微信授权登陆</p> |
||||
<el-form :model="form" ref="formRef" :rules="rules" label-width="auto"> |
||||
<el-form-item label="用户名" prop="username"> |
||||
<el-input v-model="form.username" placeholder="请输入用户名" /> |
||||
</el-form-item> |
||||
<el-form-item label="密码" prop="password"> |
||||
<el-input v-model="form.password" placeholder="请输入密码" show-password type="password" /> |
||||
</el-form-item> |
||||
</el-form> |
||||
<el-button type="primary" class="w-full" @click="onSubmit">授权登陆</el-button> |
||||
<div v-if="form.code">code: {{ form.code }}</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup name="MPLogin"> |
||||
const form = ref({ |
||||
code: undefined, |
||||
username: undefined, |
||||
password: undefined |
||||
}) |
||||
const formRef = ref() |
||||
const rules = { |
||||
username: { required: true, message: '用户名不可为空', trigger: 'blur' }, |
||||
password: { required: true, message: '密码不可为空', trigger: 'blur' } |
||||
} |
||||
|
||||
// 微信授权登陆地址 |
||||
const WX_AUTH_URL = 'https://open.weixin.qq.com/connect/oauth2/authorize?' |
||||
// 重定向参数-固定写法 |
||||
const REDIRECT = '#wechat_redirect' |
||||
|
||||
const params = ref({ |
||||
appid: 'wxf87aa1f474c0494f', // 公众号 APP ID |
||||
redirect_uri: ``, // 授权后重定向的回调链接地址, 请使用 urlEncode 对链接进行处理 |
||||
response_type: 'code', // 固定写法 |
||||
scope: 'snsapi_base' // snsapi_base 静默授权获取 open id ;snsapi_userinfo 需要用户授权,获取详细信息 |
||||
// state:'code', // a-zA-Z0-9的参数值,最多128字节 |
||||
}) |
||||
function onSubmit() { |
||||
// 这些需要判断没有 code 情况拉起授权登陆,有就结束放在重复拉起授权登陆 |
||||
if (!form.value.code) { |
||||
const access_url = WX_AUTH_URL + `${new URLSearchParams(params.value)}` + REDIRECT |
||||
location.href = access_url |
||||
} else { |
||||
alert(`授权成功!`) |
||||
} |
||||
} |
||||
|
||||
onMounted(() => { |
||||
const uri = location.origin + location.pathname |
||||
params.value.redirect_uri = encodeURI(uri) |
||||
// 获取地址参数 |
||||
const param = new URLSearchParams(location.search) |
||||
form.value.code = param.get('code') |
||||
|
||||
if (!form.value.code) { |
||||
const access_url = WX_AUTH_URL + `${new URLSearchParams(params.value)}` + REDIRECT |
||||
location.href = access_url |
||||
} |
||||
}) |
||||
</script> |
||||
|
||||
<style lang="scss" scoped></style> |
Loading…
Reference in new issue