Cloudflare Access에 GitHub 로그인 연결

개요

Access 설정 이후에 하루 한 번이지만 이메일을 수신하여 인증하는 것이 점점 귀찮아지기 시작했다. 그래서 GitHub 로그인을 연결하여 손쉽게 인증하도록 설정해보고자 한다.

먼저 Cloudflare Zero Trust 메뉴에서 설정 > 인증메뉴로 접속한다. 그리고 아래와 같이 새 항목 추가를 눌러 새로운 로그인 방법을 추가할 수 있다.

GitHub 외에도 흔히 사용하는 Okta, Google Workspace 등등 다양한 방법이 있는데, 개인 용도의 설정으로는 GitHub가 가장 무난한 것 같다.

그러면 Client ID, Client secret 입력 화면과 GitHub에서의 설정 매뉴얼이 나타난다. 지금 화면은 그대로 두고 GitHub으로 넘어가자.

GitHub 프로필에서 Developer Settings를 통해 OAuth Apps 메뉴로 진입할 수 있다.

그러면 새로 만들기 버튼을 눌러 OAuth app을 하나 생성하도록 하자.

Authorization callback URL: 내 Cloudflare Access URL 뒤에 /cdn-cgi/access/callback 을 붙여준다.

필수값 입력이 완료되었으면 OAuth app을 생성한다. 그러면 아래와 같이 상세 화면이 나타나는데, Generate a new client secret 버튼을 눌러 Client secret을 생성할 수 있다. 필요에 따라서 로고 등의 상세 설정을 추가로 진행한다.

이제 다시 앞에서 열어둔 Cloudflare 화면으로 돌아오도록 하자. 방금 생성한 GitHub OAuth app의 Client ID와 Client secret을 복사해서 입력하도록 한다.

저장하고 인증 화면에서 테스트를 진행해보도록 하자. 이제 Onetime 로그인인 진행하지 않을 예정이므로 미리 삭제했다.

그러면 아래와 같이 GitHub 로그인 화면이 나타나고, 로그인을 진행하면 어떤 이메일 계정으로 로그인 되었는지까지 알려준다.

테스트까지 완료되었으므로 실제 화면으로 넘어가보도록 하자. 토큰이 만료된 Cloudflare Access로 보호되는 페이지에 접속하거나 브라우저에서 Incognito 모드로 접근하면 다음과 같이 GitHub 로그인이 표시되는 로그인 화면을 확인할 수 있다.

로그인 페이지의 화면 설정은 Zero Trust의 설정 > 사용자 설정 페이지에서 진행할 수 있다.

매번 번거롭게 이메일로 인증 코드를 받아서 로그인하는것도 귀찮았는데, 이제 간편하게 GitHub 로그인으로 대체하게 되었다.