参考官方文档sdk使用说明 JS_SDK使用说明 — QQ互联WIKI
第一步:准备工作:
- 需要在 QQ互联 平台注册,需要实名身份认证,审核通过(7个工作日)。
- 然后创建我的web应用,需要有网站域名,需要域名备案号,设置登录成功回跳地址,审核通过。
- 得到 appid 和 回跳地址。
第二步:参考官网的 JS_SDK使用说明 实现QQ登录功能
-
引用JS SDK的JavaScript文件
1. 首先需要申请接入QQ登录参考第一步,成功获取到appid和appkey。假设我们得到了appid和回跳地址
# 测试用 appid # 146267546 # 测试用 redirect_uri # http://meiliyisheng.ma.net/login/callback
2. 在html页面适当的位置引入JS脚本包(将下面代码中的“APPID”替换为申请接入QQ登录时获得的appid;"REDIRECTURI"替换为申请接入QQ登录时输入的回调地址):
<script type="text/javascript" charset="utf-8" src="http://connect.qq.com/qc_jssdk.js" data-appid="APPID" data-redirecturi="REDIRECTURI" ></script>
注意:回调地址必须以http或https开头。
-
放置QQ登录按钮
在html页面需要插入QQ登录按钮的位置,粘贴如下代码:
<span id="qqLoginBtn"></span> <script type="text/javascript"> // QC这里是全局变量 QC.Login({ btnId:"qqLoginBtn" //插入按钮的节点id }); </script>
上述代码中放置了一个html元素节点,并给该节点指定全页面唯一的id,例如上面例子中的<span id="qqLoginBtn"></span>。开发者也可将其改成自定义的元素id。
上述步骤正确执行后,页面粘贴上述代码处会出现QQ登录按钮:
点击该QQ登录按钮,即可跳转 如下页面 发起登录请求,在此页面扫码登录即可,登录成功就会回跳到你自定义的回跳地址页面,该步骤的作用是回调地址将获取到的Access Token和OpenID返回给调用页面 login/callback
同时也可以自定义QQ登录按钮,类似这样
此时可以通过QQ登录按钮QC.Login的方式(和上面点击qq登录得到的跳转地址一样)在地址栏得到登录的回跳地址,赋给这个自定义按钮(可以是a链接)点击即可实现上面快捷登录页面的跳转
第三步:登录成功后页面回跳
因为提前配置过回跳地址,所以扫码登录成功后即会回跳到前端业务页面/login/callback
在这个页面取到qq返回的openId,使用openId调用后端的qq登录接口(登录成功返回的用户信息记得保存)
取到qq返回的openId 需要用到 QC.Login.check(检查是否已经登录)和 QC.Login.getMe(返回用户身份的唯一标识。建议保存在本地,以便用户下次登录时可对应到其之前的身份信息,不需要重新授权)这两个方法,参考JS_SDK使用说明 — JS SDK的其他公开方法
代码示例:
const openId = ref('') const isNeedBind = ref(false) onMounted(() => { if (QC.Login.check()) { QC.Login.getMe((id: string) => { openId.value = id // 使用openId调用后端提供的qq登录接口进行登录: loginByQQ(id) .then((res) => { // 登录成功-已绑定手机号 loginSuccess(res) }) .catch((err) => { // 登录失败-未绑定手机号,展示手机绑定页面信息 isNeedBind.value = true }) }) } })
给全局变量QC添加ts类型 interface Window { _AMapSecurityConfig: { securityJsCode: string } } type QCType = { Login: { check(): boolean getMe(cb: (id: string) => volid): void } } declare const QC: QCType
在上述的代码示例的业务中,取到openId后,使用openId调用QQ登录接口loginByQQ,登录成功代表用户已经绑定过登录的手机号,接下来就需要保存用户信息,回调首页或者用户页面,提示登录成功,store信息的清空。
// 绑定成功的逻辑
const loginSuccess = (res: { data: User }) => {
store.setUser(res.data)
router.replace(store.returnUrl || '/user')
showSuccessToast('登录成功')
store.setReturnUrl('')
}
未登录成功,就提示用户绑定手机号,并且展示手机绑定页面信息,待用户输入个人信息后,点击绑定进行绑定接口的调用即可,绑定成功就提示用户登录成功,保存接口返回的用户信息,回跳来源页,基本和上述绑定成功逻辑一样。
至此,qq登录一条完整的业务算全部完成。