| 前端对接第三方登录（QQ、微博、微信） | 您所在的位置：网站首页 › 网页微博qq登陆 › 前端对接第三方登录（QQ、微博、微信） |
前端对接第三方登录（QQ、微博、微信）
|
原理
请求获取用户授权code通过授权code去请求access_token
介绍
先在第三方平台注册账号（企业账号）、创建应用。正确填写信息提交审核，会花费一定时间，需要提前准备。 QQ : QQ互联平台微信： 微信开放平台新浪: 新浪开放平台 项目 网站第三方登录
微信客户端内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有关的错误，要检查回调地址的填写是否正确。 |
【本文地址】
公司简介
联系我们