AI 助理
备案控制台
开发者社区 安全 文章 正文

手把手带你实现第三方应用登录

2022-05-24 1255
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 手把手带你实现第三方应用登录

大家在自己做项目的时候有没有想过实现一个第三方应用登录呢？类似这种：
image.png
本篇文章就来聊一聊该如何实现第三方应用登录。

什么是OAuth2.0

OAuth是一项协议，它为用户资源的授权提供了一个安全、开放而简易的标准，OAuth的授权不会使第三方触及到用户的账号信息（比如密码），因此OAuth是相对安全的。而OAuth2.0就是OAuth的延续，不过2.0更加关注客户端开发者的简易性。

申请网站接入

常见的第三方应用都支持第三方登录，比如：QQ、微信、微博、GitHub、Gitee等，要想申请第三方登录权限，就需要去到对应的平台，比如QQ，搜索QQ开放平台：
image.png
进入应用管理，并创建应用即可：
在这里插入图片描述

不过对于QQ、微信、微博等的网站接入都需要身份认证，过程比较繁琐，所以我们使用Gitee作为第三方应用进行接入。

首先打开Gitee，选择设置：
image.png
在设置中选择第三方应用：
image.png
点击创建应用并填写相关信息：
image.png
应用名称可以随意填写，但是下面的两个地址就有用途了，对于应用主页，它需要填写的是当前应用的主页，而应用回调接口填写的是当登录成功后需要跳转的页面。

创建SpringBoot应用

申请完成后，就可以来创建SpringBoot应用，并新建一个index.html页面：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>
    <form>
      用户名:<input type="text"/><br/>
      密码:<input type="password"/><br/>
      <a href="">Gitee登录</a>
      <input type="submit" value="登录"/><br/>
    </form>
  </body>
</html>

效果如下：
image.png
页面很丑，但不重要，实现功能即可。

现在我们的需求是点击Gitee登录链接，会跳转至一个第三方的登录页面，就像这样：
image.png
那么该如何实现呢？

回到Gitee中，在创建完应用后，将页面拖动到下方，会看到模拟请求按钮：
image.png
点击一下该按钮，会进行一个模拟登录：
image.png
地址栏中的地址就是我们需要跳转的页面，将地址复制下来：

https://gitee.com/oauth/authorize?client_id=52908197466cd3008db76a6018de66c8d222656056fa78b26dd58d1f4fa0a606&redirect_uri=http%3A%2F%2Flocalhost%3A8080%2Fsuccess&response_type=code

里面总共有3个参数，分别是：

  1. client_id
  2. redirect_uri
  3. response_type

其中client_id在创建完应用之后便会提供给我们：
image.png
也就是地址上的内容，而redirect_uri是在点击了同意授权按钮之后需要跳转的页面，即：登录成功之后，需要跳转至成功后的页面，最后是response_type，它表示响应类型为一个授权码。

来了解一下授权码的作用，当用户点击了同意授权按钮之后，Gitee服务器会给redirect_uri指向的页面传递一个授权码，此时就可以接收到这个授权码，再去换取AccessToken，只有获取到了AccessToken，才能够获取到Gitee中当前用户的某些信息。

点击了同意授权按钮后：
image.png
得到了授权码后，通过该地址能够换取AccessToken：

https://gitee.com/oauth/token?grant_type=authorization_code&code={code}&client_id={client_id}&redirect_uri={redirect_uri}&client_secret={client_secret}

该地址要求以Post形式请求，使用PostMan测试一下，将参数按要求设置好：
image.png
得到相应结果：

{
  "access_token": "cd2c33c3fe548a23188159f87da70110",
  "token_type": "bearer",
  "expires_in": 86400,
  "refresh_token": "c95a38ab2357638ffc4dc6f09c623f2333e0930a37dec8e2f191a40d7afd3514",
  "scope": "user_info",
  "created_at": 1627974370
}

得到了AccessToken之后，就可以获取到用户在Gitee中已经授权的任何信息了。

整个授权认证的过程如下图所示：
image.png

实现登录流程

熟悉了整合流程之后，我们用代码来实现一下，首先修改页面：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>
    <form>
      用户名:<input type="text"/><br/>
      密码:<input type="password"/><br/>
      <a href="https://gitee.com/oauth/authorize?client_id=52908197466cd3008db76a6018de66c8d222656056fa78b26dd58d1f4fa0a606&redirect_uri=http%3A%2F%2Flocalhost%3A8080%2Fsuccess&response_type=code">Gitee登录</a>
      <input type="submit" value="登录"/><br/>
    </form>
  </body>
</html>

现在超链接的地址经过修改后就能成功跳转至Gitee授权页面了，因为授权成功后跳转的地址为 http://localhost:8080/success ，所以需要来处理一下这个请求，创建一个控制器：

@Controller
public class LoginController {

    @GetMapping("/success")
    public String login(@RequestParam("code") String code){
        System.out.println(code);
        return "success";
    }
    
    @GetMapping("/")
    public String index(){
        return "index";
    }
}

当授权成功后我们让其跳转至success.html页面，并接收Gitee传递过来的授权码，所以创建success.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>
    <h1>登录成功！</h1>
  </body>
</html>

启动项目测试一下：
image.png
点击同意授权后确实登录成功了，控制台也输出了授权码：

e907fd92d8392ebcd72dff321da45115ff0fba2dec0e6918b233ec7d03b76e5d

