Firebaseへメールアドレス認証、Twitter認証、Facebook認証、匿名認証まで終わったので、今回はGoogle認証です。
目次
AuthenticationでGoogleログイン
TwitterやFacebookはプラットフォーム側のサイトで色々作業が必要でしたが、Google認証ではその必要が一切ありません。FirebaseがGoogleに買収された恩恵ここにありです。
Firebase Webコンソールの設定
FirebaseのWebコンソールへログインしたら、メニュー「Authentication」→「ログイン方法」とたどります。
画面の真ん中あたりにある「Google」のアコーディオンメニューを開き、「有効にする」にチェックしたあと、ユーザーに公開される「プロジェクト名」を確認し問題あれば編集し「保存」ボタンをクリック。
以上です!
たったこれだけで良いんですよ!
ほ、ほーっ、ホアアーッ!! ホアーッ!!
……失礼、取り乱しました。
ソースコード
config.js
いつものやつです。FirebaseのWebコンソールに表示されたものをそのままコピペします。
// コンソールの内容をそのままコピペ
var config = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "test-f76bc.firebaseapp.com",
databaseURL: "https://test-f76bc.firebaseio.com",
projectId: "test-f76bc",
storageBucket: "test-f76bc.appspot.com",
messagingSenderId: "0000000000000"
};
firebase.initializeApp(config);
index.html
FirebaseUIを利用します。TwitterやFacebookの時と同様にsignInOptions
にfirebase.auth.GoogleAuthProvider.PROVIDER_ID
を指定します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Firebase Auth for Google</title>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.css" />
<style>h1{text-align: center;}</style>
</head>
<body>
<h1>Firebase Auth for Google</h1>
<div id="firebaseui-auth-container"></div>
<script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/ui/3.5.2/firebase-ui-auth__ja.js"></script>
<script src="/js/config.js"></script>
<script>
//----------------------------------------------
// Firebase UIの設定
//----------------------------------------------
var uiConfig = {
// ログイン完了時のリダイレクト先
signInSuccessUrl: '/auth/google/done.html',
// 利用する認証機能
signInOptions: [
firebase.auth.GoogleAuthProvider.PROVIDER_ID
],
// 利用規約のURL(任意で設定)
tosUrl: 'http://example.com/kiyaku/',
// プライバシーポリシーのURL(任意で設定)
privacyPolicyUrl: 'https://miku3.net/privacy.html'
};
var ui = new firebaseui.auth.AuthUI(firebase.auth());
ui.start('#firebaseui-auth-container', uiConfig);
</script>
</body>
</html>
done.html
ログイン完了時に表示される画面です。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Firebase Auth for Google</title>
</head>
<body>
<h1>...Please wait</h1>
<div id="info"></div>
<script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-auth.js"></script>
<script src="/js/config.js"></script>
<script>
firebase.auth().onAuthStateChanged( (user) => {
let h1 = document.querySelector('h1');
let info = document.querySelector('#info');
if(user) {
h1.innerText = 'Login Complete!';
info.innerHTML = `${user.displayName}さんがログインしました<br>` +
`(${user.uid})`;
console.log(user);
}
else {
h1.innerText = 'Not Login';
}
});
</script>
</body>
</html>
実行結果
FirebaseのWebコンソールからは以下の通り確認できます。
参考ページ
このブログを応援する
お寄せいただいたお気持ちは全額サーバ代や次の記事を執筆するための原資として活用させていただいております。この記事が参考になった場合などぜひご検討ください。
同じカテゴリの記事
- [Firebase] Cloud Functionsの実行結果をCDNにキャッシュする
- [Firebase] Functionsで環境変数を参照/設定する
- Firebaseからのメール「Firebase CLI lower than 7.7.0 will need to explicitly grant access through Cloud IAM」
- [Firebase] デプロイ対象を一部のサービスに限定する
- [Firebase] CloudFunctionsのRESTful APIを独自ドメインで利用する
- [Firebase] Authenticationで複数の認証プロバイダへ同時対応する (Web編)
- [Firebase] AuthenticationでSMS認証 (Web編)
- [Firebase] AuthenticationでGitHub認証 (Web編)