Reprinted www.byteblogs.com/article/162

JAVA- Website application access GitHub third-party login compared to website application access QQ login, much easier, GitHub directly create the application can be used, does not need a long time of approval

Making developers official documentation: developer.github.com/apps/buildi…

(1) Prepare and create an application

(1) Open developers (no review required) visit: github.com/settings/pr…

(2) Create an application

(3) Fill in the information

(3) Background processing process (1) front-end request login, no parameters (2) back-end redirection to

Address: github.com/login/oauth… Parameter: client_id= (AppID) redirect_URI = (callback address) state= (unreturned)

return

Code = (Authorization code) state= (as-is return)

(3) Return the callback address and obtain AccessToken through the Authorization Code

Request address: github.com/login/oauth… Parameter: client_id= (AppId) client_secret= (key) code= (code carried by callback address) redirect_URI = (callback address, same as above)

return

Access_token = (access authorization code) TOken_type =bearer

(4) Obtain user information through access_token

Request address: api.github.com/user Parameter: access_token (returned access authorization code)

Front-end VUE processing:

  1. Need to usewindow.openOpen the window
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()
  }
}
Copy the code

Then get the data back and ask to log in

    loginGithub () {

     / / get request the address of the 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)}}}Copy the code

Back-end Java processing:

 @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);

        // Initialize the user
        if (usersOpenOauth == null) {... } result.put("socialId", githubVO.getId());

       // The vUE front end gets this data and logs in.
        String html = "<head>\n" +
                " 
      \n" +
                "</head>" +
                "<body>\n" +
                " 
 Log in to.... 
\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;
    }

Copy the code
  
    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;
    }
Copy the code

That’s pretty much it.

Vue implementation can be referenced

Github.com/byteblogs16…