Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to use three-party Github to do authorization login", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "how to use three-party Github to do authorization login" bar!

First, authorization process 2, identity registration 3, authorization development 1, obtaining authorization code

In order to better see the effect, I handled the authorization code rudely and assembled the authorization link directly in JS, but security must be taken into account in the actual work and development.

Https://github.com/login/oauth/authorize?

Client_id=ad41c05c211421c659db&

Redirect_uri= http://47.93.6.5:8080/authorize/redirect

The logic of the front-end vue is also very simple, requiring only a _ window.location.href redirection.

Export default {

Methods: {

LoginByGithub: function () {

_ window.location.href = 'https://github.com/login/oauth/authorize?client_id=ad41c05c211421c659db&redirect_uri=http://47.93.6.5:8080/authorize/redirect'

}

}

}

After the request, we will be prompted for authorization, and after agreeing to the authorization, we will be redirected to authorize/redirect with the authorization code code;. If we have previously agreed, we will skip this step and call back directly.

2. Get the token

Immediately after authorization, call back the fire website API. After getting the authorization code, assemble the request link to obtain the token access_token. In this case, the client key client_secret will be used.

Https://github.com/login/oauth/access_token?

Client_id=$ {clientID} &

Client_secret=$ {clientSecret} &

Code=$ {requestToken}

Access_token will be returned as a response to the request, and the result is a string of characters that we need to intercept.

Access_token=4dc43c2f43b773c327f97acf5dd66b147db9259c&scope=&token_type=bearer

After you have the token, you start to get the user information, and you should bring access_token in the API.

Https://api.github.com/user?access_token=4dc43c2f43b773c327f97acf5dd66b147db9259c

The returned user information is in JSON data format. If you want to pass the data to the front end, you can redirect it to the front end page through url and pass the data as parameters.

{

"login": "chengxy-nds"

"id": 12745094

"node_id":

"avatar_url": "https://avatars3.githubusercontent.com/u/12745094?v=4","

"gravatar_id":

"url": "https://api.github.com/users/chengxy-nds","

"html_url": "https://github.com/chengxy-nds","

"followers_url": "https://api.github.com/users/chengxy-nds/followers","

"following_url": "https://api.github.com/users/chengxy-nds/following{/other_user}","

"gists_url": "https://api.github.com/users/chengxy-nds/gists{/gist_id}","

"starred_url": "https://api.github.com/users/chengxy-nds/starred{/owner}{/repo}","

"subscriptions_url": "https://api.github.com/users/chengxy-nds/subscriptions","

"organizations_url": "https://api.github.com/users/chengxy-nds/orgs","

"repos_url": "https://api.github.com/users/chengxy-nds/repos","

"events_url": "https://api.github.com/users/chengxy-nds/events{/privacy}","

"received_events_url": "https://api.github.com/users/chengxy-nds/received_events","

"type":

"site_admin": false

"name": "something inside the programmer"

"company": null

"blog":

"location": null

"email":

"hireable": null

"bio": null

"twitter_username": null

"public_repos": 7

"public_gists": 0

"followers": 14

"following": 0

"created_at": "2015-06-04T09:22:44Z"

"updated_at": "2020-07-13T06:08:57Z"

}

The following is the GitHub callback our fire site back-end processing process part of the code, written relatively rough, follow-up to continue to optimize it!

/ * *

* @ param code

* @ author xiaofu

* @ description authorization callback

* @ date 15:42 on 2020-7-10

, /

@ RequestMapping ("/ authorize/redirect")

Public ModelAndView authorize (@ NotEmpty String code) {

Log.info ("authorization code code: {}", code)

/ * *

* return to the front-end home page

, /

String redirectHome = "http://47.93.6.5/home";

Try {

/ * *

* 1. Assemble and obtain accessToken url

, /

String accessTokenUrl = gitHubProperties.getAccesstokenUrl ()

.replace ("clientId", gitHubProperties.getClientId ())

.replace ("clientSecret", gitHubProperties.getClientSecret ())

.replace ("authorize_code", code)

/ * *

* return token directly in the returned result

, /

String result = OkHttpClientUtil.sendByGetUrl (accessTokenUrl)

Log.info ("request token result: {}", result)

String accessToken = null

Pattern p = Pattern.compile ("= (\\ w+) &")

Matcher m = p.matcher (result)

While (m.find ()) {

AccessToken = m.group (1)

Log.info ("token token: {}", m.group (1))

Break

}

/ * *

* after successfully obtaining token, start to request user information

, /

String userInfoUrl = gitHubProperties.getUserUrl () .replace ("accessToken", accessToken)

String userResult = OkHttpClientUtil.sendByGetUrl (userInfoUrl)

Log.info ("user Information: {}", userResult)

UserInfo userInfo = JSON.parseObject (userResult, UserInfo.class)

RedirectHome + = "? name=" + userInfo.getName ()

} catch (Exception e) {

Log.error ("authorization callback exception = {}", e)

}

Return new ModelAndView (new RedirectView (redirectHome))

}

Finally, let's take a look at the overall authorization process. Due to the slow access speed of GitHub, there is an occasional request timeout.

Thank you for your reading, the above is the content of "how to use three-party Github to do authorized login". After the study of this article, I believe you have a deeper understanding of how to use three-party Github to do authorized login, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.