以前、Firebaseのカスタム認証について記事を書きましたので、今回はGoogleアカウントによる認証について書いていきたいと思います。
下記のリンクの公式ドキュメントに詳細は述べられていますが、実際に導入した際の実例として参考になれば幸いです。
https://firebase.google.com/docs/auth/web/google-signin
1．ポップアップによる認証
|
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
|
<script src=“https://www.gstatic.com/firebasejs/3.3.0/firebase.js”></script>
<script src=“https://apis.google.com/js/platform.js” async defer></script>
<script>
// Initialize Firebase
var config = { // 適宜読み替えてください — ①
apiKey: “XXX”,
authDomain: “xxx.firebaseapp.com”,
databaseURL: “https://xxx.firebaseio.com”,
storageBucket: “xxx.appspot.com”,
};
firebase.initializeApp(config);
var provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithPopup(provider).then(function(result) {
console.log(‘Succeed Login to Firebase’, result);
// ログイン成功時の処理 — ②
var text = “Login with “ + result.user.email + “\nUID:” + result.user.uid;
document.querySelector(“#result”).innerText = text;
}).catch(function(error) {
console.log(‘Failed Login to Firebase’, error);
// ログイン失敗時の処理 — ③
document.querySelector(“#result”).innerText = “Failed”;
});
</script>
<div id=“result”></div>
|
①：configにFirebaseのコンソールトップから取得できるスニペットを入れてください。
②：ここ以降にログイン成功時の処理を記述してください。
③：ここ以降にログイン失敗時の処理を記述してください。
result.user.uid がFirebaseのパーミッションにおける auth.uid に対応しています。
公式ドキュメントのサンプルソースをコピー＆ペーストすればとりあえず動きますが、ポップアップブロックに引っかかったりアクセス時に毎回ログインしなければならなかったりで若干面倒です。
他の方法もサンプルがあるので試していきます。
2．リダイレクトによる認証
|
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
|
<script src=“https://www.gstatic.com/firebasejs/3.3.0/firebase.js”></script>
<script src=“https://apis.google.com/js/platform.js” async defer></script>
<script>
// Initialize Firebase
var config = { // 適宜読み替えてください — ①
apiKey: “XXX”,
authDomain: “xxx.firebaseapp.com”,
databaseURL: “https://xxx.firebaseio.com”,
storageBucket: “xxx.appspot.com”,
};
firebase.initializeApp(config);
firebase.auth().getRedirectResult()
.then(function(result){
if(!result.credential){
// ログインしていなければリダイレクト — ②
var provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithRedirect(provider);
return;
}
console.log(‘Succeed Login to Firebase’, result);
// ログイン成功時の処理 — ③
var text = “Login with “ + result.user.email + “\nUID:” + result.user.uid;
document.querySelector(“#result”).innerText = text;
}).catch(function(error){
console.log(‘Failed Login to Firebase’, error);
// ログイン失敗時の処理 — ④
document.querySelector(“#result”).innerText = “Failed”;
});
</script>
<div id=“result”></div>
|
①：configにFirebaseのコンソールトップから取得できるスニペットを入れてください。
②：ここ以降でログインページへのリダイレクト処理を記述しています。
③：ここ以降にログイン成功時の処理を記述してください。
④：ここ以降にログイン失敗時の処理を記述してください。
result.user.uid がFirebaseのパーミッションにおける auth.uid に対応しています。
相変わらず開くたびに毎回ログインが必要になります。
このままだとページを開いたとき勝手にリダイレクトするので、ログイン前の表示を行いたい場合には②の処理を切り分けて下さい。
3．Google APIsによる認証
|
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
64
65
66
67
|
<script src=“https://www.gstatic.com/firebasejs/3.3.0/firebase.js”></script>
<script src=“https://apis.google.com/js/platform.js” async defer></script>
<script>
// Initialize Firebase
var config = { // 適宜読み替えてください — ①
apiKey: “XXX”,
authDomain: “xxx.firebaseapp.com”,
databaseURL: “https://xxx.firebaseio.com”,
storageBucket: “xxx.appspot.com”,
};
firebase.initializeApp(config);
function onSignIn(googleUser) {
console.log(‘Google Auth Response’, googleUser);
var uid = googleUser.getBasicProfile().getId();
var email = googleUser.getBasicProfile().getEmail();
// We need to register an Observer on Firebase Auth to make sure auth is initialized.
var unsubscribe = firebase.auth().onAuthStateChanged(function(firebaseUser) {
unsubscribe();
// Check if we are already signed-in Firebase with the correct user.
if (!isUserEqual(googleUser, firebaseUser)) {
// Build Firebase credential with the Google ID token.
var credential = firebase.auth.GoogleAuthProvider.credential(googleUser.getAuthResponse().id_token);
// Sign in with credential from the Google user.
firebase.auth().signInWithCredential(credential)
.then(function(result){
console.log(‘Success signed-in Firebase.’, result);
// ログイン成功時の処理 — ②
var text = “Login with “ + email + “\nUID:” + firebase.auth().currentUser.uid;
document.querySelector(“#result”).innerText = text;
})
.catch(function(error) {
console.log(‘Failed signed-in Firebase.’, error);
// ログイン失敗時の処理 — ③
document.querySelector(“#result”).innerText = “Failed”;
});
} else {
console.log(‘User already signed-in Firebase.’);
// ログイン成功時の処理 — ②
var text = “Login with “ + email + “\nUID:” + firebase.auth().currentUser.uid;
document.querySelector(“#result”).innerText = text;
}
});
}
function isUserEqual(googleUser, firebaseUser) {
if (firebaseUser) {
var providerData = firebaseUser.providerData;
for (var i = 0; i < providerData.length; i++) {
if (providerData[i].providerId === firebase.auth.GoogleAuthProvider.PROVIDER_ID &&
providerData[i].uid === googleUser.getBasicProfile().getId()) {
// We don’t need to reauth the Firebase connection.
return true;
}
}
}
return false;
}
</script>
<meta name=“google-signin-client_id” content=“CLIENT_ID”> <!– CLIENT_IDを書き換える — ④ –>
<meta name=“google-signin-cookiepolicy” content=“single_host_origin”>
<meta name=“google-signin-scope” content=“profile email”>
<div class=“g-signin2” data-onsuccess=“onSignIn” data-theme=“dark”></div><!– サインインボタン –>
<div id=“result”></div>
|
①：configにFirebaseのコンソールトップから取得できるスニペットを入れてください。
②：ここ以降にログイン成功時の処理を記述してください。初回ログイン時のみの処理は上の②にのみ記述する。
③：ここ以降にログイン失敗時の処理を記述してください。
④：content属性にOAuth 2.0 クライアント IDを設定する。（後述）
firebase.auth().currentUser.uid がFirebaseのパーミッションにおける auth.uid に対応しています。
OAuth 2.0 クライアント IDを取得する必要があるため、下記の手順を踏んでください。
下記URLからGoogle APIsを開き、対象のFirebaseのプロジェクトを開きます。
https://console.developers.google.com/projectselector/apis/credentials
認証情報→認証情報を追加→OAuth クライアント IDと選択します。
クライアントIDの作成画面に遷移しますので、下記の値を入力すます。
アプリケーションの種類：ウェブアプリケーション
名前：任意の文字列
承認済みの JavaScript 生成元：動作させるURLのオリジン
クライアントIDが表示されますので、④のmetaタグのcontent属性に設定してください。
以上で設定は完了です。
この方法だと毎回サインインを求められはしないようです。
もっといい方法もありそうな気はしますが、ひとまずこれでいけそうです。
今回、意図せずにもGoogle APIsの認証に触れられたので、今後Firebase以外のウェブアプリケーションについてもGoogleアカウント連携ができるようにしていきたいですね。