概要
まとめました。
環境
- CDN
手順
- Authentication > ウェブ設定からconfigをコピー
- firebaseuiの読み込み
- uiの生成
- ログイン画面の生成
- ユーザー情報取得
ログイン後の操作
- サインアウト
- アカウント削除
※エラーは、firebaseuiが処理してくれます。
firebaseuiの読み込み
<script src="https://www.gstatic.com/firebasejs/ui/3.5.2/firebase-ui-auth__ja.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/3.5.2/firebase-ui-auth.css" />
uiの作成
uiは一回だけ作成します。再度、ログイン画面を表示する場合は、同じuiを使います。
ui = new firebaseui.auth.AuthUI(firebase.auth())
ログイン画面作成
-
credentialHelperを設定しないと、accountchooser.comに遷移してしまいます。 -
signInSuccessUrlは、googleで必要になります。
ui.start('#firebaseui-auth-container', {
signInSuccessUrl: '/',
credentialHelper: firebaseui.auth.CredentialHelper.NONE,
signInOptions: [
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
// firebase.auth.EmailAuthProvider.PROVIDER_ID,
],
});
ユーザー情報取得
- 自動 / ログイン / ログアウトで発生します。
- ここを監視しとけば問題ないです。
firebase.auth().onAuthStateChanged((user)=> {
console.log(user)
})
サインアウト
firebase.auth().signOut()
アカウント削除
user.delete()
サンプル
練習用に作成しました。