uniapp webapp qq登陆---代码可直接使用

本文讲qq登陆的原理,其他也是大同小异 最后放出可直接使用的前端代码,节省大家时间,

原理

首先需要知道,对接第三方的系统:比如qq登陆,支付宝支付等, 业界一般都是使用oauth2授权的方式, 这里放出几个参考文章:
1,OAuth 2.0 的一个简单解释
2,理解OAuth 2.0
3, OAuth 2.0 的四种方式

通过这几篇文章,可以弄懂oauth2是什么, 接下来补充一些基础知识,

探索工作往往如此，是所谓“进五退一”，甚至是“进五退四”。在今后的专栏文章中，你往往会看到，我在碰触到一种新东西的时候会竭力向前，但随后又后退好几步，再来讨论一些更基础层面的东西。这是因为如果不把这些基础概念说得清楚明白，那么往前冲的那几步常常就被带偏了方向。

基础知识

window.location.href

window.location.href跟项目无关,只跟浏览器有关。即你可以从baidu.com跳到segmentfault.com, 再从segmentfault.com跳回baidu.com 。之前生涯中只使用到前者,导致做qq登陆时，脑子转不过来,在这里卡住。

• 注意点: 使用了location.href=''之后,就会彻底关闭当前页面,

spa应用中,也会走destroy的生命周期, 估计location.href下一行的代码就不会执行了(没测试,sorry),**

为什么以及怎么做

期望得到什么？
qq用户的信息，比如头像，昵称，以及一个用户身份证（比如qq号，qq号全网唯一），能让我明确知道是谁

为什么需要oauth2？
首先去qq的开发平台注册你的网站,申请开通qq登陆,成功之后会给你appid(或者叫client_id) ,后面需要用到
根据经验，数据传递是通过json方式， 那么就是我去调用腾讯的某个api接口（getUserInfo），腾讯把用户信息给我，是这样吗？ 确实是，但是有一点不同，腾讯给我提供用户信息，是需要用户同意的，如此一来，事情就变得复杂了，应该怎么让用户确认？用户确认之后，腾讯怎么把getUserInfo接口所需要的参数给我呢？这就是oauth2能解决的问题

授权流程是什么样的?
oauth2在qq登陆中，是通过location.href的方式去qq的授权页面 https://graph.qq.com/oauth2.0

用户在该页面点击头像确认后，需要做两件事情：
1：回到我站的某个页面（首页| 个人中心）
2：传getUserInfo的请求参数给我

第一件事, 虽看不到qq的代码,但我们可以自圆其说, 假想qq也使用了location.href='www.mysite.com',另外qq需要知道href到哪个页面(return_url)
第二件事,getUserInfo的请求参数怎么拿?
qq使用location.href='www.mysite.com/index?queryParams='xaaadad'' ,把参数放到url上,我们去这个新的页面去取,随便找个生命周期取一下,取完之后再跳到登陆成功后你期望显示的页面,当然为了简单,也可以直接把return_url写成你期望显示的页面,这取决于你.有个建议就是: 考虑用户浏览到某个需要登陆权限的页面时,用户使用qq登陆成功后,让他直接到他要前往的页面.
如果把returnUrl写成首页或者个人中心,之后再跳转也可以,但我觉得,显示一个只有loading的空页面也好

还没完
处于教学目的, qq登陆的大致流程的确是这样,但实际使用时,还需要优化!因为上面直接把请求参数放在queryString里是不安全的,
处理这个地方,oauth2延伸了两种思路:

1. 标准流程: url返回一个中间参数(code),前端把code传给后端,后端返回用户信息。后端所做的是(前端可以吗?)根据这个中间参数,调用腾讯的一个接口,取到json格式的的请求参数(accessToken),之后再根据accessToken去获取json格式的userinfo信息
2. 非标准: 中间参数(code)不放在queryString,而是放在hash部分,其次在做一次304重定向,(这里可能有误,没实际使用过,不了解细节)

show me the code

qq登陆

/**
* 一般queryString也就是下面几个参数
* 传state到qq,qq又传给你. 你比较两个state是否一致, 类似与文件下载时,比较md5,我觉得没必要传state,怎么简单怎么来
* url:`https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=${client_id}&redirect_uri=${redirect_uri}&state=abc&display=mobile`
*/
async login_qq() {

const client_id = 12134141 // 一般为数字,去qq的平台注册你
const redirect_uri = 'www.baidu.com/usercenter'

const state = 'asahs' 
    const {url} = await http.post('后端接口',{type: 'qq'} )
    
    window.location = url
}
      

// 接受code的页面,比如usercenter.vue
import http from '@/common/http.js'

    onLoad(option) {
            const {
                code
            } = option
            if (code) {
                this.getUserInfo(code)
            }

        },
        methods:{
          async getUserInfo(code) {
                const userinfo = await http.post('后端接口', {code})
                this.$store.commit('setUserInfo', userinfo)
                uni.redirectTo({url:'/pages/user/user'});
            }
        }