QQ登录 - 未绑定 - 有账号

如果账号是绑定的状态，手动调用一下解绑接口

http://pcapi-xiaotuxian-front.itheima.net/login/social/unbind?mobile=手机号

https://apipc-xiaotuxian-front.itheima.net/login/social/unbind?mobile=手机号

获取QQ头像和昵称

如果QQ没绑定过账号，需要绑定已存在的账号或者注册新的账号

（1）获取QQ信息

<script name="CallbackBind" lang="ts" setup>
import { QQUserInfo, QQUserInfoRes } from '@/types/user'
import { ref } from 'vue'
const qqInfo = ref<QQUserInfo>({} as QQUserInfo)
// 1. 判断QQ是否登录
if (QC.Login.check()) {// 2. 获取QQ用户信息QC.api('get_user_info').success((res: QQUserInfoRes) => {console.log(res)qqInfo.value = res.data})
}
</script>

（2）提供数据类型

// QQ信息-用户详情
export interface QQUserInfo {ret: numbermsg: stringis_lost: numbernickname: stringgender: stringgender_type: numberprovince: stringcity: stringyear: stringconstellation: stringfigureurl: stringfigureurl_1: stringfigureurl_2: stringfigureurl_qq_1: stringfigureurl_qq_2: stringfigureurl_qq: stringfigureurl_type: stringis_yellow_vip: stringvip: stringyellow_vip_level: stringlevel: stringis_yellow_year_vip: string
}
// QQ返回信息
export interface QQUserInfoRes {status: stringfmt: stringret: numbercode: numberdata: QQUserInfoseq: stringdataText: string
}

（3）渲染QQ信息

<div class="user-info"><img :src="qqInfo.figureurl_2" alt="" /><p>Hi，{{ qqInfo.nickname }}欢迎来小兔鲜，完成绑定后可以QQ账号一键登录哦~</p>
</div>

表单校验

（1）提取校验规则 src/utils/validate.ts

export function accountRule(value: string) {// value是将来使用该规则的表单元素的值// 1. 必填// 2. 6-20个字符，需要以字母开头// 如何反馈校验成功还是失败，返回true才是成功，其他情况失败，返回失败原因。if (!value) return '请输入用户名'if (!/^[a-zA-Z]\w{5,19}$/.test(value)) return '字母开头且6-20个字符'return true
}
export function passwordRule(value: string) {if (!value) return '请输入密码'if (!/^\w{6,24}$/.test(value)) return '密码是6-24个字符'return true
}
export function mobileRule(value: string) {if (!value) return '请输入手机号'if (!/^1[3-9]\d{9}$/.test(value)) return '手机号格式错误'return true
}
export function codeRule(value: string) {if (!value) return '请输入验证码'if (!/^\d{6}$/.test(value)) return '验证码是6个数字'return true
}
export function isAgreeRule(value: string) {if (!value) return '请勾选同意用户协议'return true
}

（2）修改登录功能

import {accountRule,mobileRule,codeRule,passwordRule,isAgreeRule
} from '@/utils/validate'useForm({validationSchema: {account: accountRule,mobile: mobileRule,code: codeRule,password: passwordRule,isAgree: isAgreeRule},initialValues: {mobile: '13666666666',code: '123456',account: 'xiaotuxian001',password: '123456',isAgree: true}
})

（3）在 CallbackBind.vue添加表单校验

// 表单校验
const { validate } = useForm({validationSchema: {mobile: mobileRule,code: codeRule}
})
const { value: mobile, errorMessage: mobileError } = useField('mobile')
const { value: code, errorMessage: codeError } = useField('code')<div class="xtx-form-item"><div class="field"><i class="icon iconfont icon-phone"></i><inputclass="input"v-model="mobile"type="text"placeholder="绑定的手机号"/></div><div class="error">{{ mobileError }}</div>
</div>
<div class="xtx-form-item"><div class="field"><i class="icon iconfont icon-code"></i><inputv-model="code"class="input"type="text"placeholder="短信验证码"/><span class="code">发送验证码</span></div><div class="error">{{ codeError }}</div>
</div>

（4）绑定时完成表单校验

<a href="javascript:;" class="submit" @click="bind">立即绑定</a>const bind = async () => {const res = await validate()if (!res.valid) return// 如果校验，发送请求进行绑定
}

