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

Javascript

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

pjc0247 2016. 1. 28. 16:10

로컬에서 동작하는 웹앱에서도 제공되는 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