QQ互联跳转到指定的页面【JS-SDK】

最新推荐文章于 2022-07-09 20:46:33 发布

小道仙97

最新推荐文章于 2022-07-09 20:46:33 发布

阅读量3.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： # QQ互联文章标签： QQ互联指定的页面 JS-SDK 小道仙

本文链接：https://blog.youkuaiyun.com/Tomwildboar/article/details/83572915

QQ互联专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何在项目中集成QQ登录功能，并实现根据不同场景跳转至留言板或相关文章页面的策略。作者通过修改登录按钮行为和调整回调地址，解决了页面回跳问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我互联的目的是用来做留言/评论功能。那么我就需要跳转两个页面，一个是留言板页面，一个是相关文章页面（多个文章按照参数区别）

我的回调地址

http://www.xdx97.com/#/messageboard;http://www.xdx97.com/#/single

最后做好的效果如下：点击登陆，用户确认后跳到登陆前的页面。

首先你要自己做好判断你是要跳转到那一个页面的，我这里是根据一个参数来判断的。

当我根据 sdk 上放置好了代码， F12 发现，那个形成的登陆按钮就是一个点击事件，是一个 open 事件（也就是开启一个新窗口的意思）

地址如下：

https://graph.qq.com/oauth2.0/authorize?client_id=101514038&response_type=token&scope=all&redirect_uri=http%3A%2F%2Fwww.xdx97.com%2F%23%2Fmessageboard', 'oauth2Login_10283' ,'height=525,width=585, toolbar=no, menubar=no, scrollbars=no, status=no, location=yes, resizable=yes'

在这个里面我们可以找到之前配置的 appid 和回调地址，也就是说登陆成功了会按照上面这个字符串的地址进行回跳。

那么问题就简单了，我们只要在这个地址上做做手脚就好了。

1、首先，我把它改成了一个在当前页面打开的事件，因为我发现打开新的页面怎么都回不来，这个问题有兴趣的可以自行去了解。

2、把那个按钮改成一个点击方法（这就很简单了吧？我还没有美化，可以看看我的）

3、去写这个aaa（）方法，我们无非就是要改上面那个地址中的回调地址

 aaa(){
                if(this.flagid == "538764e7-af76-40bd-819a-cb9fa0b43904"){
                  window.location.href='https://graph.qq.com/oauth2.0/authorize?client_id=101514038&response_type=token&scope=all&redirect_uri=http%3A%2F%2Fwww.xdx97.com%2F%23%2Fmessageboard', 'oauth2Login_10283' ,'height=525,width=585, toolbar=no, menubar=no, scrollbars=no, status=no, location=yes, resizable=yes'; 
                
                }else{
                   window.location.href='https://graph.qq.com/oauth2.0/authorize?client_id=101514038&response_type=token&scope=all&redirect_uri=http%3A%2F%2Fwww.xdx97.com%2F%23%2Fsingle?bid='+this.flagid, 'oauth2Login_10283' ,'height=525,width=585, toolbar=no, menubar=no, scrollbars=no, status=no, location=yes, resizable=yes';  
                }
           
              
          }

说明：至于回显的问题，就个人自己解决吧。

我这个用的是vue，回显思路是，定义一个变量包含地址和名称，当登陆成功之后，就赋值进去，退出的时候，就把值清空。