前端对接第三方登录（QQ、微博、微信）

原理

1. 请求获取用户授权code
2. 通过授权code去请求access_token

 

介绍

先在第三方平台注册账号（企业账号）、创建应用。正确填写信息提交审核，会花费一定时间，需要提前准备。

1. QQ : QQ互联平台
2. 微信： 微信开放平台
3. 新浪: 新浪开放平台

 

项目

• 网站第三方登录

1. 分别给按钮添加点击事件，跳转去授权。
2. 如果用户同意授权就进入授权成功的页面（页面地址带有code参数或者其他参数），否则就取消授权登录操作。
3. 用户同意授权，根据页面地址携带的参数code去请求获取access_token，存储登录信息等。

 

 

• 微信客户端内H5

原理一样。在非微信端内打开，会提示在微信客户端打开。

如果在微信客户端内打开的，点击后会先申请是否授权。

部分js代码：

 showComDialog() {
      this.access_token = Cookies.get('access_token');
      this.code = this.GetQueryString("code");
      var currentUrl = encodeURIComponent(location.href);
      if (!this.access_token && !this.code) {

        location.href = '请求接口&redirect_uri=' + currentUrl + '&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirec';

      } else if (this.access_token) {
        this.isShow = true;
      }


    },
    getUserInfo() {
      let param = {
        code: this.GetQueryString("code")
      }
      let url = '请求接口?code=';
      axios.get(url, {
        params: param
      })
        .then(
          (res) => {
            if (res.data && res.data.error_code == 0) {
              var data = res.data.data;
              if (data && data[0].access_token) {
                Cookies.set('access_token', data[0].access_token, { expires: 7, path: '/' });
              }


            }
          }
        )

    },

 

 

 

着重看一下微信的几种第三方登录：

类型	授权域/接口	用户侧使用流程	接入流程
App	接入微信SDK，并调用snsapi_userinfo	（1）在App内选择使用微信登录 （2）拉起微信客户端，打开用户授权页，完成登录授权	（1）注册微信开放平台（open.weixin.qq.com）帐号，并完成开发者资质认证 （2）申请【App移动应用】并审核通过后可以使用，查看开发文档
网站应用	snsapi_login	（1）用户使用微信“扫一扫”，在PC端扫码 （2）客户端打开授权页，完成登录授权	（1）注册微信开放平台（open.weixin.qq.com）帐号，并完成开发者资质认证 （2）申请【网站应用】并审核通过后可以使用，查看开发文档
微信客户端内H5	使用公众号的登录能力： snsapi_base snsapi_userinfo	snsapi_base：静默授权 snsapi_userinfo： （1）用户在H5内点击登录，唤起授权弹窗 （2）用户侧完成登录授权	（1）注册微信公众号，选择“服务号”类型，并完成微信认证 （2）在公众号管理后台设置回调域名 （3）接入微信登录能力，查看开发文档
小程序	wx.login wx.getUserInfo	wx.login：静默授权，开发者可获取openid wx.getUserInfo： （1）用户在小程序内点击组件，唤起登录窗口 （2）用户侧完成登录授权	（1）注册小程序 （2）接入微信登录功能，查看开发文档，查看登录流程设计指引

 

注意：

• 前端直接访问第三方提供的接口不可以实现（会存在跨域等错误），一开始花费了很长时间研究并不知道怎么完成。 后来是通过后端在自己的服务器请求第三方的接口，再返回给前端就很容易实现了。
• 常见问题是redirect_uri有关的错误，要检查回调地址的填写是否正确。