やりたいこと
Firebaseでログイン画面を実装する（簡単に）
前提
- Firebaseページのデプロイができる
- FirebaseコンソールのAuthentificationでEメール、Googleアカウントを有効にしている
- ファイルの構造はこんな感じのツリーになっている
tree
project
|___functionsなど
|
|___public
| |
| |___login.html #ログインコードを書く場所
| |
| |___success.html #ログイン成功後のページ
| |
| |___terms-of-services.html #利用規約のページ
| |
| |___privacy-policy.html #プライバシーポリシーのページ
...
参考
Next Step
コード
login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Login</title>
<!-- *******************************************************************************************
* Firebaseコンソール→全般からWebアプリの初期化に必要なスニペットを貼り付ける*
***************************************************************************************** -->
<!--
authentificationに必要なライブラリを読み込む
参考：https://firebase.google.com/docs/web/setup#available-libraries
-->
<script src="/__/firebase/6.2.0/firebase-auth.js"></script>
<!--firebase UIの読み込み-->
<script src="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.css" />
<script type="text/javascript">
var uiConfig = {
callbacks: {
signInSuccessWithAuthResult: function(authResult, redirectUrl) {
//trueにするとsignInSuccessUrlで定めた場所にリダイレクトされる
//falseにするとページは遷移しない
return true;
},
uiShown: function() {
// ログイン画面が出たときに行う作業
}
},
signInFlow: 'popup',
//認証成功後のページ
signInSuccessUrl: './success.html',
signInOptions: [
firebase.auth.EmailAuthProvider.PROVIDER_ID,
firebase.auth.GoogleAuthProvider.PROVIDER_ID
],
// 利用規約のページ
tosUrl: './terms-of-services.html',
// プライバシーポリシーのページ
privacyPolicyUrl: './privacy-pocily.html'
};
// FirebaseUI ウィジェットの初期化と上のConfigの登録
// headでauthentification用のライブラリを読み込まないとfirebase.auth()でエラーが出ます。
var ui = new firebaseui.auth.AuthUI(firebase.auth());
ui.start('#firebaseui-auth-container', uiConfig);
</script>
</head>
<body>
<div id="firebaseui-auth-container"></div>
</body>
</html>
ログインページ
Terms of Service部分は./privacy-pocily.html, Privacy Policy部分は./terms-of-services.htmlで設定したページです。
ちなみに言語の変更も可能です。
認証画面
簡単に認証画面ができました。