#はじめに
おはようございます。こんにちは。こんばんは。
今回はFirebaseのAuthenticationについて見てきます。
では、早速行って見ましょう。
※今回もwebベース(Vue.js)の解説です。
#Authenticationとは
https://firebase.google.com/docs/auth/?hl=ja
Firebaseが提供してくれているサービスの1つでFirebase Authentication を使用すると、ユーザーがアプリにログインする際に、
メールアドレスとパスワードのログイン、Google ログインや Facebook ログインなどのフェデレーション ID プロバイダなど、複数のログイン方法を使用できるようになります。
#使用方法
##管理画面
###①管理画面のAuthenticationを選択する。
##webプログラム側
###ユーザー登録
※ログイン方法をメールアドレス・パスワードを選択したとき
管理画面から直接ユーザーを作成することもできるのですが、コードでの作成方法です。
<template>
<div class="hope">
<h2>アカウント登録</h2>
<input type="text" v-model="email" placeholder="メールアドレス" class="hoge">
<input type="password" v-model="password" placeholder="パスワード" class="hoge">
<input type="button" value="登録" @click="createAccount">
</div>
</template>
<script>
import firebase from '@/plugins/firebase'
export default {
data() {
return {
email: '',
password: ''
}
},
methods: {
createAccount() {
firebase.auth().createUserWithEmailAndPassword(this.email, this.password)
.then(user => {
// 登録完了
});
}
}
}
</script>
###ログイン
ユーザーの作成ができれば認証も作ります。
<template>
<div class="bowbow">
<h2>ログイン</h2>
<input type="text" placeholder="メールアドレス" v-model="email" value="hoge@gmail.com" class="loginHoge">
<input type="password" placeholder="パスワード" v-model="password" value="Passw0rd" class="loginHoge">
<input type="button" value="ログイン" @click="login">
</div>
</transition>
</template>
<script>
import firebase from '@/plugins/firebase'
export default {
data() {
return {
email: '',
password: ''
}
},
methods: {
login() {
firebase.auth().signInWithEmailAndPassword(this.email, this.password)
.then(user => {
// ログインしたら飛ぶページを指定
this.$router.push('/mypage');
}).catch((error) => {
//ログイン失敗
});
}
}
}
</script>
####その他のログイン方法
#####Google ログイン
const provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithPopup(provider).then(result => /* ... */);
#####Facebook ログイン
const provider = new firebase.auth.FacebookAuthProvider();
firebase.auth().signInWithPopup(provider).then(result => /* ... */);
#####Twitter ログイン
const provider = new firebase.auth.TwitterAuthProvider();
firebase.auth().signInWithPopup(provider).then(result => /* ... */);
###ログアウト
firebase.auth().signOut()
.then(() => {
//ログアウトできた
}).catch((error) => {
//ログアウトできない
});
###ユーザー情報取得
取得できる情報はuid(ユーザーIDと思ってください。)
,ユーザ名
,アイコン
,メールアドレス
,パスワード
などがありますが、
ユーザ名
やアイコン
は設定されていないので後述のユーザー編集で作成してください。
firebase.auth().onAuthStateChanged((user)=> {
if (user != null) {
//ユーザーがいれば
}
})
###ユーザー編集
var user = firebase.auth().currentUser;
user.updateProfile({
//編集したいもの
displayName: "ユーザ名",
photoURL: "アイコン画像のURL"
}).then((user) => {
//アカウントを編集しました
}).catch((error) => {
//アカウントを編集を失敗しました
});
なおアイコン(画像)の方はfirestore storageを使用しないといけないため、
改めてfirestore Storageの回で解説します。
###ユーザー削除
var user = firebase.auth().currentUser;
user.delete().catch(function(error) {
//ユーザーを削除できませんでした。
});
以上。
もし、間違い等、アドバイス、ご指摘等有れば教えていただけたら幸いです
次回はfirebaseが提供している機能のDatabaseを見ていきます。
最後まで読んでいただきありがとうございました。
Twitterやってます。良ければチェックして見てください。
#リンク