vue.js + springboot-网站应用接入GitHub第三方登录

最新推荐文章于 2024-04-27 21:49:52 发布

云大牛1024

最新推荐文章于 2024-04-27 21:49:52 发布

阅读量853

点赞数

分类专栏： java

本文链接：https://blog.csdn.net/qq_43599835/article/details/102371555

版权

java 专栏收录该内容

48 篇文章 0 订阅

订阅专栏

转载 https://www.byteblogs.com/article/162

JAVA-网站应用接入GitHub第三方登录
相对网站应用接入 QQ 登录，简单很多，Github 直接创建应用就可以用，不需要长时间的审核

GitHub 开发者官方文档：https://developer.github.com/apps/building-oauth-apps/authorizing-oauth-apps/

（一）准备，创建应用

（1）开打开发者（不需要审核）
访问：https://github.com/settings/profile

（2）创建应用

（3）填写信息

（三）后台处理流程
（1）前端请求登录，无参数
（2）后端重定向到

地址：https://github.com/login/oauth/authorize
参数：client_id=（AppID）
redirect_uri=（回调地址）
state=（原样返回）

返回时

code=（授权码）
state=（原样返回）

（3）返回回调地址，通过 Authorization Code 获取 AccessToken

请求地址：https://github.com/login/oauth/access_token
参数：client_id=（AppId）
client_secret=（密钥）
code=（回调地址携带的 code）
redirect_uri=（回调地址，和上面回调地址一样）

返回时

access_token=（访问授权码）
token_type=bearer（固定）

（4）通过 access_token 获取用户信息

请求地址：https://api.github.com/user
参数：access_token（返回的访问授权码）

前端vue处理：

先需要使用window.open打开窗口

export function openWindow(url, title, w, h) {
  // Fixes dual-screen position                            Most browsers       Firefox
  const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left
  const dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top

  const width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width
  const height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height

  const left = ((width / 2) - (w / 2)) + dualScreenLeft
  const top = ((height / 2) - (h / 2)) + dualScreenTop
  const newWindow = window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left)

  // Puts focus on the newWindow
  if (window.focus) {
    newWindow.focus()
  }
}

然后拿到后面返回的数据，去请求登录

    loginGithub () {

     // 获取请求的地址  https://github.com/login/oauth/authorize？client_id=xxx
      this.$store.dispatch("xxx").then(res => {
          openWindow(res.model.authorizeUrl,"github",540,540)
          window.addEventListener('message', this.loginGithubHandler, false);
      })
    },
    loginGithubHandler(e) {
      let { socialId } = e.data;
      if (socialId) {
        this.$store.dispatch("xxxx", e.data).then(res =>{
            window.removeEventListener('message',this.loginGithubHandler,false)
        })
      }
    }

后端java处理：

 @Override
    public String saveUserByGithub(String code, String state) {
        log.debug("code {},state {}", code, state);

        GithubOauth githubOauth = new GithubOauth();
        String accessToken = githubOauth.getAccessToken(code);
        Map<String, Object> objectObjectMap = JsonUtil.parseHashMap(accessToken);
        String userInfo = githubOauth.getUserInfo((String) objectObjectMap.get("access_token"));
        GithubVO githubVO = JsonUtil.parseObject(userInfo, GithubVO.class);

        // 初始化用户
        if (usersOpenOauth == null) {
          ......
        }

        result.put("socialId", githubVO.getId());

       // vue前端获取这个数据，去登录。
        String html = "<head>\n" +
                "  <meta charset=\"UTF-8\">\n" +
                "</head>" +
                "<body>\n" +
                "   <p style=\"text-align: center;\"><h3>登录中....</h3></p>\n" +
                "</body>" +
                "\n" +
                "  window. function () {\n" +
                "    var message =" + JsonUtil.toJsonString(result) + ";\n" +
                "    window.opener.parent.postMessage(message, '*');\n" +
                "    parent.window.close();\n" +
                "  }\n" +
                "\n";

        return html;
    }

  
    private static final String AUTH_URL = "https://github.com/login/oauth/authorize";
    private static final String TOKEN_URL = "https://github.com/login/oauth/access_token";
    private static final String USER_INFO_URL = "https://api.github.com/user";

   public String getAccessToken(String code) {
        Map<String, Object> params = new HashMap<>();
        params.put("code", code);
        params.put("client_id", getClientId());
        params.put("client_secret", getClientSecret());
        HttpRequest post = HttpRequest.post(TOKEN_URL);
        post.body(JsonUtil.toJsonString(params)).contentType("application/json").header(Header.ACCEPT, "application/json");
        String result = post.execute().body();
        log.debug("github -> getAccessToken -> result -> {}", result);
        return result;
    }

这样基本就可以了。

vue实现可以参考

https://github.com/byteblogs168/theme-default/blob/1.x/src/components/Login.vue

云大牛1024

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
vue.js + springboot-网站应用接入GitHub第三方登录

转载 https://www.byteblogs.com/article/162JAVA-网站应用接入GitHub第三方登录相对网站应用接入 QQ 登录，简单很多，Github 直接创建应用就可以用，不需要长时间的审核GitHub 开发者官方文档：https://developer.github.com/apps/building-oauth-apps/authorizing-oauth-...
复制链接

扫一扫

专栏目录