发送验证码

（1）提供actions，用于获取短信绑定QQ

// 绑定qq的短信验证码
async sendQQBindMsg(mobile: string) {await request.get('/login/social/code', {params: {mobile}})
}

（2）点击获取短信验证码时，发送请求获取验证码

const { time, start } = useCountDown()
const send = async () => {if (time.value > 0) returnconst res = await validateMobile()console.log(res)if (!res.valid) return// 发送请求绑定qqawait user.sendQQBindMsg(mobile.value)// 开启倒计时start(10)
}

（3）渲染倒计时

<span class="code" @click="send">{{ time === 0 ? '发送验证码' : `${time}s后发送` }}
</span>

QQ绑定完成

（1）提供绑定的actions

async qqBindLogin(openId: string, mobile: string, code: string) {const res = await request.post<ApiRes<Profile>>('/login/social/bind', {mobile,code,unionId: openId})// 1. 保存用户信息到 state 中this.profile = res.data.resultsetProfile(res.data.result)
},

（2）验证后，发送请求绑定

// 1. 判断QQ是否登录
if (QC.Login.check()) {// 2. 获取QQ用户信息QC.api('get_user_info').success((res: QQUserInfoRes) => {console.log(res)qqInfo.value = res.data})// 3. 获取openIdQC.Login.getMe((id) => {openId = id})
}const bind = async () => {const res = await validForm()if (!res.valid) return// 如果校验，发送请求进行绑定await user.qqBindLogin(openId, mobile.value, code.value)Message.success('QQ绑定成功')router.push('/')
}

QQ登录 - 未绑定 - 无账号

（1）增加校验类型

export function rePasswordRule(value: string, { form }: any) {if (!value) return '请输入确认密码'if (!/^\w{6,24}$/.test(value)) return '密码是6-24个字符'// 校验密码是否一致  form表单数据对象if (value !== form.password) return '两次输入的密码不一致'return true
}

（2）提供两个actions

async sendQQPathMsg(mobile: string) {await request.get('/register/code', {params: {mobile}})
},async qqPatchLogin(data: any) {const res = await request.post<ApiRes<Profile>>(`/login/social/${data.openId}/complement`,data)// 1. 保存用户信息到 state 中this.profile = res.data.resultsetProfile(res.data.result)
}

（3）完整代码

<script lang="ts" setup name="CallbackPatch">
import {useField,useForm,useValidateForm,useValidateField
} from 'vee-validate'
import {accountRule,mobileRule,codeRule,passwordRule,rePasswordRule
} from '@/utils/validate'
import { useCountDown } from '@/utils/hooks'
import Message from '@/components/message'
import useStore from '@/store'
import { useRouter } from 'vue-router'
const { user } = useStore()
const router = useRouter()
// 1. 获取openId
let openId = ''
// 判断QQ是否登录
if (QC.Login.check()) {// 获取openIdQC.Login.getMe((id) => {openId = id})
}// 表单校验useForm({validationSchema: {account: accountRule,mobile: mobileRule,code: codeRule,password: passwordRule,repassword: rePasswordRule}
})const { errorMessage: accountError, value: account } =useField<string>('account')const { errorMessage: passwordError, value: password } =useField<string>('password')
const { errorMessage: mobileError, value: mobile } = useField<string>('mobile')
const { errorMessage: codeError, value: code } = useField<string>('code')
const { errorMessage: repasswordError, value: repassword } =useField<string>('repassword')const validForm = useValidateForm()
const bind = async () => {const res = await validForm()if (!res.valid) returnawait user.qqPatchLogin({openId,mobile: mobile.value,code: code.value,account: account.value,password: password.value})Message.success('注册成功')router.push('/')
}// 获取验证码
const validMobile = useValidateField('mobile')
const { time, start } = useCountDown(60)
const send = async () => {if (time.value > 0) return// console.log('获取验证码')// 单独校验手机号const res = await validMobile()if (!res.valid) {return}await user.sendQQPathMsg(mobile.value)Message.success('获取验证码成功')start()
}
</script>
<template><div class="xtx-form"><div class="xtx-form-item"><div class="field"><i class="icon iconfont icon-user"></i><inputclass="input"v-model="account"type="text"placeholder="请输入用户名"/></div><div class="error">{{ accountError }}</div></div><div class="xtx-form-item"><div class="field"><i class="icon iconfont icon-phone"></i><inputclass="input"v-model="mobile"type="text"placeholder="请输入手机号"/></div><div class="error">{{ mobileError }}</div></div><div class="xtx-form-item"><div class="field"><i class="icon iconfont icon-code"></i><inputclass="input"v-model="code"type="text"placeholder="请输入验证码"/><span class="code" @click="send">{{time === 0 ? '发送验证码' : `${time}s后发送`}}</span></div><div class="error">{{ codeError }}</div></div><div class="xtx-form-item"><div class="field"><i class="icon iconfont icon-lock"></i><inputclass="input"v-model="password"type="password"placeholder="请输入密码"/></div><div class="error">{{ passwordError }}</div></div><div class="xtx-form-item"><div class="field"><i class="icon iconfont icon-lock"></i><inputclass="input"v-model="repassword"type="password"placeholder="请确认密码"/></div><div class="error">{{ repasswordError }}</div></div><a href="javascript:;" class="submit" @click="bind">立即提交</a></div>
</template><style scoped lang="less">
.code {position: absolute;right: 0;top: 0;line-height: 50px;width: 80px;color: #999;&:hover {cursor: pointer;}
}
</style>

