素材巴巴 > 程序开发 >

新浪微博授权登录(asp.net angular)

程序开发 2023-09-03 13:28:49

如QQ互联,这里详细介绍如何实现微博登录。


成为开发者

首先还是得先注册一个微博账号,用微博账号来登录开放平台。

打开微博开放平台官网http://open.weibo.com/index.php,点击登录,完成开发者注册

13908708-614c5bd30eb2e39b.png 新浪微博开放平台


完成开发者认证

按照流程走,开发者类型一般选择个人。

13908708-98362207b8d8f541.png 开发者认证



创建网站应用

一般来说,我们创建的是网站应用,其他应用是类似的,所以这里仅以网站应用为例。

完成认证后,选择首页的微链接菜单下的网站接入(或者首页下的网站接入WEB),按照要求填写资料。

13908708-e39327de1d2e0cc3.png 创建应用


需要准备的资料主要有:

1、完成备案的域名

2、开发好的网站

3、服务器

4、应用图标


特别注意:

填写完基本信息后,还需要填写高级信息,高级信息里面的授权回调页和取消授权回调页很重要、很重要、很重要(重要的事说三遍)。

授权回调页面为授权完成后回调的页面,该页面必须在应用地址域名下,同理,取消授权回调页为取消授权后回调的页面(一般跳转回登录页面)。





等待审核

审核时长一般为一个工作日,所以为了节约时间,资料一定要准确,避免多次修改。

13908708-a89780f3e4af13a8.png 审核


页面开发

开发模式有两种,一种是用sdk,一种是自定义开发。sdk开发门槛低,不需要懂具体授权逻辑,简单粘贴代码即可,下面以登录按钮为例简要介绍(不推荐该方法,建议自定义开发)。


打开链接http://open.weibo.com/widget/loginbutton.php

配置登录按钮样式

13908708-69a6eef6c64e3fc1.png 配置登录按钮样式


选择应用


复制代码

1、在HTML标签中增加XML命名空间


2、在HEAD头中引入WB.JS

3、在需要部署登录按钮的位置粘贴WBML代码 (复制代码)


4、写回调方法

WB2.anyWhere(function(W){

    W.widget.connectButton({

        id: "wb_connect_btn",

        type:"3,2",

        callback : {

            login:function(o){ //登录后的回调函数

            },

            logout:function(){ //退出后的回调函数

            }

        }

    });


 


自定义开发(推荐)

我们是专业的,必须选择自定义开发(可跳过上面sdk的教程)。

完善网站应用信息后,开始使用接口,而在登录功能里面主要有以下几个接口:

1、OAuth2.0授权登录接口

2、获取token和uid接口

3、获取用户信息接口


第一步:登录页面添加链接

微博

这里的应用主键是App Key,在开发平台的应用管理里面可以看到,回调地址是应用高级信息里面的授权回调页,两者必须一样。


第二步:开发授权回调页

因为回调页必须为外网,所以这个在开发是要经常部署新网站(更新部分即可),所以到这一步的时候后要有服务器的权限。

回调页里面有一个十分重要的参数,那就是地址栏上面的code参数,code参数在授权后自动带上,用来获取token,并且只能使用一次,再次使用会出错。


第三步:根据code换取token和uid

此时需要在后台以post形式请求access_token接口,地址为

https://api.weibo.com/oauth2/access_token?client_id=" + 应用主键+ "&client_secret=" + 应用密钥 + "&grant_type=authorization_code&redirect_uri=" + 回调地址 + "&code=" + 获取到的code


应用主键和应用密钥都可以在应用管理里面找到,因为很重要,所以必须后台请求(前台请求存在跨域和头信息不符合的问题),而回调地址和code通过前台传过来,下面是后台代码

13908708-ac1da139e4b1a08b.png C#获取微博token


13908708-868424dff14df837.png token实体类


第四步:获取用户信息(登录)

获取用户信息的前提是提供token和uid,所以我们调用第三步封装的方法private WBTokenState GetWeiBoToken(string code, string callback),此时需要请求的地址为"https://api.weibo.com/2/users/show.json?access_token=" + 换取的token+ "&uid=" + 换取的uid


此时代码如下

13908708-ddf3143b50445cfe.png 微博登陆 13908708-8620b47b96ae5ea1.png 微博用户实体类


具体登录逻辑略...


第五步:前台调用

这时候后台已经写好了,前台开始去调用。

先判断回调地址的code参数是否为空,然后动态获取回调地址(写死后期要改很麻烦,测试时倒必须写死),再调用后台写好的登录接口(后台登录接口里面自动换取token、uid和获取用户信息),下面是具体代码

13908708-baa062d31ed57be9.png 用的是angularjs,应该不难理解



 

 

结束语

微博登录的意义在于接入微博海量用户,减低网站注册门槛,实现社交关系的零成本引入和优质内容的快速传播。


ps:

code只能用一次,再次使用会报错,并且要在后台调用,post方式。


授权机制(包括获取uid)

http://open.weibo.com/wiki/授权机制


获取uid

http://open.weibo.com/wiki/2/account/get_uid


获取用户信息

http://open.weibo.com/wiki/2/users/show


js sdk

http://open.weibo.com/wiki/Weibo-JS_V2#JS_widget.E8.AF.B4.E6.98.8E.E5.8F.8A.E7.A4.BA.E4.BE.8B


标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。