什么是第三方登录?
用户登录操作不是基于自身建设账号体系,而是基于用户在第三方平台上已有的账号和密码来快速完成登录的过程。下面我列举了几点第三方登录的优点。
极大的简化登录注册的流程。
方便用户快捷登录,降低用户的登录流失率,第三方大厂的用户某种意义上都可以是你用户。传统的登录注册,如果网站较小或者用户不经常使用,可能时间长了,用户就把登录的用户名和密码忘记了。
第三方登录接入后,应用可直接获取用户昵称、头像、用户ID等信息,方便产品获取用户的基本资料。
国内比较广泛使用的第三方登录方式为微博、微信、QQ,天翼账号等。
国外广泛使用的登录方式为Facebook,Twitter等。
微博第三方登录
接入微博的第三方登录有两种方式,分别为移动端接入和网站接入。
这次教大家怎么在你开发的web网站整合微博的第三方登录,微博登录包括身份认证、用户关系以及内容传播。允许用户使用微博帐号登录访问你的网站,分享内容,同步信息。
官网地址:https://open.weibo.com/
认证开发者信息
进入上面提供的官网地址并登录自己的微博账号,点击右上角头像,编辑开发者信息,填写基本信息并且进行身份认证。
之后需要等待身份认证信息通过审核,有点慢…
一周后…
经过漫长的等待,审核终于通过了!
之后我们就可以点击网站接入,创建应用了。
https://open.weibo.com/connect
创建完成之后需要完善信息,之后再次提交进入审核…
其实提交审核之后过个一会就可以进行微博第三方登录了,只是应用信息是处于审核状态。
上面图中的应用地址是非常重要的,可以把它理解成你网站的登录页面(必须有微博登录的组件或者超链接),其他的信息大家可以模仿我这个随便写一下。
之后我们需要进入我的应用
的高级信息
中,把回调地址
配置一下,也就是登录返回的用户信息。这些其实和QQ第三方登录是差不多的。后端需要编写一个请求来处理。
@Slf4j
@Controller
public class WeiBoLoginController {@Value("${weibo.client_id}")private String clientId;@Value("${weibo.secret}")private String secret;@Value("${weibo.redirect}")private String redirect;@RequestMapping("/weibo")public String weiBo(String code, Map<String, Object> map) {String url = "https://api.weibo.com/oauth2/access_token?client_id=" + clientId + "&client_secret=" + secret + "&grant_type=authorization_code&redirect_uri=" + redirect + "&code=" + code;log.info("accessTokenUrl = {}", url);String resp = HttpUtil.post(url, "");log.info("accessTokenResp = {}", resp);JSON json = JSONUtil.parse(resp);String token = json.getByPath("access_token").toString();String uid = json.getByPath("uid").toString();log.info("token = {}", token);log.info("uid = {}", uid);String userInfoUrl = "https://api.weibo.com/2/users/show.json?uid=" + uid + "&access_token=" + token;String userInfo = HttpUtil.get(userInfoUrl);log.info("userInfo = {}", userInfo);JSON info = JSONUtil.parse(userInfo);map.put("uId", uid);map.put("name", info.getByPath("name"));map.put("imgUrl", info.getByPath("profile_image_url"));return "success";}
}
还需要在配置文件中配置微博登录的信息
# 应用ID
weibo.client_id=1556869902
# 密钥
weibo.secret=ddbf4544bf8856ffcd2e7d97761eb33f
# 回调地址
weibo.redirect=http://xuewei.world/test/weibo
之后还需要引导需要授权的用户到如下地址:
https://api.weibo.com/oauth2/authorize?client_id=你的应用ID&response_type=code&redirect_uri=你的回调地址
我这里只在前端放置了一个<a>
标签
<a href="https://api.weibo.com/oauth2/authorize?client_id=1556869902&response_type=code&redirect_uri=http://xuewei.world/test/weibo"></a>
然后再稍微美化一下页面,得到的登录页面就是下面这个样子
点击微博登录之后就会跳转到微博登录的页面,可以选择扫码登录、账号密码登录、手机号等登录方式
登录成功之后可以拿到非常多的用户信息,并跳转到回调地址
我取出比较关键的信息放在前端进行显示,就是下面这个效果
这次我把微博第三方登录、QQ第三方登录整合到了一起。之后打算整合更多的第三方登录案例,登录注册这块拿捏的死死的!
代码已经打包,获取完整案例前往微信公众号【薛伟同学】回复【三方登录】。