响应式网站的设计尺寸,网站设计的公司蒙特,家装公司排名前十强,wordpress 无法安装主题项目场景#xff1a;
前端使用vue3ts 后端使用nestjs 1.申请appId,appKey
1.进入qq互联官网。创建应用 特别注意 1.在填写网站回调域时,需要你线上真实能访问的。不然审核不通过。我的回调地址是前端路由地址 2.如果你想本地调试#xff0c;回调到你的线上地址。你可以在本…项目场景
前端使用vue3ts 后端使用nestjs 1.申请appId,appKey
1.进入qq互联官网。创建应用 特别注意 1.在填写网站回调域时,需要你线上真实能访问的。不然审核不通过。我的回调地址是前端路由地址 2.如果你想本地调试回调到你的线上地址。你可以在本地设置本地域名做反向代理。我是用的是phpstudy方向代理自己的线上域名。
如果你还是不明白可以留言
2.代码演示
特别注意: 如果你跟我一样是前后端分离的模式开发的应用回调地址填写的应该是你的前端路由地址。在你的前端页面获取code把code值传给后端接口。后端接口通过code获取gitee用户信息。
代码演示
我的应用回调地址:http://localhost:8080/vuecms/qq
前端点击qq图标登录代码:
div clickhandleToLogin(qq)gitee
/divconst handleToLogin (type:string){window.location.hrefhttp://localhost:3000/user/oauth/qq
}http://localhost:3000/user/oauth/qq后端接口代码 Get(/oauth/qq)async qqLogin(Res() response: Response) {let appId 你的appId;let redirectUrl 你的回调地址;const state Date.now()let scope get_user_info,list_albumreturn qqOauthConfig.authorizeUrlclient_id${appId}redirect_uri${redirectUrl}state${state}scope${scope};}回调地址前端代码
templatediv classu-f u-f-ac u-f-ajc stylewidth: 100%;height:100vhtemplate v-ifisOauthel-resulticonsuccesstitle授权成功,跳转中.../el-result/templatetemplate v-elseel-resulticonerrortitle授权失败/el-result/template/div
/templatescript setup langtsimport {useRoute,useRouter} from vue-router;import {onMounted} from vue/runtime-core;import {requestGiteeLogin} from /network/common/oauthPage;import {setToken, setUserId, setUsername} from /utils/storage;import {handleGetCurInstance} from /utils/utils;import {ref} from vuelet route useRoute()let router useRouter()let query route.query;let {model} handleGetCurInstance()let isOauth ref(true)onMounted((){//获取返回的code通过code对后端发起请求获取qq用户信息let {code,state} query;let form {code,state}requestQQLogin(form).then(res{let {data,code,message} res;if(code200){setToken(data.token)setUserId(data.id)setUsername(data.username)window.location.href/}else{model.handleMsg(message,warning)isOauth.value false;}})})
/scriptrequestQQLogin请求的后端代码
// qq 的认证配置
export const qqOauthConfig {cid: ,//gitee官网设置获取secret: ,redirectURL: ,//gitee官网配置进行填写authorizeUrl: https://graph.qq.com/oauth2.0/authorize?response_typecode,getAccessTokenUrl: https://graph.qq.com/oauth2.0/token?grant_typeauthorization_code,openId:https://graph.qq.com/oauth2.0/me,qqUserAPI:https://graph.qq.com/user/get_user_info
};//qq登录Post(/oauth/qqLogin)async getQQInfo(Body() qqLoginDto:QqLoginDto,IpAddress() clientIp: string) {let {code,operationSystem,browser} giteeLoginDtolet accessToken:any await this.handleGetQQAccessToken(code)if(!accessToken.data){return this.msgService.fail(code过期请重新登录)}let giteeInfo:any await this.getQQInfoByAccessToken(accessToken.data.accessToken,accessToken.data.appId);if(!giteeInfo.data){return this.msgService.fail(获取qq账号信息失败)}let { nickname } giteeInfo.data.userData;let clientId 0;let qqId sysConfigEnum.qqLoginConfig JSON.parse(JSON.stringify(giteeInfo.data.openid));//判断qq是否有关联账号。如果有就登陆没有就新创建一个账号let userNum await this.userEntity.createQueryBuilder().where({ qqId:qqId }).getCount()let username;//没有账号注册帐号if(userNum0){let roleData await this.roleEntity.createQueryBuilder().where({roleName:试用角色}).getOne()username handleGetCode(8);username await this.handleGetUsername(username);let originalPwd handleGetCode(8);let password JSON.parse(JSON.stringify(originalPwd))password securityMd5(password)let userData;try {userData await this.userEntity.createQueryBuilder().insert().values({username,originalPwd,password,qqId:qqId,roleId:roleData.id}).execute();}catch (error) {throw new HttpException(error,HttpStatus.SERVICE_UNAVAILABLE)}clientId userData.identifiers[0][id]}else{let userData await this.userEntity.createQueryBuilder().where({qqId:qqId}).getOne()username userData.usernameclientId userData.id;}let ip handleDealIpv6ToIpv4(clientIp)let token this.authService.createToken({id:clientId,username,ip})await this.updateUserInfoStatus(clientId,token,ip,operationSystem,browser)return {id:clientId,username,token}}//获取gitee的accessTokenasync handleGetQQAccessToken(code:string):PromiseresInterface{let key sysConfigEnum.qqLoginConfiglet data await this.sysConfigService.handleGetSysData(key)if(!data.appId || !data.appKey || !data.redirectUrl){return {data:false,msg:};}let appId data.appId;let appKey data.appKey;let redirectUrl data.redirectUrl;//回调路劲获取codelet authData await axios.get(qqOauthConfig.getAccessTokenUrlcode${code}client_id${appId}client_secret${appKey}redirect_uri${redirectUrl}).then(res{let resArr res.data.split()let accessToken resArr[0].split()[1]let expiresIn resArr[1].split()[1]let refreshToken resArr[2].split()[1]return {accessToken,expiresIn,refreshToken};}).catch(err{return err.data})if(authData?.error){return this.msgService.commonRes(false,authData?.error?.error_description);}else{return this.msgService.commonRes({accessToken:authData?.accessToken,appId},);}}//通过access_token获取gitee信息async getQQInfoByAccessToken(accessToken: boolean | string,appId:string){let authData await axios.get(qqOauthConfig.openId?access_token${accessToken}).then(res{let data JSON.parse(res.data.substring(9, res.data.length-3))let clientId data.client_id;let openid data.openid;return {clientId,openid};}).catch(err{return err.data})if(authData?.error){return this.msgService.commonRes(false,authData?.error?.error_description);}let userData await axios.get(qqOauthConfig.qqUserAPI?access_token${accessToken}oauth_consumer_key${appId}openid${authData.openid}).then(res{return res.data;}).catch(err{return err.data})if(userData?.error){return this.msgService.commonRes(false,authData?.error?.error_description);}else{return this.msgService.commonRes({userData,openid:authData.openid},);}}
3.特别注意
如果以上步骤都没问题。需要把本地测试回调地址改为线上路径
如果你还是不懂你可以克隆下我的项目。开源免费。如果对你有帮助给我一个star就行了 https://gitee.com/derekgo/vue-cms_xg ✨ 踩坑不易还希望各位大佬支持一下 \textcolor{gray}{踩坑不易还希望各位大佬支持一下} 踩坑不易还希望各位大佬支持一下 个人主页 \textcolor{green}{个人主页} 个人主页 沉默小管 个人网站 \textcolor{green}{个人网站} 个人网站 沉默小管 个人导航网站 \textcolor{green}{个人导航网站} 个人导航网站 沉默小管导航网 我的开源项目 \textcolor{green}{我的开源项目} 我的开源项目 vueCms.cn 技术交流 Q Q 群 837051545 \textcolor{green}{技术交流QQ群837051545} 技术交流QQ群837051545 点赞你的认可是我创作的动力 \textcolor{green}{点赞你的认可是我创作的动力} 点赞你的认可是我创作的动力 ⭐️ 收藏你的青睐是我努力的方向 \textcolor{green}{收藏你的青睐是我努力的方向} 收藏你的青睐是我努力的方向 ✏️ 评论你的意见是我进步的财富 \textcolor{green}{评论你的意见是我进步的财富} 评论你的意见是我进步的财富 如果有不懂可以留言我看到了应该会回复 如有错误请多多指教