其实到这里登录流程还没有结束，因为如果使用第三方应用登录的话，平台会使用第三方应用的一些信息，比如账号、头像等直接作为当前平台的登录名和头像，所以我们还需要获取用户在Gitee中的一些信息。

此处参考Gitee的API文档：
image.png
比如获取授权用户的资料信息：
image.png
它需要传递一个access_token作为参数，那我们要做的就是使用授权码去得到access_key：

@Controller
public class LoginController {

    @GetMapping("/success")
    public String login(@RequestParam("code") String code, Map<String,String> map) {
        // 获取accesskey
        String accessKey = getAccessKey(code);
        System.out.println(accessKey);
        // 通过accessKey获取用户信息
        String userInfo = getUserInfo(accessKey);
        // 取出用户名
        String name = (String) JSONObject.parseObject(userInfo).get("name");
        // 取出头像
        String avatar_url = (String) JSONObject.parseObject(userInfo).get("avatar_url");
        // 放入请求域
        map.put("name",name);
        map.put("avatar_url",avatar_url);
        return "success";
    }

    /**
     * 获取用户信息
     */
    private String getUserInfo(String accessKey) {
        String json = "";
        OkHttpClient client = new OkHttpClient();
        // 通过该地址能够获取到用户信息
        String url = "https://gitee.com/api/v5/user?access_token=" + accessKey;
        Request request = new Request.Builder()
                .get()
                .url(url).build();
        try {
            Response response = client.newCall(request).execute();
            json = response.body().string();
        } catch (IOException e) {
            e.printStackTrace();
        }
        return json;
    }

    /**
     * 获取AccessKey
     */
    private String getAccessKey(String code) {
        OkHttpClient client = new OkHttpClient();
        // 通过该地址能够获取到access_token
        String url = "https://gitee.com/oauth/token";
        // 封装请求参数
        RequestBody requestBody = new FormBody.Builder()
                .add("grant_type", "authorization_code")
                .add("code", code)
                .add("client_id", "52908197466cd3008db76a6018de66c8d222656056fa78b26dd58d1f4fa0a606")
                .add("redirect_uri", "http://localhost:8080/success")
                .add("client_secret", "7e84401a9752e88d22d5450c1687ca6a19bc34f45fe3452cefd33312d8153978")
                .build();

        Request request = new Request.Builder()
                .post(requestBody)
                .url(url).build();
        String accessKey = "";
        try {
            Response response = client.newCall(request).execute();
            String json = response.body().string();
            // 获取json串中的access_token属性
            accessKey = (String) JSONObject.parseObject(json).get("access_token");
        } catch (IOException e) {
            e.printStackTrace();
        }
        return accessKey;
    }

    @GetMapping("/")
    public String index() {
        return "index";
    }
}

success.html页面需要显示用户信息：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>
    <h1>登录成功！</h1>
    <h1>用户名:<span th:text="${#request.getAttribute('name')}"></span></h1>
    <img th:src="${#request.getAttribute('avatar_url')}">
  </body>
</html>

效果如下：
image.png
事实上，登录流程远没有这么简单，当用户取消授权时就不能让其登录，程序里还没有加上这类判断，对于从未注册过的用户来说，这次登录就相当于一次注册，所以还需要以Gitee中用户的某些信息作为注册信息进行登录，当已经注册过的用户使用第三方登录时，要让其正常登录。

文章标签：
Java
数据安全/隐私保护
安全
API
开发者
~wangweijun
目录
相关文章
破浪前进
|
8月前
|
存储 JavaScript 开发工具
uniapp-实现微信授权登录
uniapp-实现微信授权登录
破浪前进
2324 0
Kissship
|
存储 小程序 前端开发
微信小程序进阶——后台交互个人中心授权登录
微信小程序进阶——后台交互个人中心授权登录
Kissship
196 0
君易--鑨
|
存储 小程序 数据库
【微信小程序开发】之微信授权登陆
【微信小程序开发】之微信授权登陆
君易--鑨
613 0
如夜了我衣衫太薄便归家靠路灯
|
5月前
|
存储 前端开发 安全
Uniapp 微信公众号授权登录指南
Uniapp 微信公众号授权登录指南
如夜了我衣衫太薄便归家靠路灯
747 1
破浪前进
|
8月前
|
开发者
uniapp-微信授权登录
uniapp-微信授权登录
破浪前进
326 0
默海笑
|
XML 缓存 NoSQL
手把手实现第三方社交登录方式微信登录
手把手实现第三方社交登录方式微信登录
默海笑
176 0
Lux_Sun
|
开发工具
微信授权 & 扫码登录 - 快速入门（手动 & 第三方SDK）(二）
微信授权 & 扫码登录 - 快速入门（手动 & 第三方SDK）(二）
Lux_Sun
380 0
灬沙师弟
|
存储 缓存 小程序
微信开发之-登录
微信开发之-登录
灬沙师弟
113 0
逻辑峰
|
小程序 数据库
结合若依框架实现微信小程序授权登录
结合若依框架实现微信小程序授权登录
逻辑峰
1558 0
孙不坚1208
|
SQL 小程序 前端开发
手把手教你做微信小程序授权登录交互(二)
手把手教你做微信小程序授权登录交互(二)
孙不坚1208
222 0
手把手教你做微信小程序授权登录交互(二)