환경
- cordova 9.0.0
- android 8.1.0
- mac
- php laravel
개요
일반적인 안드로이드나 ios, web이 아닌 하이브리드에서 페이스북 로그인을 연동해야한다!
개발하는게 다 그렇지만 나는 내가 하나하나 개발하는게 아니라 이렇게 api를 연동하면 내가 개발하는 것보다 2배이상은 삽질을 한다.
먼저 페이스북개발자 사이트에서 app을 만들어준다
https://developers.facebook.com/
Facebook for Developers
Facebook for Developers와 사용자를 연결할 수 있는 코드 인공 지능, 비즈니스 도구, 게임, 오픈 소스, 게시, 소셜 하드웨어, 소셜 통합, 가상 현실 등 다양한 주제를 둘러보세요. Facebook의 글로벌 개발자 교육 및 연결 프로그램에 대해 알아보세요.
developers.facebook.com
여기서 로그인하고 앱을 만들어주면된다
플러그인 설치
그 다음에 plugin을 설치해주는데
https://github.com/jeduan/cordova-plugin-facebook4
jeduan/cordova-plugin-facebook4
Use the latest Facebook SDK in your Cordova and Ionic projects - jeduan/cordova-plugin-facebook4
github.com
페이스북에서 공식으로 만든 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
<plugin name="cordova-plugin-facebook4" spec="^6.2.0">
<variable name="APP_ID" value="" />
<variable name="APP_NAME" value="" />
</plugin>$ cordova build
이렇게 해주니 APP_ID 나 APP_NAME이 무엇인지 못찾는다는 오류는 발생하지 않았다.
* 혹시 다른 오류때문에 고생하는 사람들을 위한 url *
https://github.com/jeduan/cordova-plugin-facebook4/blob/master/docs/TROUBLESHOOTING.md
jeduan/cordova-plugin-facebook4
Use the latest Facebook SDK in your Cordova and Ionic projects - jeduan/cordova-plugin-facebook4
github.com
페이스북 로그인 연동
<body>
<div>
<iframe id="facebook-frame" class="frame-click" style="display: none;"></iframe>
</div>
</body>
/* 페이스북 로그인 */
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단에서 처리해준다.
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div id="status">
</div>
<script>
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'})
}
}
</script>
</body>
</html>
위 처럼 팝업으로 페이스북 로그인창이 뜬걸 볼수 있다.
페이스북 로그인으로 인한 데이터는 getAccessTokenSuccess 함수의 response를 출력하면 나온다
IOS (2020/03/02 추가)
그냥 이대로 끝내고 ios 를 빌드하거나 실행하면 plugin을 찾을수 없다는 오류가 발생하는데 이때는 이렇게 하면된다.
sudo gem install cocoapods-dependencies
cd platforms/ios/
pod dependencies
pod update
그러면 완료!
'FRAMEWORK > CORDOVA' 카테고리의 다른 글
| Cordova 네트워크 접속 확인 (0) | 2020.02.25 |
|---|---|
| 내가 만든 웹페이지에서 회원탈퇴시 페이스북 권한 해제 하기 (2) | 2020.01.30 |
| PhoneGap html 및 css 반영안될때 (0) | 2020.01.09 |
| [phone gap] 갤러리 접근 (0) | 2020.01.09 |
| [Maven] Maven 설치하기 (0) | 2019.08.14 |