Fierbase란, 구글에서 지원해주는 Cloud Service로 GCM(Google Cloud Messagine)의 발전 버전이다.
Firebase을 이용해서 모바일에 Message을 보내줄 수 있기도 하면서 다양한 서비스를 지원해준다.(대표적으로 OAuth 인증 시스템 및 저장소, 데이터 베이스 등등...)
여기서 Firebase의 인증 시스템을 사용할려고 한다.
console firebase 여기에 들어가면 Firebase의 콘솔 웹 페이지가 들어갈 수 있다.
이렇게 프로젝트를 추가해서 제공할 수 있다.
여기서 프로젝트를 제작하면, 다음과 같은 페이지로 넘어가진다.
표시한 부분인 '웹 앱에 Firebase 추가'라는걸 이용하면, 웹 페이지가 추가 할 수 있는 라이브 러리 코드가 나온다.
Authentication이라는걸 들어가면, 사용자 인증 시스템을 설정할 수 있는 페이지로 넘어가지게 된다.
여기서 '로그인 방식'을 보면, 로그인 제공 방식을 설정할 수 있다.
필자는 Google 인증 시스템을 사용할려고 한다.
이렇게 하면, 프로젝트 로그인 시스템을 구현할 수 있게 된다.
이제, 설정이 어느정도 되었다면, 다음 예시 소스처럼 한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
<!DOCTYPE html>
<html>
<head>
<script>
// Firebase 초기화
var config = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: ""
};
firebase.initializeApp(config);
</script>
<script>
function OAuth()
{
var provider = new firebase.auth.GoogleAuthProvider();//인증 시스템 시작.
firebase.auth().signInWithPopup(provider).then(function(result){
//인증 완료시 변화 코드
alert(result.user.displayName);
}).catch(function(error){
//인증 실패시 변화 코드
alert(error.message);
});
//인증 상태변화를 감지하는 설정.
firebase.auth().onAuthStateChanged(function(user){
if(user){
//인증을 성공한 결과을 출력하기 위한 소스.
document.getElementById('auth_state').innerHTML=user.displayName;
document.getElementById('auth_out').style.display='inline';
}else{
//인증을 하지 않은 결과를 출력하기 위한 소스.
document.getElementById('auth_state').innerHTML='off';
document.getElementById('auth_out').style.display='none';
}
});
}
function OAuth_out()
{
firebase.auth().signOut().then(function(){
alert('Auth Out');
}).catch(function(error){
alert(error.message);
});
}
</script>
</head>
<body>
<div>
<div>
상태 :
<span id='auth_state'>off</span>
</div>
<div>
<button id='auth_button' onClick='OAuth()' type='button'>Auth</button>
<button id='auth_out' onClick='OAuth_out()' type='button' hidden>Auth Out</button>
</div>
</div>
</boby>
</html>
|
이렇게 하면, 구현이 된다.
예시를 적용한 예.
상태 :
off
'연습' 카테고리의 다른 글
| libgcc_sdw2-1.dll 오류 해결법. (0) | 2018.04.05 |
|---|---|
| wxWidgets 설치하기 (0) | 2018.04.03 |
| C와 C++의 상속을 간단하게 비교해봤다. (0) | 2018.04.01 |
| wxWidget에서 오류나는 것으로 보이는 주의사항. (0) | 2017.06.30 |
| 안드로이드 Oauth2을 이용한 로그인 어플 만들기. (0) | 2017.04.06 |
