으로 마지막의 마지막에 언급 한 기사 "OAuth2.0에 네 가지 인증 방법" , 존재의 물결이 될 것이다 실제 에서 전투 후속 OAuth2.0, 그것은 몇 일 동안 지연되었습니다.
최근에 나는 내 자신의 오픈 소스 프로젝트 (작업입니다 fire). 의 프런트 엔드 및 백 엔드 분리 프레임 워크 Springboot +는 vue단지 건설되었습니다. 난 그냥 로그인 기능을 수행하기 시작, 나는 일반 계정 암호 로그인이 너무 단순하고 의미가 있다고 생각합니다. 조금 더 높은 GitHub인증 및 人脸识别기타 로그인 방법 을 추가하기로 결정했습니다 .
여기에 사진 설명 삽입
GitHub인증 로그인을 사용하는 일이 OAuth2.0가장 복잡한 인증 코드 모드를 에 당신과 함께 공유에 내 경우를 취할, 중간 OAuth2.0, 내가 클라우드 서비스 프로젝트를 배포 한 인증 프로세스를, 기사의 끝 부분에 미리 주소가, 친구, 후속 프로젝트를 경험할 수 있습니다 기능은 계속 업데이트됩니다.
1. 승인 절차
특정 GitHub인증 로그인 OAuth2.0에 앞서 인증 코드 모드의 인증 과정을 간략히 살펴 보도록하겠습니다 . fire 웹 사이트에서 GitHub 계정으로 로그인 을 허용 한다면 대략 다음과 같은 과정입니다.
여기에 사진 설명 삽입
사용자는 GitHub 계정으로 fire 웹 사이트 에 로그인 하려고 합니다 .
fire웹 사이트는 먼저 사용자에게GitHub인증으로 이동하도록 요청하면 인증 상자가 나타납니다.- 사용자가 동의 하면 웹 사이트로 다시 리디렉션 되고 인증 코드
GitHub가 반환됩니다.redirect_urifire fire웹 사이트는 인증 코드와 클라이언트 키client_secret를 사용하여 GitHubtoken에서 토큰을 요청 하고 확인은 반환 된 토큰을 전달합니다.- 마지막으로
fire웹 사이트GitHub는 데이터를 요청하고 GitHub에 대한 모든 호출API은 토큰을 가져와야합니다.
2. 신원 등록
승인 로직을 분류 한 후에도 몇 가지 준비가 있습니다.
사이트 OAuth라이센스 를 얻으려면 웹 사이트 ID 등록으로 이동하여 응용 프로그램의 식별 번호 ClientID 와 ClientSecret.
포털을 등록하려면 https://github.com/settings/applications/1334665몇 가지 필수 필드가 있습니다.
Application name: 우리의 응용 프로그램 이름;Homepage URL: 응용 프로그램 홈페이지 링크;Authorization callback URL:github인증 코드와 토큰을 받기 위해 콜백 할 프로젝트의 주소입니다.
제출 후 클라이언트 ClientID 및 클라이언트 키 ClientSecret가 표시되고 준비가 완료되었습니다.
여기에 사진 설명 삽입
세, 공인 개발
1. 인증 코드 받기
효과를 더 잘보기 위해 인증 코드를 좀 더 거칠게 다루고 JS인증 링크를 직접 조립했지만 실제 작업 개발시 보안 문제를 고려해야합니다.
https://github.com/login/oauth/authorize?
client_id=ad41c05c211421c659db&
redirect_uri=http://47.93.6.5:8080/authorize/redirect
프런트 엔드 vue 로직도 매우 간단하므로 window.location.href 리디렉션 만하면 됩니다.
<script>
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'
}
}
}
</script>
요청 후 승인하라는 메시지가 표시됩니다. 승인에 동의 authorize/redirect하면 승인 코드 로 리디렉션되어 전달 됩니다 code. 이전에 동의 한 경우이 단계를 건너 뛰고 직접 전화를 겁니다.
여기에 사진 설명 삽입
2. 토큰 받기
인증 직후 fire 웹 사이트 인터페이스 access_token를 다시 호출 하고 인증 코드를 획득 한 후 토큰 획득을위한 요청 링크 를 조립하며 이때 클라이언트 키가 사용됩니다 client_secret.
https://github.com/login/oauth/access_token?
client_id=${clientID}&
client_secret=${clientSecret}&
code=${requestToken}
access_token 요청 응답으로 반환되며, 결과는 문자열이므로 가로 채야합니다.
access_token=4dc43c2f43b773c327f97acf5dd66b147db9259c&scope=&token_type=bearer
토큰을받은 후 사용자 정보를 가져 오십시오.이 정보 API 는 함께 가져와야합니다 access_token.
https://api.github.com/user?access_token=4dc43c2f43b773c327f97acf5dd66b147db9259c
반환 된 사용자 정보는 JSON 데이터 형식입니다. 데이터를 프런트 엔드로 전달하려는 경우 url 프런트 엔드 페이지 로 리디렉션하여 데이터를 매개 변수로 전달할 수 있습니다 .
{
"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": "程序员内点事",
"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"
}
아래는 GitHub 당사 fire웹 사이트의 백엔드 처리 프로세스를 호출하는 코드의 일부입니다. 코드는 다소 거칠기 때문에 계속해서 최적화하십시오!
/**
* @param code
* @author xiaofu
* @description 授权回调
* @date 2020/7/10 15:42
*/
@RequestMapping("/authorize/redirect")
public ModelAndView authorize(@NotEmpty String code) {
log.info("授权码code: {}", code);
/**
* 重新到前端主页
*/
String redirectHome = "http://47.93.6.5/home";
try {
/**
* 1、拼装获取accessToken url
*/
String accessTokenUrl = gitHubProperties.getAccesstokenUrl()
.replace("clientId", gitHubProperties.getClientId())
.replace("clientSecret", gitHubProperties.getClientSecret())
.replace("authorize_code", code);
/**
* 返回结果中直接返回token
*/
String result = OkHttpClientUtil.sendByGetUrl(accessTokenUrl);
log.info(" 请求 token 结果：{}", result);
String accessToken = null;
Pattern p = Pattern.compile("=(\\w+)&");
Matcher m = p.matcher(result);
while (m.find()) {
accessToken = m.group(1);
log.info("令牌token：{}", m.group(1));
break;
}
/**
* 成功获取token后，开始请求用户信息
*/
String userInfoUrl = gitHubProperties.getUserUrl().replace("accessToken", accessToken);
String userResult = OkHttpClientUtil.sendByGetUrl(userInfoUrl);
log.info("用户信息：{}", userResult);
UserInfo userInfo = JSON.parseObject(userResult, UserInfo.class);
redirectHome += "?name=" + userInfo.getName();
} catch (Exception e) {
log.error("授权回调异常={}", e);
}
return new ModelAndView(new RedirectView(redirectHome));
}
마지막으로 동영상으로 전체 인증 프로세스를 살펴 보겠습니다. GitHub비교적 느린 액세스 속도 로 인해 가끔 요청이 시간 초과 될 수 있습니다.
여기에 사진 설명 삽입
온라인 미리보기 주소 :, http://47.93.6.5/login 경험에 오신 것을 환영합니다 ~
프로젝트 GitHub 주소 :https://github.com/chengxy-nds/fire.git
요약하자면
전체 GitHub인증 로그인 과정 의 관점 OAuth2.0에서 인증 코드 모드는 비교적 간단합니다. 한 번의 GitHub로그인 을 이해 하면 WeChat, Bib 등 3 자 로그인이 가능합니다. 완전히 비슷하고 관심있는 학생들이 사용해 볼 수 있습니다. 테스트.