프론트엔드 로그인

페이스북 로그인 프론트 엔드 구현

사용 툴 및 언어 :  이동

개념 : 이동

앱 생성 : 이동 

1. Angular 에서 사용할 때  facebook 메뉴얼대로 js를 추가해도 되지만

더 쉬운 방법인 모듈을 설치하는 방법도 있다.

ngx-facebook (위의 사이트 가면 예제부터 소스코드 & 문서까지 다 있다.)

npm으로 모듈 설치
npm i --save ngx-facebook

--save 명령어는 pakage.json에 모듈 업데이트해 현재 프로젝트에 적용함
 

2. index.html 에다 JS SDK추가

	<!-- ngx-facebook facebook login Module -->
<script src="//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.12"></script>

3. 사용할 컴포넌트에  Service 및 facebok 호출

constructor(private facebookService: FacebookService) 
	    {      
	        facebookService.init({
	            appId: environment.facebookAppId,
	            version: environment.facebookVersion
	        });
	    }// 직접 입력도 가능

/**
	  constructor(private fb: FacebookService) {
	 
	    let initParams: InitParams = {
	      appId: '1234566778',
	      xfbml: true,
	      version: 'v2.8'
	    };
	 
	    fb.init(initParams);
	  }
**/

그다음에는 문서에 있는것처럼 사용할 기능을 호출하면 된다.

document : https://zyra.github.io/ngx-facebook/
example: https://zyra.github.io/ngx-facebook-example/
source: https://github.com/zyra/ngx-facebook-example/
 

4. 로그인 버튼 구현하기

html

	<button type="button" class="btn btn-facebook" (click)="facebookLogin()">페이스북으로 시작하기</button>

	css
	btn-facebook[_ngcontent-c9] {
	margin-top: 30px;
	background-color: #4c69aa;
	width: 100%;
	height: 50px;
	color: #fff;
}

    facebookLogin() {
	    this.facebookService.login()
	    .then((response: LoginResponse) => {
	        if (response.status === 'connected') {
	            this.accountCredentials.facebookToken = response.authResponse.accessToken;
	            this.accountCredentials.facebookId = response.authResponse.userID
	
	       }       
			 })
	   .catch(
			// 로그인이 안될 경우 기재
	    );
    }

response 에 대한 값은 다음의 url을 통해 확인할 수 있다.
https://developers.facebook.com/docs/facebook-login/web
 

나는 클라이언트에서 로그인을 한 후 백단에서 그 값을 재 확인 하기 위해 accessToken과 userID를 백단에 보낼것이다.

 

필자는 restAPI로 구현하기 때문에 이 이후에는 각자 알아서 개발하면 될꺼같다.

AJAX로도 할 수도 있고 여러가지 방법이 있을것이다.

구현 화면 (response는 console.log찍어서 직접 구현해보기)