第三方登录(3)---微博登录

我们在前面实现了使用QQ账号以及GitHub账号进行第三方登录。有兴趣的可以看看前两篇文章：

第三方登录(1)---qq登录

第三方登录(2)---GitHub登录

其实过程都比较简单，逻辑基本上分成四个步骤：

1. 前端在登录界面进行跳转第三方授权界面进行授权，用户授权成功会跳转我们的回调界面并附加code参数。前端获取到code，将code传参给后端。
2. 后端调用获取access_token的接口，将code以及申请应用得到的appid、app_secret参数进行传递。获取access_token。
3. 使用获得的access_token调用获取用户基本信息的接口，获取用户第三方平台的基本信息。
4. 将用户基本信息保存到数据库，然后将用户信息返回给前端。

申请应用

首先我们需要登录微博开放平台https://open.weibo.com/development,我们一样需要申请一个应用获取app_id和app_secret。

1.申请网页接入

点击微连接，选择网站接入

填写应用名称，选择应用分类为网页应用

完善应用信息，可以看到我们已经成功获得App Key和App secret两个秘钥了。这个界面正常填写信息就可以，但是微博申请应用需要提供一个网站主页地址，里面需要包含微博组件。这个很简单，随便写一个界面加入微博组件扔到服务器，然后把界面url填写到应用地址，给微博进行审核。至于加入微博组件微博官方文档写的详细，直接在前端就可以进行实现了，引入微博组件的官方文档地址：https://open.weibo.com/widgets?cat=wb。我们现在来讲讲如何在你界面引入一个微博组件，我这里以关注组件为例：

1. 进入关注组件配置界面：https://open.weibo.com/widget/followbutton.php
2. 配置微博关注按钮样式

1. 在html标签加入xml命名空间

1. 在head标签中引入wb.js

1. 在需要部署微博关注按钮的位置粘贴一下代码

我们可以看下效果

可以看到在最上面有一个加关注按钮。微博申请应用需要界面有微博组件，所以到这里我们就可以把界面扔到服务器然后完善信息提交给微博审核。

操作步骤

注册好应用后，其实就可以开始代码实现了。其实只需要三步就可以实现微博第三方登录了。

1.登录界面点击微博登录按钮重定向到

https://api.weibo.com/oauth2/authorize?client_id=978495094&response_type=code&redirect_uri=http://www.niyueling.cn:6006,其中client_id就是刚才申请应用得到的App_key，redirect_uri就是我们设置的授权成功回调地址。

2.用户授权登陆成功，会跳转回调界面并附带code参数。前端获取到code传给后端获取access_token与uid；

3.根据access_token与uid获取用户信息保存到数据库并并返回用户信息给前端；

授权并获取code

首先，我们在登录界面login.html放置一个微博登录按钮，点击登录按钮重定向到https://api.weibo.com/oauth2/authorize?client_id=978495094&response_type=code&redirect_uri=http://www.niyueling.cn:6006进行授权。这个url需要附带三个参数，一个为client_id，这个参数注册应用可以得到code参数固定值不需要更改。另一个就是我们注册应用设置的回调地址redirect_uri。用户授权成功就会跳转到我们设定的回调地址。现在来看下代码：

可以看到我们在这里设置了一个a标签，点击a标签会重定向到微博授权界面。我们携带client_id和redirect_uri参数，用户授权成功就会跳转到我们设置的回调界面并且携带code参数，这时我们的第一步操作就大功告成。现在我们来测试下看看能否成功获取到code。

我们可以看到我们访问http://www.niyueling.cn:6006显示一个微博登录图标。我们点击图标会重定向微博登录授权界面，其中会携带client_id和redirect_uri参数，我们输入账号密码点击授权，就会回调到我们设置的回调界面，并且携带code参数。

我们可以看到，我们在授权界面成功登录后会回调到我们的回调界面，并附加code参数。我们需要取到url中code，然后开始第二步操作。我这里测试所以简单的直接对页面加载时进行监听，取到url中的code参数。

通过code获取access_token

官方文档对获取access_token接口的介绍

可以看到，我们通过code去获取access_token有五个必传参数。client_id与client_secret来源于我们申请应用成功可以获得。code我们上一步操作已经获得。grant_type是固定值authorization_code，redirect_uri为授权成功回调地址。因为涉及client_secret秘钥，所以我们需要把获取access_token参数放在后端去实现，然后前端调用后端接口进行获取access_token。首先我们先来实现后端代码：后端需要发起post请求获取access_token接口，以json格式将五个必传参数传参。如果code未被使用，则接口会返回access_code.

可以看到在后端我发起了一个post请求，请求

https://api.weibo.com/oauth2/access_token

接口，同时携带五个参数，以json格式传输。我们可以看到调用后端接口能否成功获取到access_token.

可以看到我们将第一步取到的code传给我们后端写的获取access_token接口，我们成功获取到access_token与uid。现在前端发起ajax请求这个后端接口，将code值传给后端，获取到access_token.

前端在第一步获取到code之后，发起ajax请求后端获取access_token,并且打印access_token的值，我们在浏览器端测试看看是否有效果。

可以看到我们成功在前端获取到access_token，接下来最后一步操作：通过access_token获取用户微博基本信息。我们看看官方文档的接口介绍：

写的其实很清楚，直接发起get请求，然后将access_token附加在url后面，就可以取得用户的微博账户个人信息。我们一样在后端实现发起get请求获取用户数据。

后端代码和获取access_token基本类似，在这里我就不详细说了。我们测试下能否取得用户个人信息。

可以看到我们成功获取到用户个人信息，最后前端发起ajax请求调用后端的获取用户信息接口。

我们发起ajax请求后端获取用户数据的接口，然后获取到用户数据后直接在界面显示出来。我们可以测试下整体的效果：

可以看到我们已经成功获取到登录的微博账号的个人信息了。到这里实现微博第三方登录。其实整套逻辑其实前端只需要一个简单的登录按钮，后端实现两个接口。就可以实现微博第三方登录。而且如果不会后端，微博有提供JSSDK，引用JSSDK可以像类似引入微博组件一样直接在前端引入微博登录，不需要后端实现任何接口，对前端开发者比较友好。目前如果需要源码的可以联系我进行提供，等第三方系列文章全部写完我会整理全部源码进行提供。

谢谢观看，希望我的文章能够对你有所帮助。