[ 그림 1 ]
Settings/Developer settings 에서 [ 그림 1 ] 의 OAuth Apps 에서
Github OAuth APP 을 생성할 수 있습니다.
[ 그림 2 ]
New OAuth App 버튼을 클릭하면, [ 그림 2 ] 하단에 입력 양식을 기입해야 하는데 노란색으로 표기된 부분은 똑같이 기입해야 프로젝트 실행 간 정상적으로 테스트가 가능합니다.
[ 그림 3 ]
Github OAuth App 을 생성하고 나면, [ 그림 3 ] 과 같이 클라이언트 아이디가 발급된 것을 확인할 수 있습니다. 처음 애플리케이션을 만들고 난 뒤에는 시크릿 아이디는 바로 발급된 상태로 있지 않고 따로 시크릿 아이디를 발급 받아야 합니다.
프로젝트 환경 설정에서는 Github OAuth App 생성 후 발급 받은 클라이언트 아이디와 시클릿 아이디를 설정 파일에 적용해야 합니다.
① application-oauth.yml 파일 생성
security:
profiles:
include: oauth
프로젝트에 application.yml 의 설정 내용을 보면, application-oauth.yml 파일이 있어야 하지만 현재 프로젝트에는 보안 목적으로 파일이 없는 상태입니다. 따라서 따로 해당 파일을 생성한 뒤 설정 내용을 추가해야 합니다.
security:
github:
client:
id: {Client_ID} # 발급 받은 클라이언트 아이디
secret: {Client_Secret} # 발급 받은 시크릿 아이디
url:
redirect: http://localhost:8080/api/afterlogin
oauth: https://github.com
api: https://api.github.com
application-oauth.yml 파일을 생성한 뒤, 위와 같이 추가 해주면 됩니다.
② index.html 에 클라이언트 아이디 설정
<button>
<a href="https://github.com/login/oauth/authorize?client_id={발급 받은 클라이언트 아이디}&scope=name">
Github Login
</a>
</button>
index.html 내에서 발급 받은 클라이언트 아이디를 지정할 곳을 찾아 값을 바꿔주시면 됩니다.
[ 그림 4 ]
localhost:8080 에 접속하면 [ 그림 4 ] 와 같이 Github 로그인 버튼이 보입니다.
[ 그림 5 ]
Github 로그인 버튼을 클릭하면, 유저로부터 Github 인증 페이지로 이동합니다.
[ 그림 6 ]
인증 성공 뒤에는, 앞서 [ 그림 2 ] 에서 설정한 리다이렉트 URL을 통해 OAuthController.class 에 위치한 API가 호출됩니다. 해당 API는 Github 로그인 계정의 닉네임을 가져오기 위해 api.github.com/users 를 호출한 뒤 [ 그림 6 ] 의 결과 값 형태로 반환합니다.