二十三、第三方登录

目录一、去平台获取对象以及idkey等5. 后端处理与用户绑定一、去平台获取对象以及idkey等1登录第三方获取相应的的应用实例比如这里的QQ互联官网里创建创建好后可以查看详情看看自己的APPIDAPPKey等还有创建中填入的回调地址2在index.html中导入script typetext/javascript charsetutf-8 srchttps://connect.qq.com/qc_jssdk.js >template div span idqqLoginBtn v-showfalse/span m-svg-icon classw-4 cursor-pointer nameqq clickonQQLogin /m-svg-icon /div /template script import { onMounted } from vue // import { isMobileTerminal } from /utils/flexible // QQ 登录的 URL const QQ_LOGIN_URL https://graph.qq.com/oauth2.0/authorize?client_id101998494response_typetokenscopeallredirect_urihttps%3A%2F%2Fimoc-front.lgdsunday.club%2Flogin /script script setup // QQ 登录挂起 onMounted(() { window.QC.Login( { btnId: qqLoginBtn // 插入按钮的节点id }, // 登录成功之后的回调, 但是需要注意, 这个回调只会在《登录回调页面中被执行》 // 登录存在缓存, 登录成功一次之后, 下次进入会自动重新登录 (即: 触发该方法, 所以我们应该在离开登录页面时, 注销登录) (data, opts) { console.log(QQ登录成功) console.log(data) } ) }) /** * 登录按钮事件 */ const onQQLogin () { openQQWindow() } /** * 处理 QQ 登录视窗 */ const openQQWindow async () { window.open( QQ_LOGIN_URL, oauth2Login_19669, height525,width585, toolbarno, menubarno, scrollbarsno, statusno, locationyes, resizableyes ) } /script4使用这个qq登录组件qq-login-vue/qq-login-vue5防止下次打开再次触发登录成功QC.Login.signOut()二、后端处理与用户绑定前端把“通行证”QQ的accessToken或微信的code拿到手了接下来就需要后端服务器出场去兑换真正的“用户信息”并完成在你自家系统的注册或登录。5.1 QQ登录后端流程QQ的流程相对直接。前端传回 accessToken在QQ的回调URL的hash片段中后端需要用这个 accessToken 去QQ的接口换取用户的唯一标识 openid 和基础信息。用 access_token 获取 openid 调用QQ接口https://graph.qq.com/oauth2.0/me?access_tokenYOUR_ACCESS_TOKEN 这个接口会返回一个包含 openid 的JSONP格式响应。openid 是同一个QQ用户在你应用下的唯一标识永远不会变。用 access_token 和 openid 获取用户信息 调用QQ接口https://graph.qq.com/user/get_user_info?access_tokenYOUR_ACCESS_TOKENoauth_consumer_keyYOUR_APP_IDopenidUSER_OPENID 这个接口返回昵称、头像等基本信息。后端拿到 openid 和用户信息后逻辑就很清晰了去你的用户数据库里查有没有一个用户的 第三方类型 是 QQ 且 第三方ID 是这个 openid。如果找到了说明这个QQ用户以前已经绑定过你的网站了。直接为你网站的这个用户生成登录态如JWT Token返回给前端前端跳转到首页完成登录。如果没找到说明这个QQ用户是第一次来。你可以选择 a. 自动注册用QQ返回的昵称和头像自动在你的系统里创建一个新账号并关联这个 openid。然后同样生成Token登录。这是最流畅的体验。 b. 引导绑定跳转到一个绑定页面让用户补充一下用户名、邮箱等信息再创建账号关联。这种方式能获取更多用户信息。因为我还未将项目部署到服务器上还未获取真时的回调地址所以这里做下梳理后续再完善