网站建设学习网公司有哪些,绿色食品网站源码,智库门户网站建设,小程序推广是干什么的文章目录 ⭐前言⭐qq三方登录流程#x1f496;qq互联中心创建网页应用#x1f496;配置回调地址redirect_uri#x1f496;流程分析 ⭐思路分解⭐技术选型实现#x1f496;技术选型#xff1a;#x1f496;实现 ⭐结束 ⭐前言
大家好#xff0c;我是yma16#xff0c;本… 文章目录 ⭐前言⭐qq三方登录流程qq互联中心创建网页应用配置回调地址redirect_uri流程分析 ⭐思路分解⭐技术选型实现技术选型实现 ⭐结束 ⭐前言
大家好我是yma16本文分享OAuth规则机制下实现个人站点接入qq三方登录。 oauth授权 OAuth是一种授权机制用于允许用户资源所有者向第三方应用程序授予有限的访问权限而不必将凭证直接提供给第三方应用程序。OAuth的目的是为了保护用户的私密数据如社交媒体帐户、云存储、银行帐户等。它通过一个流程将用户授权给第三方应用程序访问用户的资源而不需要第三方应用程序获得用户的凭证信息。这样做可以减少用户数据泄露的风险。OAuth是一个开放的标准由OAuth工作组维护并得到许多组织的支持和使用。 oauth的发展 OAuth协议的发展历史可以追溯到2004年当时美国国防部提出了一个名为“OpenID Connect”的开放式身份认证和授权标准旨在解决Web 2.0中的身份认证和授权问题。OAuth1.0于2005年被RFC 5849正式标准化OAuth2.0于2011年被RFC 6749正式标准化 。 OAuth1.0的主要特点是将用户的认证信息(如用户名和密码)与第三方应用的请求分离开来从而提高了安全性。 OAuth2.0则在OAuth1.0基础上进一步改进增加了更多的功能和灵活性如授权码模式、隐式模式、密码模式等 。 效果 在个人站点实现三方qq登录 链接直达https://yongma16.xyz 唤起三方登录url
获取qq用户账号头像和openid登入
⭐qq三方登录流程
前提条件: 存在可访问的网站在qq互联中心创建应用审核 友情提示网站不可使用外部cdn可导致审核人员查看白屏而失败
qq互联中心创建网页应用
填写域名资料提交审核
配置回调地址redirect_uri
回调地址是用户使用qq登录之后调整的地址会携带code和state的参数
流程分析
唤起qq授权登录url登录qq成功获取code通过code去换取access_token通过access_token去换取openid通过access_token和openid去换取userinfo ⭐思路分解
1.登录页面新开窗口的auth授权qq页面 2.自定义node服务去渲染回调redirect_uri成功登录时回传url上的参数给父页面然后用定时器关闭页面 3. 拿到code后去换取token 4. 拿到token去换取openid 5. 拿到openid去换取userinfo 6. 使用openid去注册网站用户显示nickname网名
⭐技术选型实现
技术选型
后端 node 前端 vue2 后端node封装接口
实现
node封装接口 api.js
const request require(request);const loginUrlhttps://graph.qq.com/oauth2.0/authorize
const codeToTokenUrlhttps://graph.qq.com/oauth2.0/token
const openIdUrlhttps://graph.qq.com/oauth2.0/me
const userInfoUrlhttps://graph.qq.com/user/get_user_info
const appid自己的appid
const appKey自己的appkey
const redirect_uri自己的回调地址const getAuthUrl(state){return new Promise(resolve{const params{response_type:code,client_id:appid,redirect_uri:encodeURI(redirect_uri),state:state?state:myblog,};const pathObject.keys(params).forEach(key{return ${key}${params[key]}}).join()const urlloginUrl?pathresolve(url)})
};const getToken(code){return new Promise(async ( resolve ,reject) {request({method: GET, uri: codeToTokenUrl,qs: {grant_type: authorization_code,client_id: appid,client_secret: appKey,code: code,redirect_uri: encodeURI(redirect_uri),fmt: json}}, function (error, response) {if (!error response.statusCode 200) {resolve(response)} else {console.log(error,error);reject(reject)}})})
};const getOpenId(access_token){return new Promise(async ( resolve ,reject) {request({method: GET, uri: openIdUrl,qs: {access_token:access_token,fmt: json}}, function (error, response) {if (!error response.statusCode 200) {resolve(response)} else {reject(error)}})})
};const getUserInfo(access_token,openId){return new Promise(async ( resolve ,reject) {request({method: GET, uri: userInfoUrl,qs: {access_token:access_token,oauth_consumer_key:appid,openid:openId,fmt: json}}, function (error, response) {if (!error response.statusCode 200) {resolve(response)} else {reject(error)}})})
}module.exports{getAuthUrl,getToken,getOpenId,getUserInfo
};
node开放接口
const hostname localhost;
const port 6677;const express require(express);const {getAuthUrl,getToken,getOpenId,getUserInfo}require(./service/api.js);
const app express();app.listen(port,hostname, () {console.log(Server running at http://${hostname}:${port}/);
});
// server your css as static
app.use(express.static(__dirname));
// views
const thirdLoginDir/views/thirdLogin/;
app.get(/getAuthUrl,async (req, res) {try{const {query}reqconst {state}queryconst urlawait getAuthUrl(state)res.json({code:authRes.statusCode,data:url,})}catch (e) {res.json({code:0,msg:e})}
});app.get(/getToken,async (req, res) {try{const {query}reqconst {code}queryconsole.log(code,code)const tokenRsponseawait getToken(code)res.json({code:tokenRsponse.statusCode,data:JSON.parse(tokenRsponse.body),})}catch (e) {res.json({code:0,msg:e})}
});app.get(/getOpenId,async (req, res) {try{const {query}reqconst {access_token}queryconsole.log(access_token,access_token)const openidResawait getOpenId(access_token)res.json({code:openidRes.statusCode,data:JSON.parse(openidRes.body)})}catch (e) {res.json({code:0,msg:e})}
});app.get(/quickGetOpenId,async (req, res) {try{const {query}reqconst {code}queryconsole.log(code,code)const tokenRsponseawait getToken(code)const tokenBodyJSON.parse(tokenRsponse.body)const {access_token}tokenBodyconst openIdRsponseawait getOpenId(access_token)res.json({code:tokenRsponse.statusCode,data:JSON.parse(openIdRsponse.body)})}catch (e) {res.json({code:0,msg:e})}
});app.get(/getUserInfo,async (req, res) {try{const {query}reqconst {access_token,openId}queryconsole.log(access_token openId,access_token,openId)const userInfoResawait getUserInfo(access_token,openId)res.json({code:userInfoRes.statusCode,data:JSON.parse(userInfoRes.body)})}catch (e) {res.json({code:0,msg:e})}
});app.get(/qq_login_callback, (req, res) {res.sendFile(__dirname thirdLoginDirqqLoginCallback.html);
});
app.get(/azure_login_callback, (req, res) {res.sendFile(__dirname thirdLoginDirazureLoginCallback.html);
});回调html
!DOCTYPE html
html langen
headmeta charsetUTF-8titleqqLoginCallback/title
/head
body
qq login success!
script typeapplication/javascriptfunction init() {console.log(qq success login)console.log(window.location.href,window.location.href)const hrefwindow.location.hrefconst data{}const urlArrayhref.split(?)const urlLengthurlArray.lengthif(urlLength1){urlArray[urlLength-1].split().forEach(item{const itemArrayitem.split()const keyitemArray[0]const valueitemArray[1]data[key]value})}if(window.opener){//发送datawindow.opener.postMessage(data,*)//关闭setTimeout((){window.close()},1000)}}window.onloadinit
/script
/body
/html
vue前端qq登录的调用 async qqLogin () {try {const that this// qqconst res await that.$axios.post(/third-login/getAuthUrl)console.log(res, res)if (res.data res.data.data) {const resData res.data.dataconsole.log(resData, resData)if (resData ) {let url resData console.log(url, url)const openHandle window.open(url, width:800px;height:700px, _black)console.log(openHandle, openHandle)window.onmessage async (res) {const {origin, data} resif (origin.includes(yongma16.xyz)) {const {code, state} dataconsole.log(code state, code, state)that.thirdLoginConfig.qCode codethat.thirdLoginConfig.qState stateconst tokenRes await that.getAccessToken(code)console.log(tokenRes, tokenRes)}}}}return new Promise(resolve {resolve(true)})} catch (e) {return new Promise((resolve, reject) {reject(e)})}},async getAccessToken (code) {try {const tokenUrl /third-login/getTokenconst params {code}const tokenRes await this.$axios.get(tokenUrl, {params})console.log(tokenRes, tokenRes)if (tokenRes) {const {access_token, expires_in, refresh_token} tokenRes.data.dataif (access_token) {this.thirdLoginConfig.qToken access_tokenawait this.getOpenId(access_token)}}} catch (e) {console.log(token error, e)}},async getOpenId (token) {try {const tokenUrl /third-login/getOpenIdconst params {access_token: token}const openIdRes await this.$axios.get(tokenUrl, {params})console.log(openIdRes, openIdRes)if (openIdRes) {const {openid} openIdRes.data.dataif (openid) {this.thirdLoginConfig.qOpenid openidawait this.getQUserinfo(this.thirdLoginConfig.qToken, openid)}}} catch (e) {console.log(token error, e)}},async getQUserinfo (token, openId) {try {const userInfoUrl /third-login/getUserInfoconst params {access_token: token,openId: openId}const userRes await this.$axios.get(userInfoUrl, {params})if (userRes) {this.thirdLoginConfig.qUserInfo userRes.data.datathis.registerThirdLogin()}console.log(userRes, userRes)} catch (e) {console.log(token error, e)}}效果 ⭐结束
本文分享到这结束如有错误或者不足之处欢迎指出 点赞是我创作的动力 ⭐️ 收藏是我努力的方向 ✏️ 评论是我进步的财富 感谢你的阅读
