플러터로 macOS 앱 만들기

플러터 codelab에서는 macOS 앱 예제로 Github Client 프로젝트를 다루고 있습니다. 이 프로젝트에서는 Github에서 OAuth2 app을 만들고 이 때 생성된 Client ID와 Client secret을 이용해 로그인에 사용하고 있습니다. 프로젝트를 완성하고 앱을 돌려보면 데스크탑 앱에서 로그인 버튼을 누르고 웹 브라우저로 전환되어 인증을 마친 뒤, 다시 데스크탑 앱으로 전환되는 과정을 확인할 수 있습니다.

프로젝트에서는 2가지 앱을 사용하는데, Github Client가 메인 앱이고, Windows to Front라는 플러그인을 만들어 Github 인증을 마치고 리다이렉트시 다시 데스크탑 앱인 Github Client로 돌아오게 해줍니다. 사용자 경험이 굉장히 좋은 앱이기 때문에 한 번 따라해보시길 추천해드립니다! 

 

Github에서 OAuth 설정

Github에서 OAuth App은 Settings 하위 Developer settings 메뉴에 있습니다.

'Generate a new client'를 눌러서 secret을 생성해줍니다.

Client secret이 추가된 걸 확인할 수 있습니다.

생성된 Client ID와 secret은 github_oauth_credentials.dart 파일에 붙여넣어 줍니다.

 

주요 코드 확인하기

데스크탑에서 HTTP redirect server 구현

이 프로젝트에서는 HTTP Client를 통해 OAuth2 인증 후에 정보를 받고 이 정보를 Redirect Server에 넘겨서 브라우저에 response로 "Authenticated! You can close this tab." 문자열을 뿌려주는 과정을 github_login.dart 파일에서 다루고 있습니다.

 

브라우저 인증 완료 후 데스크탑 앱 활성화시키기

MacOS에서는 Windows to Front에 대한 플러그인을 만드는데 이 플러그인 내부에서 NSApplication의 activate 함수를 호출해 현재 app stack에서 Github Client 앱을 화면 최상단으로 끌어오게 됩니다. Github Client 앱에서는 Windows to Front 플러그인을 호출해 Github 인증이 끝난 브라우저에서 Github Client 앱으로 포커스를 옮겨옵니다. 데스크탑과 웹이 연동된 개발 시에 굉장히 유용하게 사용할 수 있을 것 같네요.

 

완성된 앱 확인하기

완성된 앱은 다음과 같습니다. Github 로그인 버튼 클릭을 클릭하면 브라우저로 이동해 OAuth2 흐름을 타고 Github과의 연동을 마친 뒤 다시 데스크탑 앱으로 돌아와 화면에 가져온 목록을 보여주는 모습입니다.

 

앱 실행시 초기화면

데스크탑 앱에서 Github 연결 시도

 

인증 완료 후 github 저장소 목록을 가져오는 화면