[ionic] 로컬 앱 OAuth2 인증 수행하기

로컬에서 동작하는 웹앱에서도 제공되는 REST API등을 사용하기 위해 OAuth 인증(구글, 페이스북 등)을 지원해야 하는 경우가 종종 있습니다.

기본적인 OAuth에서는 로그인 단계에서 로그인 제공자가 앱 개발자쪽으로 콜백을 주는 부분이 있는데 이를 별도의 서버를 두지 않고도, 인앱 브라우저의 이벤트를 구독하여 url을 받아 파싱하는것만으로 처리할 수 있습니다.

예제는 Quizlet.com 의 OAuth를 구현하는것으로 작성하였습니다.

(https://quizlet.com/api/2.0/docs/authorization-code-flow)

예제를 실행하기 위해서는 InAppBrowser 플러그인을 설치해 주세요

// 로그인 버튼을 누르면 실행되야 하는 함수 $scope.login = function () { var clientId = "CLIENT_ID"; var clientSecret = "CLIENT_SECRET"; var requestUri = "http://localhost/callback/"; // 백엔드 서버가 아닌 로컬호스트를 콜백 uri로 설정합니다. var randomStr = btoa(Math.random()); // CSRF 공격을 방지하기 위한 랜덤 난수 키 // 인앱 브라우저 창을 띄웁니다. 이 창에서 OAuth 인증이 수행됩니다. var browserRef = window.cordova.InAppBrowser.open( "https://quizlet.com/authorize?response_type=code&client_id=" + clientId + "&scope=read&state=" + randomStr + "&redirect_uri=" + requestUri); // 에러 리스너를 등록합니다. // 인증 후에 로컬주소로 리다이렉트되면 에러가 발생하니 이를 이용합니다. browserRef.addEventListener("loaderror", function (event) { // 우리가 등록한 콜백일 경우 if ((event.url).indexOf("http://localhost/callback/") === 0) { browserRef.close(); // 일단 창을 닫음 // 콜백 url에는 인증 정보가 담겨있습니다, 이를 파싱합니다. var code = event.url.match(/code=([a-zA-Z0-9]+)/)[1]; var state = event.url.match(/state=([a-zA-Z0-9=+/]+)/)[1]; if (state != randomStr) return; // 받은 코드로부터 액세스 토큰을 요청합니다. $http.post( 'https://api.quizlet.com/oauth/token', { grant_type: 'authorization_code', code: code }, { headers: { 'Authorization': "Basic " + btoa(clientId + ":" + clientSecret) } }) .then(function (e) { console.log(e.data.access_token); console.log(e.data.user_id); }, function (e) { console.log(e.data.error); }); } }); }

***

또한 cordova를 위한 oauth 플러그인이 이미 준비되어 있습니다. 조금 유명한 서비스(깃허브, 구글) 등은 이곳에 이미 구현체가 작성되어 있으니 이걸 사용하시면 됩니다.

https://github.com/nraboy/ng-cordova-oauth