페이스북 로그인
web/src/main/resources/static/facebook
facebook 개발자 사이트에 앱을 등록해야 한다
① facebook 로그인 기능을 활용하기 위해 개발자 사이트에 앱(서비스)을 등록
서비스 (만드는 사이트)
예) MyList
facebook 서버 (로그인 서비스 이용)
• 우리 웹앱에서 페이스북 로그인 서비스를 이용하겠다고 등록해야 한다
→ 페이스북은 등록된 웹앱에서 로그인 요청이 들어올 때만 로그인 기능을 서비스해준다
웹 애플리케이션 서버 ------------------- facebook 서버
예) 11번가, 알라딘, EBS 등 웹앱 명단
웹앱 | 등록번호(서비스번호)
11번가 | 2722
알라딘 | 3127
웹 브라우저가 로그인을 요청하면
로그인 화면 제공
이메일, 암호, 페이스북 로그인
facebook 서버에 로그인 요청
facebook 서버에 요청할 때 등록번호를 같이 보낸다
페이스북에서 로그인 화면 제공
로그인 성공 → 승인 번호(token) 리턴
페이스북에 등록했을 때 부여받은 번호
유효한 등록번호를 안 주면 단순 페이스북 로그인 기능을 이용하는 거
Application Programmig Interface ← REST API
Application
Programmig
Interface(도구) ← 클래스, 메서드
① 일반 API 사용
Java App. ---call---> .jar (패키지 + 클래스)
② RESTful API
App. ---요청(HTTP)---> WAS
개인이 아니라 서비스쪽에서 페이스북에 등록
localhost만 가능
아무나 막 요청하는 걸 방지하기 위해서
핸드폰 번호 중복되면 안 됨
JavaScript용 Facebook SDK 설정
{
status: 'connected',
authResponse: {
accessToken: '...',
expiresIn:'...',
signedRequest:'...',
userID:'...'
}
}
동적으로 script 태그를 만든다.
http://localhost:8080/facebook/test01.html
즉시 실행 함수
function plus(a, b) {
console.log(a, b, a + b);
}
plus(100, 200);
(function(a, b) {
console.log(a, b, a + b);
})(100, 200)
(function(a, b) {
console.log(a, b, a + b);
}(100, 200));
괄호는 반드시 있어야 됨
script 태그를 다른 script 태그 앞에 동적으로 생성한다
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
http://localhost:8080/facebook/test02.html
window에 fbAsyncInit 함수 등록
appId에 내 앱 ID 집어넣기
https://developers.facebook.com/tools/explorer/
fbAsyncInit() 함수를 정의하고
함수 호출은 자바스크립트 안에서 fbAsyncInit()를 호출한다
script 태그가 만들어지자마자 즉시 실행되면서 fbAsyncInit()를 실행한다
다운로드 시켜놓고 밑에 있는 문장 실행
앱 ID, 쿠키 사용 여부, xfbml(페이스북 Markup Language 사용 여부), 버전 등 설정을 다 한다음에 서버에서 script 태그를 만들어서 다운로드 받는 script 태그
페이스북 로그인 버튼을 화면에 붙인다.
http://localhost:8080/facebook/test04_1.html
동의하고 계속하기 클릭
로그인 성공했다고 알림 받아야 됨
로그인이 된 건지 안 된 건지 어떻게 아냐고
로그인 동의 및 로그인 화면
기존 로그인 정보 전송
로그인 수행 및 token(REST API 호출 허가증)
onlogin="checkLoginState();"
onlogin : 함수명
checkLoginState(); : 함수 바디
페이스북 로그인을 수행한 후 "login" 이벤트 발생
onlogin에 등록한 코드가 실행된다.
즉 위의 예제에서는 checkLoginState() 함수를 호출한다.
html 태그 안에 자바스크립트 코드를 두면 지저분함
밖에 함수를 정의하고 html 태그 안에는 함수만 적어서 호출한다
<fb:login-button scope="public_profile,email" onlogin="console.log('로그인을 수행했음!'); console.log('하하하'); var a = 100; console.log(a*2);"></fb:login-button>
function onlogin() {
checkLoginState()
}
페이스북에 내 계정으로 로그인되어 있던 거 로그아웃하기
다시 로그인 버튼 눌러보기
페이스북 가서 리프레시 해보기
로그인 수행됐는데 로그인 된 상태가 아님
실패했는지 성공했는지 알 길이 없음
이게 4_2까지의 내용
로그인을 수행한 후에 호출
함수이름은 마음대로 정해도 됨
샘플예제가
로그인 상태를 가져올 것을 요청한다.
http://localhost:8080/facebook/test06.html
http://localhost:8080/facebook/test07.html
http://localhost:8080/facebook/test08.html
로그인 성공한 후 서버에 자동으로 로그인하기
autoServerLogin
package com.eomcs.web.facebook;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class LoginController {
}
@RestController
public class LoginController {
@RequestMapping("/facebook/login1")
public Object login1() {
return "test..ok!";
}
}
My Server ------ Client ------ Facebook Server
로그인 요청
로그인 화면
@RequestMapping("/facebook/login2")
public Object login2(String accessToken) {
// 페이스북 서버에 접속하여 사용자 정보를 요구한다.
System.out.println(accessToken);
return "test..ok!";
}
location.href = "/facebook/login2?accessToken=" + accessToken;
http://localhost:8080/facebook/test09.html
https://search.maven.org/artifact/org.apache.commons/commons-lang3/3.12.0/jar
implementation 'org.apache.commons:commons-lang3:3.12.0'
https://search.maven.org/artifact/org.apache.commons/commons-text
https://search.maven.org/artifact/org.apache.commons/commons-text/1.9/jar
commons-lang3 대신 commons-text 붙여넣기
implementation 'org.apache.commons:commons-text:1.9'
gradle cleanEclipse
gradle eclipse
return StringEscapeUtils.unescapeJava(result);
http://localhost:8080/facebook/test10.html
https://developers.facebook.com/docs/
https://developers.facebook.com/docs/facebook-login/
signin.html - mylist-boot/src/main/resources/static/member
http://localhost:8080/member/signin.html
@Accessors(chain = true)
모든 도메인에 넣어주기
체이닝 기법
이렇게 세터 메서드는 만드는 걸 chain이라고 한다
memberService.add(new Member().setEmail(email).setName(name).setPassword("1111"));
4-1) 등록된 사용자가 있다면 그 사용자로 자동 로그인 처리한다.
회원가입이 되어 있는 상태에서 페이스북 로그인을 하면 DB에 새로 추가되지 않는다
4-2) 등록된 사용자가 아니라면 회원 등록 후 자동 로그인 처리한다.
DB 확인해보니까 추가됨
SQL Mapper 에 추가
가공된 값으로 비교
18-2로 18-3 만들어보기