Github第三方登陆详细流程及实现

Github第三方登陆详细流程及实现

一、 流程图

Github第三方登陆详细流程及实现_第1张图片

二、具体实现步骤

Ⅰ、创建OAuth App

  1. 我们首先需要创建一个OAuth App,根据下图的步骤点击即可

Github第三方登陆详细流程及实现_第2张图片

  1. 依次填写信息,然后点Register application

Github第三方登陆详细流程及实现_第3张图片

  1. 然后我们可以看到会生成一个id和密码,后面我们会用得到,尽量不要让别人看到了(我这里是测试用的,后续会删除)

Github第三方登陆详细流程及实现_第4张图片

Ⅱ、写后台代码,我这里用Spring Boot

  1. 写一个超链接用作登陆按钮,以及两个实体类
登陆
public class AccessTokenDto {
    private String client_id; //客户端ID。
    private String client_secret; //客户端密钥
    private String code; //作为对步骤 1 的响应而接收的代码。
    private String redirect_uri; //应用程序中的用户在授权后发送的URL
    private String state; //在步骤 1 中提供的不可猜测的随机字符串
    //省略getter setter
}
public class GithubUser {
    private Long id;
    private String name;
    private String bio;
    //省略getter setter
}
  1. Controller
@Controller
public class AuthoriseController {

    @Autowired
    private GithubProvider githubProvider;

    @Autowired
    private GithubParams githubParams;

    @GetMapping("/callback")
    public String callback(@RequestParam("code") String code,
                           @RequestParam("state") String state){
        AccessTokenDto accessTokenDto = new AccessTokenDto();
        accessTokenDto.setClient_id(githubParams.getClient_id());
        accessTokenDto.setClient_secret(githubParams.getClient_secret());
        accessTokenDto.setCode(code);
        accessTokenDto.setRedirect_uri(githubParams.getRedirect_uri());
        accessTokenDto.setState(state);
        //获取access_token
        String access_token = githubProvider.getAccessToken(accessTokenDto);
        //根据accessToken获取用户信息
        GithubUser githubUser = githubProvider.getGithubUser(access_token);
        System.out.println(githubUser.getName());

        return "index";
    }
}
  1. 你需要导入两个maven依赖


    com.squareup.okhttp3
    okhttp
    3.6.0




    com.alibaba
    fastjson
    1.2.62
  1. GithubProvider(用于获取access_token和user信息)
@Component
public class GithubProvider {
    @Autowired
    private GithubParams githubParams;

    /**
     * 获取AccessToken
     */
    public String getAccessToken(AccessTokenDto accessTokenDto) {
        OkHttpClient client = new OkHttpClient();
        MediaType mediaType = MediaType.parse("application/json; charset=utf-8");
        //将accessTokenDto转为json字符串传入参数
        RequestBody body = RequestBody.create(mediaType, JSON.toJSONString(accessTokenDto));
        Request request = new Request.Builder()
                .url(githubParams.getToken_uri())
                .post(body)
                .build();
        try (Response response = client.newCall(request).execute()) {
            String str = response.body().string();
            //得到的是类似这样的字符串,我们需要将它分割,只要access_token部分
            //access_token=9566ba3483a556c610be42d44338f3fd16a3b8d1&scope=&token_type=bearer
            return str.split("&")[0].split("=")[1];
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

    /**
     * 根据access_token获取用户信息
     */
    public GithubUser getGithubUser(String access_token) {
        OkHttpClient client = new OkHttpClient();
        Request request = new Request.Builder()
                .url(githubParams.getUser_uri() + "?access_token=" + access_token)
                .build();

        try (Response response = client.newCall(request).execute()) {
            //得到的是json字符串,因此需要转为GithubUser对象
            return JSON.parseObject(response.body().string(), GithubUser.class);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return null;
    }
}
  1. GithubParams,配置参数
@Component
@ConfigurationProperties(prefix = "github")
public class GithubParams {

    private String client_id;
    private String client_secret;
    private String redirect_uri;
    private String token_uri;
    private String user_uri;
    //省略getter setter
}
  1. 配置文件application.properties
server.port=8087
github.client_id=你生成的id
github.client_secret=你生成的密码
github.redirect_uri=http://localhost:8887/callback
github.token_uri=https://github.com/login/oauth/access_token
github.user_uri=http://localhost:8887/callback

三、运行效果

github访问稍慢,请耐心等待

Github第三方登陆详细流程及实现_第5张图片

Github第三方登陆详细流程及实现_第6张图片

看你的控制台,正常情况下会输出你的Github设置的姓名

Github第三方登陆详细流程及实现_第7张图片

四、文献

参考:Github官方文档

你可能感兴趣的:(Github第三方登陆详细流程及实现)