第三方登录功能的实现之 QQ登录 - 未绑定相关推荐

java qq微信微博第三方登录界面_android 实现第三方登录(微博、微信、QQ登录)
[实例简介]此案例是演示案例,大家可以看到Bmob的第三方登录和信息获取如何工作的实现了 qq.微信.微博的第三方登录功能 [实例截图] [核心代码] package com.bmob.demo. ...
php mysql登录实现原理_PHP实现QQ登录的开原理和实现过程
第三方登录,就是使用大家比较熟悉的比如QQ.微信.微博等第三方软件登录自己的网站,这可以免去注册账号.快速留住用户的目的,免去了相对复杂的注册流程.下边就给大家讲一下怎么使用PHP开发QQ登录的功能. ...
3.2【微信小程序全栈开发课程】登录功能（一）--实现登录功能
在本地搭建好后端环境之后,我们来实现登录功能 1.安装SDK插件 SDK插件用来获取用户的openId SDK是server端(也就是后端)的插件,帮助我们很容易的获取openId.openId是微信 ...
lol微信登录服务器,LOL部分大区开放微信登录功能什么区能微信登录？
英雄联盟官方在5月6日发布公告,称征服之海,均衡教派,卡拉曼达,巨龙之巢,皮尔特沃夫,峡谷之巅,男爵领域,教育网率先开放微信登录功能. 亲爱的召唤师: 我们将于 5 月 6 日在征服之海,均衡教派,卡 ...
java实现qq登录界面_java模仿实现QQ登录界面
本文实例为大家分享了java模仿实现qq登录界面的具体代码,供大家参考,具体内容如下这是我模仿QQ2015版界面,实现的基本功能有登陆验证,重置等,当然直接复制代码运行是不一样的,还要注意自己插入自 ...
java 自动登录功能_jsp实现用户自动登录功能
理解并掌握cookie的作用以及利用cookie实现用户的自动登录功能,实现下图效果当服务器判断出该用户是首次登录的时候,会自动跳转到登录界面等待用户登录,并填入相关信息.通过设置cookie的有效 ...
【无私分享：从入门到精通ASP.NET MVC】从0开始，一起搭框架、做项目（5.5）登录功能的实现，完善登录功能...
索引 [无私分享:从入门到精通ASP.NET MVC]从0开始,一起搭框架.做项目目录索引简述今天我们来完善我们的登录功能项目准备我们用的工具是:VS 2013 + SqlServer 20 ...
QQ登录php无限制,PHP实现QQ登录实例代码
搜索热词分享一段利用PHP实现QQ登陆的代码,原理是用curl模拟发送post登录,cookie保存本地,实现真正的3GQQ登陆.这里代码理论可以支持永久单挂QQ-真正做到免费挂qq哦. PHP;& ...
iOS 开发，xcode7中用QQ授权登录遇到的一些问题 QQ登录不跳客户端
1.首先导入framework. 2. 调用 _tencentOAuth = [[TencentOAuth alloc] initWithAppId:APPID andDelegate:self];这 ...

第三方登录功能的实现之 QQ登录 - 未绑定