2022-03-31(목)

Jeongyun Heo·2022년 3월 31일
0

페이스북 로그인

SNS 로그인 연동 : Facebook 로그인 연동

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 => 일반 API와 REST API

① 일반 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/

http://localhost:8080/member/signin.html

@Accessors(chain = true)
모든 도메인에 넣어주기

객체 세터의 리턴값을 this로 처리

체이닝 기법

이렇게 세터 메서드는 만드는 걸 chain이라고 한다

memberService.add(new Member().setEmail(email).setName(name).setPassword("1111"));

4-1) 등록된 사용자가 있다면 그 사용자로 자동 로그인 처리한다.
회원가입이 되어 있는 상태에서 페이스북 로그인을 하면 DB에 새로 추가되지 않는다

4-2) 등록된 사용자가 아니라면 회원 등록 후 자동 로그인 처리한다.
DB 확인해보니까 추가됨

SQL Mapper 에 추가

가공된 값으로 비교

18-2로 18-3 만들어보기

0개의 댓글