Cordova로 Facebook Login을 연동해보자!

환경

cordova 9.0.0

android 8.1.0

mac

php laravel

개요

일반적인 안드로이드나 ios, web이 아닌 하이브리드에서 페이스북 로그인을 연동해야한다!

개발하는게 다 그렇지만 나는 내가 하나하나 개발하는게 아니라 이렇게 api를 연동하면 내가 개발하는 것보다 2배이상은 삽질을 한다.

먼저 페이스북개발자 사이트에서 app을 만들어준다

https://developers.facebook.com/

여기서 로그인하고 앱을 만들어주면된다

플러그인 설치

그 다음에 plugin을 설치해주는데

https://github.com/jeduan/cordova-plugin-facebook4

페이스북에서 공식으로 만든 plugin이다!

여기서 하라는대로

$ cordova plugin add cordova-plugin-facebook4 --save --variable APP_ID="" --variable APP_NAME=""

플러그인 오류

하지만 plugin 설치후 오류가 발생했다. APP_ID 또는 APP_NAME이 무엇인지 인지를 못하는데 여기서 정말 많은 시간을 들였다. github에 있는 문서에서는 다른 git에 들어가서 local로 plugin을 다운받으라고 했는데 .../node_module/.bin/shjs를 못찾는다는 오류였다.

터미널로 들어가서 경로를 확인 해봤지만 shjs 있지만 찾지를 못했다 그래서 다시 깔아보고 삭제해보고 다르게 해보고 여러가지 방법을 시도 한 결과 config.xml 파일에 plugin 정보를 추가해주고 cordova build를 하는게 답이었다.

.config.xml

$ cordova build

이렇게 해주니 APP_ID 나 APP_NAME이 무엇인지 못찾는다는 오류는 발생하지 않았다.

* 혹시 다른 오류때문에 고생하는 사람들을 위한 url *

https://github.com/jeduan/cordova-plugin-facebook4/blob/master/docs/TROUBLESHOOTING.md

페이스북 로그인 연동

/* 페이스북 로그인 */ function loginWithFacebook(){ var facebookFrame = document.getElementById('facebook-frame'); var server_url = window.sessionStorage.getItem('server_url'); facebookFrame.setAttribute('src', `http://localhost:8000/members/facebook/auth`); facebookFrame.style.display = "block"; window.addEventListener('message', function(e){ if(e.origin == server_url){ if(e.data == '403'){ //서버 내 오류 발생시 처리 alert("로그인 실패"); facebookFrame.removeAttribute('src'); facebookFrame.style.display = "none"; } else{ alert("로그인 성공!"); facebookFrame.removeAttribute('src'); facebookFrame.style.display = "none"; } } }) }

그리고 서버에서는 controller가 아닌 view단에서 처리해준다.

window.onload = function () { function getAccessTokenSuccess(response) { $.ajax({ url: '/members/facebook/login', type: 'post', headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { facebookInfo: response }, success: function (data) { // 받는 데이터는 유저 정보 // 로그인 및 회원가입 성공, 클라쪽으로 데이터 쏴주기 window.parent.postMessage(data, '*') /*console.dir(data)*/ }, error: function (error) { console.dir(error) window.parent.postMessage('403', '*') } }) } window.fbAsyncInit = function () { FB.init({ appId: '', autoLogAppEvents: true, xfbml: true, version: 'v5.0' }); FB.login(function (response) { if (response.status === 'connected') { console.log('success') getAccessTokenSuccess(response) } else { console.log('error') } }, {scope: 'public_profile,email'}) } }

위 처럼 팝업으로 페이스북 로그인창이 뜬걸 볼수 있다.

페이스북 로그인으로 인한 데이터는 getAccessTokenSuccess 함수의 response를 출력하면 나온다

IOS (2020/03/02 추가)

그냥 이대로 끝내고 ios 를 빌드하거나 실행하면 plugin을 찾을수 없다는 오류가 발생하는데 이때는 이렇게 하면된다.

sudo gem install cocoapods-dependencies cd platforms/ios/ pod dependencies pod update

그러면 완료!

from http://become-a-developer.tistory.com/36 by ccl(A) rewrite - 2020-03-07 06:55:51