商务服务
第三方登录(3)---微博登录
2024-10-31 23:37

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

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

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

申请应用

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

1.申请网页接入

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

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

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

我们可以看下效果

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

操作步骤

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

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

https://api.weibo.com/oauth2/authorize?client_id=978495094&response_type=code&redirect_uri=http://www.niyueling.cn:6006,其中client_id就是刚才申请应用得到的App_keyredirect_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_idredirect_uri参数,用户授权成功就会跳转到我们设置的回调界面并且携带code参数,这时我们的第一步操作就大功告成。现在我们来测试下看看能否成功获取到code

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

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

通过code获取access_token

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

可以看到,我们通过code去获取access_token有五个必传参数。client_idclient_secret来源于我们申请应用成功可以获得。code我们上一步操作已经获得。grant_type是固定值authorization_coderedirect_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请求后端获取用户数据的接口,然后获取到用户数据后直接在界面显示出来。我们可以测试下整体的效果:

    以上就是本篇文章【第三方登录(3)---微博登录】的全部内容了,欢迎阅览 ! 文章地址:http://dfvalve.xrbh.cn/news/5559.html 
     资讯      企业新闻      行情      企业黄页      同类资讯      首页      网站地图      返回首页 迅博思语资讯移动站 http://keant.xrbh.cn/ , 查看更多   
最新新闻
云南网络营销软件哪个好?权威推荐助您快速选择
在数字化时代,网络营销软件成为了许多企业实现营销目标的重要工具。然而,市面上网络营销软件琳琅满目,选择一个适合自己的并不
宫崎骏的时代结束了
在《你想活出怎样的人生》之前,宫崎骏一直是著名的退休诈骗犯。七次退休又七次复出,年过八旬,创作欲还是旺盛到令人害怕。然而
个人大数据信用查询平台哪个更准确一些?蘑菇画像个人大数据信用报告查询平台更好用
个人大数据信用查询平台哪个更准确一些?蘑菇画像个人大数据信用报告查询平台更好用,个人大数据信用查询平台市面上还是比较多的
小红书关键词热度查询!国风大潮下,品牌怎么玩出花样、玩出水平?
国风,是当下年轻人钟爱的潮流。汉服穿搭、文物手办、国潮仿妆……频频出圈。“民族的就是世界的”,国风的影响力可谓深远,一说
app推广接单发布平台哪个好?怎么领取任务赚钱?
最近几年,随着互联网的快速发展,利用网络兼职的赚钱方式也呈现越来越火,非常受大众欢迎的趋势。而且其种类也非常多:微商、社
【可打印】文学常识常考100题汇总,初中生练一练!(部编版初中语文)
关注本公众号,私信发送数字:2493,领取电子打印版文学常识1、成语“万事俱备,只欠东风”是根据《三国演义》________ (战役)
“迎旅发大会 游美丽望城”望城首届文旅短视频大赛,最高3万奖励等你来拿!
湘江水浩浩奔腾,流淌沧桑巨变。铜官窑静穆肃然,在这里诉说着望城的厚重历史,流传着“君生我未生,我生君已老”凄美爱情故事;落日
mysql导入大txt文件怎么打开_mysql怎么导入txt文件?
有时候我们在使用mysql数据库的时候,想导入txt文本文档,要怎么操作呢?下面本篇文章就来给大家介绍一下方法
寸头抖音短视频教程_人开始衰老的迹象是什么
岁月不饶人,我才50出头,可是许多衰老迹象已经越来越明显,惹得中医闺蜜笑话这样的我。1、觉得右后背和肩膀疼,出现“五十肩”
什么是网站页脚:以及最佳页脚设计示例
主体内容外,网站还包括页眉和页脚,用于帮助访问者的特定目的。由于我们认为网站页脚设计同样重要,我们整理了10个最佳免费网站
本企业新闻

点击拨打: